带灯箱的Bootstrap画廊 [英] Bootstrap Gallery with Lightbox

问题描述

我正在使用ekko灯箱和bootstrap modal创建画廊.但是，我似乎无法像在此示例中那样使图像导航控件出现/工作: http ://ashleydw.github.io/lightbox/#image-gallery

I'm using the ekko lightbox along with bootstrap modal to create a gallery. However I cant seem to get the image navigation controls to appear/work like they do on this example: http://ashleydw.github.io/lightbox/#image-gallery

当您将鼠标悬停在图像上时，您会看到导航控件箭头.我尝试将数据属性data-gallery ="multiimages"添加到我的图像中，但这没有帮助.

As you can see when you hover over an image you get navigation control arrows. I've tried adding the data attribute data-gallery="multiimages" to my images but this hasnt helped.

您可以在这里看到我的开发代码: http://agtdesigns.co.uk/bootstrap-gallery /

You can see my development code here: http://agtdesigns.co.uk/bootstrap-gallery/

任何帮助表示赞赏，

tia

推荐答案

我遇到了同样的问题， 有关答案，请参见 https://github.com/ashleydw/lightbox/issues/33

I had the same problem, see https://github.com/ashleydw/lightbox/issues/33 for the answer.

总而言之，您需要添加一个包装div，例如

In summary, you need to add a wrapping div, eg

<div class="gallery">

然后作为JS代码

$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
        event.preventDefault();
        return $(this).ekkoLightbox({
            always_show_close: true,
            gallery_parent_selector: '.gallery',
    });
});

这篇关于带灯箱的Bootstrap画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！