Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1409589

    Hello Enfold Team,

    I have multiple images on a page (using a media module, not in a text module) and want to be able to toggle through them within the lightbox. I found another thread, and it said to add “av-group-lightbox” to the customer CSS Class but this didn’t work for me (it still only opened one image in the lightbox).

    Your help is greatly appreciated.

    -James

    • This topic was modified 1 year, 6 months ago by nTECHgrate.
    #1409591

    to which element did you add this class? – it has to be on a parent of the image itself ( on image alb this is the case if you put that class to the image alb) – but for images inside text-block not if you inserted that class to the first input field: “Image CSS Class” – you had to insert it to “Link CSS Class”.

    #1409594

    hm – tested it on newest Enfold – seems not to work as expected – and even the known snippet of generating groups – does not work anymore in that manner that even if there are images in text-block element with that group-class are together in one Group.
    Between Image Alb even in different color-sections the snippet works!

    (on using group-1, group-2 etc. )

    function handle_lightbox_groups_in_gallery(){
    ?>
    <script>
    (function($){
        $(window).on('load',function() {
            $('.group-1 .lightbox-added').attr('data-group', '1');
            $('.group-2 .lightbox-added').attr('data-group', '2');
            $('.group-3 .lightbox-added').attr('data-group', '3');
            $('.group-4 .lightbox-added').attr('data-group', '4');
            $('.group-5 .lightbox-added').attr('data-group', '5');
            $('.group-6 .lightbox-added').attr('data-group', '6');
            $('.group-7 .lightbox-added').attr('data-group', '7');
            $('.group-8 .lightbox-added').attr('data-group', '8');
            // …
    
            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');
    #1409911

    Thank you for the reply, but I am still a novice at this, so please forgive me for not quite understanding. Do I add the above to my PHP file for my child theme and then attach a custom CSS class to each image?

    #1409917

    Yes – but i tested the last snippet – on image alb – it works – even if the image alb elements are not in the same container.
    There is on avia-snippet-lightbox.js a setting which images are grouped.
    https://webers-testseite.de/lightbox-grouping/ ( test all squared image are inside a group – and the rest inside another group.
    see code from there:

    groups :	['.avia-slideshow', '.avia-gallery', '.av-horizontal-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu', '.woocommerce-product-gallery']'
    

    so if an image is in the same f.e. avia-gallery group it will be forced in a common lightbox.

    the above snippet will group all images that are linked to lightbox – and have a parent class group-1 etc.

    but i thought on former enfold versions this does include even image inside text-block alb elements.
    But i tested that with no success.

    #1410087

    Hi,
    Glad Guenni007 could help, thank you Guenni007, were you able sort this out or did you need further assistance?

    Best regards,
    Mike

    #1410096

    Mike,

    I am still a bit foggy about what I am supposed to do here. Can you please confirm:

    1. add the following code to the custom PHP file within my child theme:
    function handle_lightbox_groups_in_gallery(){
    ?>
    <script>
    (function($){
    $(window).on(‘load’,function() {
    $(‘.group-1 .lightbox-added’).attr(‘data-group’, ‘1’);
    $(‘.group-2 .lightbox-added’).attr(‘data-group’, ‘2’);
    $(‘.group-3 .lightbox-added’).attr(‘data-group’, ‘3’);
    $(‘.group-4 .lightbox-added’).attr(‘data-group’, ‘4’);
    $(‘.group-5 .lightbox-added’).attr(‘data-group’, ‘5’);
    $(‘.group-6 .lightbox-added’).attr(‘data-group’, ‘6’);
    $(‘.group-7 .lightbox-added’).attr(‘data-group’, ‘7’);
    $(‘.group-8 .lightbox-added’).attr(‘data-group’, ‘8’);
    // …

    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’);

    2. add ____ to the custom CSS field on each image on a given page
    ????

    Thanks

    #1410123

    not a custom php file – put these lines to your child-theme functions.php

    on default installation of a child-theme ( Link ) there will be at the beginning :
    functions.php ; screenshot.png ; style.css

    on a fresh installed child-theme functions.php there are no extra entries – only a leading <?php on top.
    those extra snippets comes to that file – leave the leading line untouched.

    _____________

    if you like to group some images on a page just give to the image that common group class ( group-1, group-2 etc. )
    Images in text-blocks : put that custom class to the link ( “Link CSS Class”) : group-1 etc. – see screenshot above. (Link )

    see here in action: https://webers-testseite.de/lightbox-grouping/
    All squared images are in one group – and the Rest is in a different group.

    PS: you can add more lines to that list – but i think 8 groups on a page will be enough.

    #1410495

    Thank you for your help and continued patience. I performed the steps mentioned above, and it worked for all the individual images on the page. However, the masonry gallery on the page still remains in its own lightbox.

    #1410515

    on that masonry you entered : .group-1

    remove the dot on that class – and look if that is the trick.

    #1410517

    That did it!!!!

    Thank you so much for your help.

    -James

    #1410522

    Hi,
    Glad Guenni007 could help, thank you Guenni007.

    Best regards,
    Mike

    #1413007

    You can close this ticket.

    Thank you.

    #1413012

    Hi nTECHgrate,

    Thanks as well for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Multiple images in light box’ is closed to new replies.