-
Posts
-
I’m trying to put three images next to each other and have each one open it’s own lightbox gallery. I found this thread: https://kriesi.at/support/topic/single-image-opens-to-lightbox-gallery/ and am using the following code for each:
<div class = "post-entry"> <a href = "URL to your main image"><img src = "URL to your main image" /></a> <a href = "URL to your other images" style = "display: none;"> </a> <a href = "URL to your other images" style = "display: none;"> </a> etc etc </div>Whilst this seems to almost work, when you click any of the three images the lightbox that opens up includes all the images combined rather than purely using the image URLs listed in their code. They seem to scroll through the images in that code block and then begin scrolling through the images from the other two code blocks.
Hey ACJJ619,
Have you considered using three gallery elements in three 1/3 columns, with the “Big image only, other images can be accessed via lightbox” option?
You could remove the padding between them with this css:#top div .av_one_third.el_after_av_one_third, #top div .av_one_third.el_before_av_one_third{ margin-left: 0px!important; width: 33% !important; } #top div .avia-gallery .avia-gallery-big {padding: 0px!important; }I would recommend adding page_id’s to the code so it won’t conflict with other pages.
Best regards,
MikeThanks for the swift reply! I did try that before but the problem was, I want the text over the top (as seen in my link) but with your suggested method, the first image that opens up is the same as the thumbnail, meaning you see the text twice. Does that make sense? Your method would be perfect if I could make the gallery skip the first image?
Your suggested method can be found half way down this page and you’ll see the issue: https://www.flick.digital/index.php/home-3/
Hi,
Use the “data-rel” attribute to separate the galleries. Example.
<!-- gallery 1 --> <div class ="post-entry"> <a href ="URL to your main image" data-rel="gallery-1"><img src ="URL to your main image" /></a> <a href ="URL to your other images" data-rel="gallery-1" style ="display: none;"> </a> <a href ="URL to your other images" data-rel="gallery-1" style ="display: none;"> </a></div> <!-- gallery 2 --> <div class="post-entry"> <a href ="URL to your main image" data-rel="gallery-2"><img src="URL to your main image" /></a> <a href ="URL to your other images" data-rel="gallery-2" style="display: none;"> </a> <a href ="URL to your other images" data-rel="gallery-2" style="display: none;"> </a></div>Best regards,
Ismael
- You must be logged in to reply to this topic.