Hover not click and have a lightBox appear showing another div inside

Question

i've been trying to make a grid of images and when hover over each one a different div of info will appear as in Lightbox (or something similar).

this is what i have so far but i have a few problems: i don't want to keep repeating the javascript for each one, and sometimes when you hover over an image the wrong Lightbox will appear or not appear at all. Please help. http://jsfiddle.net/sandiie/gbws9fgy/1/

<span class="test"><img src='http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'/></span>

<span class="test2"><img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/></span>

<span class="test"><img src='http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'/></span>

<div class='p'>
<div id="myDivID">together
    <div><img src='http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'> </div>
</div>
    </div>

     <div class='p'>
<div id="myDivID2">apart
    <div><img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'> </div>
</div>
    </div>
<script>
$(".test").fancybox({
        'href'          : '#myDivID',
        'padding'       : 0
});

$(".test").hover(function() {
    $(this).click();
    $("#fancybox-overlay").remove();
}, function() {
    $.fancybox.close();
});

$(".test2").fancybox({
        'href'          : '#myDivID2',
        'padding'       : 0
});

$(".test2").hover(function() {
    $(this).click();
    $("#fancybox-overlay").remove(); 
}, function() {
    $.fancybox.close();
});
</script>

please dont format your code.... it might help people tracking the issue — Max, Jul 28 '15 at 23:43
You can use event delegation to propagate the hover event on your images. — Felix, Jul 28 '15 at 23:57

score 0 · Answer 1 · answered Jul 29 '15 at 00:40

0

You may need to reformat your html for a semantic HTML this is what you need:

 <a href="http://lorempixel.com/400/400/sports/1" data-lightbox="image-1" data-title="Sports 1">
    <img src="http://lorempixel.com/200/200/sports/1" alt=""/>
  </a>

The code above use lightbox plugin. With lightbox you don't need to repeat the JS the data-attribute takes care of the lightbox for you. Just add your HTML tags with the data-lightbox attribute.

DEMO

answered Jul 29 '15 at 00:40

Felix

3,058
6
43
53

thanx but i want it to pop up on a hover not a click and the lightbox will show content not just an image and title – sandiie Jul 29 '15 at 15:25

score 0 · Answer 2 · edited May 23 '17 at 12:30

It's all in the fancybox API.

If you wish for the image to change to the one the mouse is hovering over, you can use the .children() and .clone() functions and remove / append a child to the fancybox div, or you could use the content:url css style, but browser compatibility is low for the latter.

As for not wanting to repeat code for every element, that's what the class attribute was made for. You make one class and add event handlers to it, and they it will affect every element with that class. For example:

$(".divWithPopup").hover(function(event) {
        event.target.click();
        //here you could  do something like
        //$("#fancyboxSourceDiv").children("img").remove();
        //$("#fancyboxSourceDiv").append(event.target.children("img").clone());
    }, function(event) {
        $.fancybox.close();
});

Oh, and there's an option for hiding the overlay (overlayShow:false). You don't have to (and shouldn't) remove it after creating the fancybox.

thanx but i'm not trying to show another image in a bigger size. its content plus a small image. i want to display a div in the html to show on the Lightbox for each image hovered. — sandiie, Jul 29 '15 at 15:38

Hover not click and have a lightBox appear showing another div inside

2 Answers2