Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1409072

    Dear Support Team:

    I’m using Enfold’s Lightbox to open all images on any page that are set up to “Open in Lightbox”, where I’d like the user to be able to scroll through the images in the lightbox. But I’m finding a very peculiar behaviour where images that appear on the page before (or within) a Color Section are not included. Clicking on them only opens them singly, without arrows.

    Here was my debugging process, through which you can see that it seems to be Enfold’s Color Section that is the culprit:

    1) Besides the banner image (which was not linked), I started out with my first image (our office photo) on my home page within the left 1/2 column layout element in a Color Section. That was followed by a second Color Section with text. That was followed by some test images, including a middle-aged couple smiling, a woman holding dentures, etc. So, from top to bottom it was:

    • Color Section with Office Photo
    • Color Section with text
    • Middle-aged couple
    • Woman holding dentures
    • Other images

    2) I was perplexed why our office photo was opening singly, on its lonesome, instead of with arrows to scroll through the test images below it. The middle-aged couple, woman holding dentures, and all other images below opened in the lightbox with arrows to scroll between them.

    3) I moved the second Color Section (with text) to the top, but the office photo still opened only singly. So it wasn’t that specific second Color Section that was the culprit (so I moved it back to its position below the first Color Section).

    4) I added a 1/1 column layout element to the top (above both Color sections) and added a test image (dog chewing a denture) to it, just to make sure that it wasn’t something being done in the Color Sections and my CSS or Javascript code for them. That dog image also just opened singly.

    5) Then my suspicions returned to either or both my two Color Sections, so I created a third, EMPTY Color Section and positioned it in between the middle-aged couple and the woman holding dentures. Now from top to bottom I had:

    • Dog
    • Color Section with Office Photo
    • Color Section with text
    • Middle-aged couple
    • Empty Color Section
    • Woman holding dentures
    • Other images

    Remember, my middle-aged couple in earlier steps opened just fine–with arrows. RESULT: now the middle-aged couple also opened singly (along with the dog and office photo above her), and the woman holding dentures and all images below her opened with arrows.

    6) I also tried deactivating all my plugins, but it didn’t help.

    I can’t see anything specific in the Magnific Popup documentation (for other readers, Magnific Popup is what Enfold’s lightbox uses).

    Can you help please.

    Thanks,
    Gary

    • This topic was modified 1 year ago by garysch37.
    • This topic was modified 1 year ago by garysch37.
    #1409248

    Hi!

    Thank you for the inquiry.

    Please be aware that when you add images using the Image element, they will not be automatically grouped or linked with each other. However, you can establish a connection between them by assigning a custom class name. To do this, follow these steps:

    1.) Edit the Image elements on your page.
    2.) Navigate to the Advanced > Developer Settings section.
    3.) In the Custom CSS Class field, enter “av-group-lightbox”.
    4.) Save the changes.

    By applying the “av-group-lightbox” class name to multiple Image elements on the same page, they will be automatically grouped inside the lightbox. This grouping allows users to navigate through the images within the lightbox interface.

    Please note that it’s important to ensure consistent usage of the custom class name across the relevant Image elements in order to achieve the desired grouping effect within the lightbox.

    Regards,
    Ismael

    #1409327

    Thank you for replying Ismael. I appreciate you helping me. Unfortunately, “av-group-lightbox” didn’t work for me.

    First, I didn’t realize I needed to add a class to every image I want to open up in the lightbox gallery on a particular page. As I mentioned in my original post, point #2, all images on the page in my original test, except the office photo inside its Color Section, opened in the lightbox gallery, WITHOUT MY HAVING TO ADD ANY CLASS TO CONNECT THEM TOGETHER. I just didn’t understand why a Color Section was messing things up. I assumed that to omit an image from the lightbox gallery, you just don’t create a link on it, and if the image is linked, then it’s part of the lightbox gallery.

    It’s actually weird that all those images did open in the lightbox gallery connected together without a class, because I have found some people on the Internet talk about how Magnific Popup requires you to add a class to all images on a page that you want to include in the gallery, just like you said.

    Or the class is to be added to the links of the images perhaps, like the leadership at https://help.groupthought.com/article/64-pages-how-to-show-an-image-in-a-pop-up-window are telling their people to do:

    $(document).ready(function() {
      $('.template-article img').each(function() {
          var currentImage = $(this);
          currentImage.wrap("<a class='image-link' href='" + currentImage.attr("src") + "'</a>");
      });
      $('.image-link').magnificPopup({type:'image'});  
    });

    But I don’t know how to easily give a class to my image links, so I just went ahead with your suggestion. When I did a hard refresh of my page, I saw that the “av-group-lightbox” class was added to the avia-image-container <div>:

    <div class='avia-image-container av-liaq7z66-359c3e896ff6ab62eb93041dca6e9e63 av-styling- avia-align-center avia-builder-el-5 avia-builder-el-no-sibling av-group-lightbox' itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject" >
        <div class="avia-image-container-inner">
            <div class="avia-image-overlay-wrap">
                <a href="...dog_chewing_denture.jpg" class='avia_image' >
                    <img decoding="async" class='wp-image-191 avia-img-lazy-loading-not-191 avia_image ' src="...dog_chewing_denture-284x300.jpg" alt='' title='dog_chewing_denture'  height="300" width="284"  itemprop="thumbnailUrl" srcset="..." sizes="(max-width: 284px) 100vw, 284px" />
                </a>
            </div>
        </div>
    </div>

    Anyway, let me run down my analysis:

    ******
    TEST 1
    ******

    First, this is my home page at the moment (which has developed since I first wrote), where all Image Media Element images have Advanced > Link Settings set to Open in Lightbox, EXCEPT AS INDICATED OTHERWISE:

    • Dog (test image) in a 1/1 column layout element
    • Office Photo in Color Section
    • Color Section with text
    • Middle-aged couple (test image) in a 1/1 column layout element
    • Empty Color Section
    • Woman holding dentures (test image)
    • Couple on beach (test image) inside a Textblock in a 1/1 column layout element: this embedded image has Display Settings > Link To = Media File (with URL set to the image’s Media Library original full size URL)
    • Couple with pretzel & coffee (test image) inside a Textblock in a 1/1 column layout element
    • Color Section containing a heading, “Our Services”, in a 1/1 column layout element.
    • Color Section for Our Services with 3 rows 3 columns:
    •     – A bunch of dentures photo (small thumbnail-like image) inside the first 1/3 column layout element
          – An oral surgery photo (small thumbnail-like image) inside the second 1/3 column layout element (first row)
          – A denture on implants (small thumbnail-like image) inside the third 1/3 column layout element (first row): Advanced > Link Settings set to Set Manually and linked to the original full size image using its Media Library URL
          – …the rest of the images in the grid-like Color Section have their images set to nothing (all 1/3 columns in this “Our Services” Color Section are designed to link to the pages discussing those specific services, except I removed that column link in the first row of images for test purposes)

    • The oral surgery test image again (full size this time), inside a 1/1 column layout element (test image)

    RESULTS WITHOUT “av-group-lightbox”, with Open in Lightbox (and the one manual setting):

    • The following images opened up as singular: Dog, Office, Middle-aged couple
    • The following images opened connected together in the lightbox gallery: Woman holding dentures, Beach couple, Pretzel couple
    • All 3 images from my grid-like Color Section that I defined to Open in Lightbox did so (they were connected together).

    So to me it seems like Color Section breaks up image groupings as follows:

    • Since there is a Color Section after the dog, it isolates the dog, making it open singly in the lightbox.
    • There is only 1 image, the office, inside the Color section following the dog, so it opens singly in the lightbox.
    • Since there is an empty Color Section after the Middle-aged couple, it’s isolated and opens singly in the lightbox.
    • The next Color Section, containing the “Our Services” heading, comes after the Pretzel couple, so we have 3 images between two Color Sections, allowing them to be connected together to open as a gallery in lightbox.
    • The Color Section after that contains our grid-like images (and their headings & blurbs), making all images inside that Color Section set to Open in Lightbox open together in the lightbox as a gallery.
    • And the final image at the bottom, our full size oral surgery, is isolated after the previous Color Section, making it open singly in the lightbox.

    ******
    TEST 2
    ******

    Then I thought, for the heck of it, I’ll replace all “Advanced > Link Settings = Open in Lightbox” with “Advanced > Link Settings = Set Manually” & URL pointing to the original full size image’s URL in the Media Library.

    RESULTS WITHOUT “av-group-lightbox” and manual URL instead of Open in Lightbox: No change–I got the same results. It’s as if it’s the anchor link on the image (which I assume Open in Lightbox also sets) that determines what goes together–within the Color Section mess-up criterion I found.

    ******
    TEST 3
    ******

    So I’m left with my problem of being able to open all images on the page I wish to together in a single lightbox gallery, irrespective of what Color Sections may exist on the page–which brings us to your kindly proposed solution.

    So, for testing, I added “av-group-lightbox” to the Advanced > Developer Settings > Custom CSS Class field of the following images on my home page as specified below:

    • *Dog: av-group-lightbox
    • *Office Photo: av-group-lightbox
    • Color Section with text
    • *Middle-aged couple: av-group-lightbox
    • Empty Color Section
    • Woman holding dentures
    • *Beach couple: av-group-lightbox
    • *Pretzel couple: av-group-lightbox
    • Color Section with 3 rows 3 columns, with “av-group-lightbox” just in the first 2 images:
    •     – *A bunch of dentures: av-group-lightbox
          – *Oral surgery: av-group-lightbox
          – Implants denture
          – …the rest of the images in the grid-like Color Section

    • *Full size Oral surgery: av-group-lightbox

    RESULTS WITH “av-group-lightbox” (with either Open in Lightbox or Set Manually–it didn’t matter): There was no change compared to the WITHOUT case:

    • The following images opened up as singular: Dog, Office, Middle-aged couple
    • The following images opened connected together in the lightbox gallery: Woman holding dentures, Beach couple, Pretzel couple
    • All 3 images from my grid-like Color Section that I defined to Open in Lightbox did so connected together, including the Implant denture that I didn’t have “av-group-lightbox” on.

    ******
    TEST 4
    ******

    I also tested with “avia-image” instead of “av-group-lightbox”, since I read somewhere in Enfold documentation/support that for an image embedded in a text block (like my Beach couple), you set Link CSS Class = “avia-image” (without quotes).

    By the way, I searched through all Enfold parent files (using the Double Commander tool on my computer after downloading the entire Enfold folder to my computer on Jul 30, 2022), and found no “av-group-lightbox” string inside any files anywhere. Did things change perhaps since my download date? I also looked through the downloaded HTML (Developer’s Page Source), and there is basically no difference between the DOMs and classes for all images (except for the obvious stuff).

    Any ideas?

    Thanks,
    Gary

    • This reply was modified 12 months ago by garysch37.
    • This reply was modified 12 months ago by garysch37.
    • This reply was modified 12 months ago by garysch37.
    • This reply was modified 12 months ago by garysch37. Reason: All these edits were to get my reply to render properly (sorry)
    • This reply was modified 12 months ago by garysch37.
    • This reply was modified 12 months ago by garysch37.
    • This reply was modified 12 months ago by garysch37.
    • This reply was modified 12 months ago by garysch37.
    #1409566

    Hi,
    Thanks for sharing your findings, I found this stackoverflow thread and added the lightbox-added class as a trigger:

    (function($){
        var $imgs = [];
        $('img').each(function(idx) {
          var obj = {
            src: $(this).attr('src')
          }
          $imgs.push(obj);
          var elem = $(this);
          elem.click(function() {
            console.log('clicked on img', idx);
            $('.lightbox-added').magnificPopup('open', idx);
          });
        });
        console.log($imgs);
    
        $('.lightbox-added').magnificPopup({
          items: $imgs,
          type: 'image',
          gallery: {
            enabled: true
          },
        });
    })(jQuery);

    When I test it by injecting it via the browser to your page it lists 21 of your images on the page as an arrayin the console, see: console.log($imgs); so this is promising, but they are not passing to the lightbox via items: $imgs,
    Unfortunately here it says there is a bug in magnificPopup that prevent the index.
    Here is a link to the Magnific Popup Documentation if it is helpful, give the script a try and perhaps you will be able to open the image array.

    Best regards,
    Mike

    #1411336

    Thanks very much for your suggestion, Mike. It helped me look quite deeply into this issue using Chrome’s debugger. I want to first apologise to you for keeping things so complicated using my in-development home page, which is quite complicated, instead of creating a test page for this topic question–which is exactly what I did to debug this issue after your reply.

    It turns out that the stackoverflow suggestion doesn’t work. Their suggestion is to add itemOpts.index = index; before the mfp._openClick({mfpEl:items}, jqEl, itemOpts); line as follows:

    $.fn.magnificPopup = function(options) {
    	_checkInstance();
    
    	var jqEl = $(this);
    
    	// We call some API method of first param is a string
    	if (typeof options === "string" ) {
    
    		if(options === 'open') {
    			var items,
    				itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup,
    				index = parseInt(arguments[1], 10) || 0;
    
    			if(itemOpts.items) {
    				items = itemOpts.items[index];
    			} else {
    				items = jqEl;
    				if(itemOpts.delegate) {
    					items = items.find(itemOpts.delegate);
    				}
    				items = items.eq( index );
    			}
    			itemOpts.index = index;  // Added line per https://stackoverflow.com/questions/49131727/open-all-images-on-page-with-magnific-popup
    			mfp._openClick({mfpEl:items}, jqEl, itemOpts);
    		} else {
    			if(mfp.isOpen)
    				mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
    		}
    
    	} else {
    		// clone options obj
    		options = $.extend(true, {}, options);
    
    		/*
    		 * As Zepto doesn't support .data() method for objects
    		 * and it works only in normal browsers
    		 * we assign "options" object directly to the DOM element. FTW!
    		 */
    		if(_isJQ) {
    			jqEl.data('magnificPopup', options);
    		} else {
    			jqEl[0].magnificPopup = options;
    		}
    
    		mfp.addGroup(jqEl, options);
    
    	}
    	return jqEl;
    };

    The problem is that that bug fix never even gets to run because it’s encapsulated within the IF condition of typeof options === “string”, as you can see above. So if you look at BOTH:

    (1) us Enfold users:

    links.not(options.exclude).addClass('lightbox-added')
    .magnificPopup($.avia_utilities.av_popup);

    where $.avia_utilities.av_popup === {type: ‘image’, mainClass: ‘avia-popup mfp-zoom-in’, tLoading: ”, tClose: ”, removalDelay: 300, …}

    (2) and the Original Poster to that stackoverflow thread:

    $('#content').magnificPopup({
      items: $imgs,
      type: 'image',
      gallery: {
        enabled: true
      },
    });

    you can see that typeof options === “object”! So it wouldn’t work for either of us (the OP coincidentally was wanting to do the exact same thing as me, to “enable magnific popup on all images on my page”). Unfortunately, the OP never responded to the reply person’s bug fix suggestion, so the thread never went further in order to highlight the failure of the suggestion for the OP.

    After ruling out magnific’s code as the culprit of my problem, I focused on avia-snippet-lightbox.js and its code at the end of its function, $.fn.avia_activate_lightbox = function(variables):

    return this.each(function()
    {
        var container	= $(this),
            videos		= $(options.videoElements, this).not(options.exclude).addClass('mfp-iframe'), /*necessary class for the correct lightbox markup*/
            ajaxed		= ! container.is('body') && ! container.is('.ajax_slide');
            for( var i = 0; i < options.groups.length; i++ )
            {
                container.find(options.groups[i]).each(function()
                {
                    var links = $(options.autolinkElements, this);
    
                    if( ajaxed )
                    {
                        links.removeClass('lightbox-added');
                    }
    
                    links.not(options.exclude).addClass('lightbox-added').magnificPopup($.avia_utilities.av_popup);
                });
            }
    
    });

    Sure enough, this is the culprit. What’s happening in this code above is that:

    (1) the outer loop, controlled by the FOR loop, searches the <body> DOM for each class in the options object (.avia-slideshow, .avia-gallery, .av-horizontal-gallery, .av-instagram-pics, .portfolio-preview-page, .portfolio-preview-content, .isotope, .post-entry, .sidebar, #main, .main-menu, & .woocommerce-product-gallery); and if it finds the current options[i] in the <body> DOM, then:

    (2) the inner loop, controlled by “.each(function()”, looks for every instance of that options[i] in body and adds the images within that sub-DOM instance to the links object “array”. In other words, it creates multiple lightboxes per page–and, in fact, NOT JUST a separate one for each options[i] image set (from the outer loop), BUT ALSO a separate lightbox for each instance of options[i] as well.

    But I want a single lightbox for all linked images on a page, i.e. a single image set that is sent to magnific. Specifically, for me, options[7]===’.post-entry’ is not only found in outer 1/1, 1/2, etc. layout sections, in which I may put images, but also in Color Sections, in which I will definitely put images, perhaps in inner 1/1, 1/2, etc. layout sections within the Color Sections. It’s the Color Section that ends up separating out ‘.post-entry’ images from each other, creating multiple image sets sent to magnific for separate lightboxes (notice the <div class=’post-entry post-entry-type-page post-entry-31′> line):

    <div class='avia-section av-lib3uyi7-57ce06e0452ac92eb7d4393a8384e180 main_color avia-section-default avia-no-border-styling  avia-builder-el-62  el_after_av_section  el_before_av_section  mainPageBodyThreeCols avia-bg-style-scroll container_wrap fullsize'  >
        <div class='container av-section-cont-open' >
            <div class='template-page content  av-content-full alpha units'>
                <div class='post-entry post-entry-type-page post-entry-31'>
                    <div class='entry-content-wrapper clearfix'>
                        <div  class='flex_column av-i3z0f-243165cc077a80e50bbee8f020d21535 av_one_third  avia-builder-el-63  el_before_av_one_third  avia-builder-el-first  first flex_column_div  '     >
                            <div  class='avia-image-container av-lib47uf4-9660e94fab46a96b36ab619c8b679a09 av-styling- avia-align-center  avia-builder-el-64  el_before_av_textblock  avia-builder-el-first  av-group-lightbox'   itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject" >
                                <div class="avia-image-container-inner">
                                    <div class="avia-image-overlay-wrap">
                                        <a href="...dentures.jpg" class='avia_image' >
                                            <img decoding="async" class='wp-image-699 avia-img-lazy-loading-not-699 avia_image ' src="...dentures-300x264.jpg" alt='...'  height="264" width="300"  itemprop="thumbnailUrl" srcset="..." sizes="(max-width: 300px) 100vw, 300px" />
                                        </a>
                                    </div>
                                </div>
                            </div>...

    In other words, each .avia-section (Color Section) has its own class=’post-entry post-entry-type-page post-entry-31′, so the images under that DOM are collected as a separate image set for a lightbox.

    So I ended up just bypassing all of it, and replaced the code in avia-snippet-lightbox.js with my own child_avia-snippet-lightbox.js:

    return this.each(function()
    {
        //Find all linked images
        var myLinks = $(options.autolinkElements, this);
        
        //Note: ".not(options.exclude)" is left out of this "myLinks.not(options.exclude).addClass(..." on purpose to impose the policy: if you want to exclude an image from the all-images set in the lightbox, just don't make it a link. Linked images excluded from the lightbox means if the user clicks on that linked image, it will follow that link, which is to open it's full size image, but without the lightbox's closing mechanism. Then the only way for the user to go back to the page is to click the Back button--which is bad UX.
    
    	myLinks.addClass('lightbox-added').magnificPopup($.avia_utilities.av_popup);
    });

    And adding this to my child functions.php file:

    add_action('wp_enqueue_scripts', 'magnific_script_fix', 100);
    function magnific_script_fix()
    {
        wp_dequeue_script('avia-lightbox-activation');
        wp_enqueue_script('child_avia-lightbox-activation', get_stylesheet_directory_uri().'/child_avia-snippet-lightbox.js', array('jquery'));
    }

    Also, as you can see, I’ve left out “.not(options.exclude)” from myLinks.not(options.exclude).addClass(‘lightbox-added’).magnificPopup($.avia_utilities.av_popup) for the following reason: If I put it in, then, yes, the images with those exclusion classes will be excluded from the lightbox. But they are still linked images: so if a user clicks on one of them, it will follow that link, which is to open it’s full size image, but without the lightbox’s closing mechanism. So the only way for the user to go back to the page is to click the Back button–which is bad UX.

    FYI: I attempted to figure out a way to add each of those excluded images in its own individual one-image lightbox, but I just couldn’t even figure out how Enfold does the not(options.exclude), as a starting point (going step by step in the debugger to see how it’s doing it was a bewildering experience), so I just gave up. So I just gave myself the policy: if you want to exclude an image from the all-images set in the lightbox, just don’t make it a link. Lol. Yes, I could have left the .not(options.exclude) in there and just not used it per my policy, but I wanted to make sure the UX stays correct by preventing me (or anyone else maintaining the site) from having any effect to forgetting the policy and adding e.g. “noLightbox” to an image’s Custom CSS Class field, expecting it to be excluded from the lightbox, but still keeping the image’s link active. No: if I (or they) go into the code, they’ll see there is no .not(options.exclude) at all, and read the comment in the code, to see why their image is not getting excluded from the lightbox.

    So, anyway, that’s my solution to my particular problem. I appreciate your help, Mike. Unless you have some solution code for me to include those excluded images in their own individual one-image lightboxes (which would be helpful to just round up this solution, in case others want to use it), you may close this thread.

    Thanks very much,
    Gary

    • This reply was modified 11 months, 1 week ago by garysch37.
    #1411549

    Hi,
    Thank you for sharing your solution, I tested it on my demo site and it works good 🎉
    I’m sure future users will benefit from your work, do you want to leave this thread open and answer questions from future users, or do you want it closed?

    Best regards,
    Mike

    #1411588

    Thanks, Mike, for checking. Sure, we can keep this thread open for future users. Always happy to help others, a little bit like you do every day!

    Thanks and all the best,
    Gary.

    #1411621

    Hi,
    Thank you and have a great day.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.