samedi 18 juin 2016

Bootstrap lightbox arrows


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/


Aucun commentaire:

Enregistrer un commentaire