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>

Answer 1

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

        $('#ri-grid').html($('#ri-grid').html());

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

Answer 2

全部都在the fancybox API。

如果您希望将图像更改为鼠标悬停在图像上的图像，您可以使用.children()和.clone()功能以及remove / append一个孩子到fancybox div，或者你可以使用content:url css样式，但后者的浏览器兼容性较低。

至于不想为每个元素重复代码，这就是class属性的用途。您创建一个类并向其添加事件处理程序，它们将影响该类的每个元素。例如：

$(".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();
});

哦，还有隐藏叠加层的选项（overlayShow：false）。创建fancybox后，您不必（也不应该）删除它。

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

2 个答案: