-
Posts
-
http://www.visioglas.com/produkte/rahmenlose-echtglasduschen/eck-duschen/#tab-id-4
Hi,
there’s a link on top, on that page there’s a slider and below it 5 tabs, normally if you click on thumbnail in the sliders it will not open the image in the lightbox, now on the 4th tab there are 8 images and they open in lightbox if you click on them and there should only be 8 lightbox but the problem now is that there are 22 entry for the lightbox which include the sliders and other images inside the other tabs.
question: how can i group the lightbox so that in the 4th tab there will only be 8?
Thank you in advance.
Regards,
pandawebHey pandaweb!
As far as I know there isn’t any ability to control lightbox grouping at this point when handled automatically. I’ll tag Kriesi on the topic however as he might be able to shed a bit more light on the new script.
Cheers!
DevinUnlike the old lightbox script (PrettyPhoto) you can just put “rel” attribute to be able to group them. Hope there will be a solution asap.
Thank you.
Hey!
The lightbox now uses the data-rel attribute instead of the standard rel attribute to group images. Instead of:
<a href="http://www.visioglas.com/wp-content/uploads/2014/07/Glasdesign-Klarglas-1.jpg" class="avia_image lightbox-added" rel="prettyphoto">...you just need to write:
<a href="http://www.visioglas.com/wp-content/uploads/2014/07/Glasdesign-Klarglas-1.jpg" class="avia_image lightbox-added" data-rel="prettyphoto">...I’ll ask Kriesi to look into it though – probably we’ll add a rel to data-rel conversion script.
Cheers!
PeterHey!
You can add this on functions.php:
function ava_add_custom_lightbox(){ ?> <script> (function($){ var b = function() { var i, a = $('.avia-custom-gallery'), b = $('.avia-custom-gallery').length; for (i = 0; i < b; i++) { a.eq(i).find('a').attr('data-rel', 'grid-' + i); } } b(); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_add_custom_lightbox');Now, create a container or div with the avia-custom-gallery class:
<div class="avia-custom-gallery"> </div>Insert all images that you want to show on the same lightbox inside the container.
Regards,
IsmaelTrying for a couple days now to find a solution for separate lightbox on same page and finally thought this would do it. All this does is allow one separate lightbox, correct? What if you have want 3 or more lightboxes?
I’m pulling my hair our on this one. My old site all I had to do was use rel=”lightbox[name]” and I could have as many separate lightboxes as I needed. I have tried several different lightbox plugins as well as everything I can find online and there doesn’t seem to be a solution.
All I want to do is have a part list and when you click the part number, 2 or 3 images come up. This seems like such a simple thing. Crazy that it’s so hard to do…maybe I’m missing something.
Hi!
We modified the code above. This script will assign different data-rel attributes for each group.
// https://kriesi.at/support/topic/group-lightbox/#post-340489
If you need multiple group of images, just create a new “avia-custom-gallery” container.
Best regards,
IsmaelHey!
UPDATE: If this is not working, please try the solution here:
// https://kriesi.at/support/topic/lightbox-on-button-click/#post-650061
Regards,
IsmaelHi Ismael,
For some reason I could not get either of those to work for me (maybe I got something wrong with code). However I found that there is a very simple solution to having separate lightboxes which I just posted on another thread.All I needed was to put each gallery in a div with the following:
<div class=”avia-gallery”></div>I did not need to add any other code anywhere.
I still would prefer that it worked with a simple relational attribute such as:
rel=”lightbox[001]”
It works this way another site I have and eliminates the need to surround everything with the div class. However the above is a very acceptable solution.Thanks again!
- You must be logged in to reply to this topic.