Question

所以我无法做到这一点。我需要从隐藏的图像调用一个图库（显示一个图像，然后单击它，灯箱打开它。然后你可以去下一个并看到其他图像）

它只是放大图像但没有显示箭头，没有隐藏图像的图库。

我从这里复制了源代码中的示例：http://ashleydw.github.io/lightbox/

但它没有用，所以我找到了答案here，我需要在父div中添加一个类，然后我更改了代码以匹配该示例。它的工作原理是一样的。放大图片，没有箭头，没有画廊。

到目前为止，这是我的代码：

HTML

<div class="col-md-4  hiddenimages">
    <a data-toggle="lightbox" data-gallery="hiddenimages" data-title="People walking down stairs" href="http://prueba.ikosweb.com/arqcocun/images/galeria/lagos-sol.JPG"><img src="http://prueba.ikosweb.com/arqcocun/images/galeria/lagos-sol.JPG" class="img-responsive"></a>
    <h3>CASA LAGOS DEL SOL</h3>
    <p>BARRANCO 2008</p>
    <!-- elements not showing, use data-remote -->
    <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://prueba.ikosweb.com/arqcocun/images/galeria/lagos-sol1.jpeg" data-title="Hidden item 1"></div>
    <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>
    <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://distilleryimage2.ak.instagram.com/e3493b0a045411e3a4fb22000a1f97ec_7.jpg" data-title="Hidden item 3"></div>
    <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://distilleryimage10.ak.instagram.com/85c5d0e4039411e3bd9b22000aa82186_7.jpg" data-title="Hidden item 4"></div>
</div>

JS

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

这是我尝试失败的小提琴 https://jsfiddle.net/cv6hrp7a/1/

Answer 1

有点晚了，但对于人们搜索可能会有所帮助。对我来说，将每个隐藏元素作为锚标记起作用。因为它们都是隐藏的，所以你也不需要以任何方式对齐它们，只需将它们全部放在可见元素旁边。

<div>
<a class="box" href="img/img1.png" data-toggle="lightbox" data-gallery="multiimages"><img src="img1-sm.png" alt=""></a>
<a class="box hidden" href="img/img2.png" data-toggle="lightbox" data-gallery="multiimages"></a>
</div>

CSS：

.hidden {
    display:none;
}

JS（只是基础知识）：

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

Bootstrap灯箱箭头

1 个答案: