Bootstrap lightbox arrows

Question

So I can't make this work. I need to call a gallery from hidden images (show one image, then click it and the lightbox opens with it. Then you can go next and prev to see the other images)

It just enlarges the image but no arrows are displayed, no gallery from hidden images.

I copied the examples from source code from here: http://ashleydw.github.io/lightbox/

But it didn't work so I found an answer here and I needed to add a class to the parent div and I changed the code to match that example. It works just the same. Enlarges image, no arrows, no gallery.

Here's my code so far:

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',
        });
    });
});

Here's a fiddle with my failed attempt https://jsfiddle.net/cv6hrp7a/1/

Answer 1

A little bit late, but for people search might be helpful. For me having each hidden element as an anchor tag works. Since they are all hidden you don't really need to align them in any way either, just put them all next to your visible element.

<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 (just the basics):

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