Opening gallery from another image without showing current image in lightbox

[gunjanpatel]

Trying to open gallery by click another image but I don't want this particular image to be in lightbox so using following code.

$(document).on('click', '#main-image', function(event) {
        event.preventDefault();
        $('.thumbnail').ekkoLightbox();
    });

and HTML code for that,

<div class="row">
    <div class="offset-md-2 col-md-8">
        <a id="main-image" href="https://unsplash.it/1200/768.jpg?image=251" class="col-sm-4">
            <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
        </a>
    </div>
</div>
<div class="row">
    <div class="offset-md-2 col-md-8">
        <div class="row">
            <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 thumbnail">
                <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 thumbnail">
                <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 thumbnail">
                <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
            </a>
        </div>
        <div class="row">
            <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 thumbnail">
                <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 thumbnail">
                <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
            </a>
            <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4 thumbnail">
                <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
            </a>
        </div>
    </div>
</div>

If you really do think you have a bug, please:

• [x] Provide a link to your site or a full example http://codepen.io/gunjanpatel/pen/QppVgM
• [x] Browser name and version Firefox 51.0.1 (64-bit)

[ashleydw]

what's the bug here?

If you want to open a gallery from another element then programmatically call it http://ashleydw.github.io/lightbox/#programatically-call

[gunjanpatel]

I hope you have checked link I provided and tried to click on image. Yes, I know programatically-call but that will also include image which I clicked into gallery. I don't want that image included in gallery.

[gunjanpatel]

In other words, I want to open gallery slideshow on click of image and that image should not be in the slideshow. In above example I need all images having .thumbnail class into gallery slideshow when I click on #main-image.

[ashleydw]

Assign the other image a click event and within the handler trigger the click of the gallery.

[gunjanpatel]

Thanks @ashleydw it was tricky. It worked now even without using trigger. I have updated code in above link and it works now even with ekkoLightbox method.

$(document).on('click', '#main-image', function(event) {
  event.preventDefault();

  // Only trigger first image  click to avoid multiple triggers
  $('.thumbnail:first').ekkoLightbox();
});

[sommerset]

hi @ashleydw and thanks for your work on this project. Quick question, is this the preferable method to opening a gallery from an "unrelated" link? My scenario is that I want to open the gallery from a "open gallery" button that doesn't have an image.

Thanks in advance. Ignacio

[sommerset]

I am currently doing it like this but I wondere if I am not missing anything obvious... I am adding custom data- attributes and checking for those JS

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        var $the_button =  $(this);
        if ($the_button.data('behaviour') == 'open-gallery') {
            var target =  $the_button.data('gallery-target');
            $('#'+target + ' div:first-child').ekkoLightbox();

        } else {
            $(this).ekkoLightbox();
        }
    });

Markup

<a href="#g-test" class="single-button" target="_self" data-toggle="lightbox" data-type="image" data-behaviour="open-gallery" data-gallery-target="g-test">open gallery</a>
<div class="hidden-galleries"> 
    <div id="g-test">
        <div data-toggle="lightbox" data-gallery="g-test" data-remote="./television.jpg" data-title="Galería test"></div>
        <div data-toggle="lightbox" data-gallery="g-test" data-remote="./teatro.jpg" data-title="Galería test"></div>
        <div data-toggle="lightbox" data-gallery="g-test" data-remote="./radio.jpg" data-title="Galería test"></div>
    </div>
</div>