Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #1231486

    Well 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/

    #1231678

    by 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/

    #1231680

    Thank 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.

    #1231684

    Amazing! 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!

    #1231742

    Hi chrishilli,

    Glad you got it working for you with Guenni007’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘single image lightbox problem’ is closed to new replies.