Moving through images in Fliterable-Gallery-with-Lightbox-BS4

Bootstrap Studio Help
1

Once I have clicked on a thumbnail I would like to be able to click on the opened image to move forwards or backwards through the lightroom rather than having to click solely on the > or <.

Can anyone suggest what needs to be changed to achieve this please?

2

You have to be able to click something so it works. With this lightbox like gallery, you'd have to set click zones that are on either half of the image and viewport.

Fortunately, that didn't seem to difficult to do. Do remember you have to be on one side or the other, you can't just expect to be able to click anywhere and it somehow thinks you meant to click forward or you meant to click back. So all you're really doing the making the buttons fill up 50% of either side of the viewport.

.sl-wrapper .sl-navigation button {
    top: 0;       // change
    height: 100%; // add
}
.sl-wrapper .sl-close {
    z-index: 11060;  // change
}
@media (min-width: 50em)
.sl-wrapper .sl-navigation button {
    width: 50%;      // change
    z-index: 11000;  // add
}
@media (min-width: 50em)
.sl-wrapper .sl-navigation button.sl-next {
    text-align: right;  // add
}
@media (min-width: 50em)
.sl-wrapper .sl-navigation button.sl-prev {
    text-align: left;  // add
}

This was done in normal Desktop view, I didn't check different browser sizes so you'll probably need to make other media query break point changes. It's at least something to work with though.

And I used this site to test it on through Chrome's developer tools. http://imagia-mu.com/DEV/BS/filterable-gallery/

Saj

3

Thanks: appreciated! All I need to do now is to work out how to move the < and > to just below the image.

4

Your welcome, glad I could help :)

Not sure how I forgot the curly brackets for the media queries themselves though :(

Saj

5

You can always add an additional set of buttons to be put where ever you want them. Just give them a unique ID and you can do something like

/* Addition Next button */
$("#sl-next").on("click",function(){
    $(".sl-next").trigger("click");
});

/* Addition Previous button */
$("#sl-prev").on("click",function(){
    $(".sl-prev").trigger("click");
});

So you can then also effectively hide the initial chevron icons

.sl-wrapper .sl-navigation button {
    overflow:hidden; /* add */
    text-indent:100em; /* add */
}

You can then add addition Next/Prev links where ever you want them. I used this site to test it on through Chrome’s developer tools. http://imagia-mu.com/DEV/BS/filterable-gallery/

Saj