-
AuthorPosts
-
July 18, 2020 at 12:43 pm #1231467
Hello!
I´m trying to open a single image in a lightbox. That for sure is very simple.
I use the single image tool from avia layout builder because of the title overlay and zoom effect.But i have 4 single image boxes on one site used to show a big preview picture with title of a hotel room with a normal gallery of 3 thumbnails underneath.
So if i click on one of single images i have the opportunity to click through all four single images (left/right arrow). In my case this is very confusing because this images are showing different kinds of room categories.I tried to give them a class and hide the arrows and pic counter. But this didn´t work because it´s a matter of the lightbox and not the single image tool.
I also can´t hide them globally because the thumbnail gallery needs this navigation arrows.Is there a simple way to achieve to open a single image without this navigation arrows?
Thankful for any help.
Chris
July 18, 2020 at 8:46 pm #1231486Well it will be best to see the page it concerns.
If the other images have no link to the lightbox – they are not in the gallery – see here – only the one on the left bottom corner has lightbox link.
https://webers-testseite.de/images-with-no-link/but if you have more links to lightbox – you only can state lightbox groups for the lightbox gallery.
( or put them in different color-sections will do the jop too)
you can put this to your child-theme functions.php:
( pay attention the code is site specific set to page ID: 123456 – you had to input your page-id on that )// group images for lightbox galleries with custom-class: (group-1, group-2 etc) function handle_lightbox_groups_in_gallery(){ if(is_page(123456)){ ?> <script> (function($){ $(window).load(function() { $('.lightbox-added').each(function(index, element){ $('.group-'+index+' .lightbox-added').attr('data-group', index); }); var groups = {}; $('.lightbox-added').each(function() { var id = parseInt($(this).attr('data-group'), 10); if(!groups[id]) { groups[id] = []; } groups[id].push( this ); }); $.each(groups, function() { $(this).magnificPopup({ type: 'image', mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded', closeOnContentClick: false, closeBtnInside: false, gallery: { enabled:true } }) }); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'handle_lightbox_groups_in_gallery');
to prepare your groups then – you have to give to each image alb element the custom-Class: group-1, group-2 etc.
see here – allthough these images are in the same color-section – they open in two seperated galleries.:
https://webers-testseite.de/lightbox-grouping/July 20, 2020 at 10:24 am #1231678by the way – nice sideeffect is that you can group images in different color-sections with that method.
if you have images inside a text-block element – you can edit those images. Insert then into the link css class field – your group-x you like
by this case you had to add on the code above one line – because the class: group-x goes directly to the lightbox-added class – so there is no space between the classes – both are on the same anchor.
( on the image alb the group class is on the parent element )$('.lightbox-added').each(function(index, element){ $('.group-'+index+' .lightbox-added').attr('data-group', index); $('.group-'+index+'.lightbox-added').attr('data-group', index); });
see again on the bottom of the test-page: https://webers-testseite.de/lightbox-grouping/
July 20, 2020 at 10:38 am #1231680Thank you Guenni007!
I´ll try the solution from your first answer. I think that will do the trick and it is great that i can be handled by page ID.July 20, 2020 at 10:44 am #1231684Amazing! Guenni007 you are great.
With your solution it is even possible to group a single image alb element with a gallery element. That´s exactly what i was looking for.Topic can be closed!
July 20, 2020 at 3:11 pm #1231742Hi chrishilli,
Glad you got it working for you with Guenni007’s help! :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- The topic ‘single image lightbox problem’ is closed to new replies.