Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 25, 2024 at 1:51 pm #1467806
    JaimBateman

    Hi,
    I have a weird issue on a modification that I implemented on a website. I wanted to include the captions in the lightboxes for a masonry gallery ; I found a thread here that gave a solution that works :

    Add caption in lightbox under image in masonry gallery

    But ! It only works if I empty the navigator’s cache and only the first time I visit the page. If I reload the page, or go on another page and then come back, the modification doesn’t work anymore. Any idea why ?

    Here is the slitghly adapted code, lifted from Guenni007 :

    function popup_masonry_gallery() { 
if(is_singular('regard-associe')) {
?>
<script type="text/javascript">
(function($){
$(window).load(function(){  
    $('a.av-masonry-entry.lightbox-added').magnificPopup({
    type: 'image',
		image: {
        titleSrc: false,
        markup: '<div class="mfp-figure">'+
                  '<div class="mfp-close"></div>'+
                  '<div class="mfp-img"></div>'+
                  '<div class="mfp-bottom-bar">'+
                    '<div class="mfp-title"></div>'+
                    '<div class="mfp-counter"></div>'+
                  '</div>'+
                '</div>',
    },
    mainClass:          'avia-popup mfp-zoom-in mfp-image-loaded',
    closeOnContentClick:  false,
    midClick:         true,

    gallery: {
      enabled:      true
    },

    callbacks: {
		markupParse: function (template, values, item) {
			values.title = '<span class="jmmfp-title"><strong>' + item.el.find('img').attr('title') + '</strong></span><br>' + item.el.closest('.av-masonry-entry').find('.av-masonry-entry-content').text();
		},

    },
  }); 
  // close the iframe window
  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }}
add_action('wp_footer', 'popup_masonry_gallery');

    Any idea why that is ?

    Thanks !

    September 25, 2024 at 2:29 pm #1467808
    JaimBateman

    Would trying to tie the script to avia-defaut change that ?
    Using something like 

        if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', '

    ?

    September 25, 2024 at 4:24 pm #1467815
    Guenni007

    by the way – that might be an older post of mine.
    since jQuery 3 

    $(window).load(function(){

    is deprecated

    now you had to use:

    $(window).on('load', function(){
    September 25, 2024 at 4:30 pm #1467816
    JaimBateman

    Hi Guenni,

    It is ! That’s why I mentionned you in the first post. I often stumble on your posts when I come to find ways to customize Enfold… Your tips and tricks have been very useful for several years now!
    Thanks for the tip, by the way. I corrected that. Sadly, it doesn’t solve the problem I mentionned (the script doesn’t seem to load on page reload or revisit without clearing the browser cache) – problem which, if you still take care of the website mentionned in that old thread (https://webers-testseite.de/lightboxes/), affects it too…

    September 25, 2024 at 10:49 pm #1467835
    Guenni007

    I would have to look up what has changed since then (almost 5 years ago). Unfortunately, this test page of mine is so bloated with tests for other participants in this forum that some code snippets may be interfering with others. The functions.php of the child themes is already 3750 lines long.

    September 26, 2024 at 5:30 am #1467842
    Ismael

    Hi,

    Thank you for the update.

    The script seems to be working even when we reload the page or redirect to another. If you want to convert the modification and use wp_add_inline_script, please try this code:

    function av_popup_masonry_gallery() {
    if (is_singular('regard-associe')) {
        $script = "
        (function($){
        $(window).load(function(){  
            $('a.av-masonry-entry.lightbox-added').magnificPopup({
            type: 'image',
            image: {
                titleSrc: false,
                markup: '<div class=\"mfp-figure\">'+
                          '<div class=\"mfp-close\"></div>'+
                          '<div class=\"mfp-img\"></div>'+
                          '<div class=\"mfp-bottom-bar\">'+
                            '<div class=\"mfp-title\"></div>'+
                            '<div class=\"mfp-counter\"></div>'+
                          '</div>'+
                        '</div>',
            },
            mainClass:          'avia-popup mfp-zoom-in mfp-image-loaded',
            closeOnContentClick:  false,
            midClick:         true,

            gallery: {
              enabled:      true
            },

            callbacks: {
                markupParse: function (template, values, item) {
                    values.title = '<span class=\"jmmfp-title\"><strong>' + item.el.find('img').attr('title') + '</strong></span><br>' + item.el.closest('.av-masonry-entry').find('.av-masonry-entry-content').text();
                },
            },
          }); 
          // close the iframe window
          $(document).on('click', '.popup-modal-dismiss', function (e) { 
            $.magnificPopup.close();
          });
        });
        })(jQuery);
        ";

        wp_add_inline_script('avia-default', $script);
    }
}
add_action('wp_enqueue_scripts', 'av_popup_masonry_gallery');

    Best regards,
    Ismael

    September 26, 2024 at 8:01 am #1467853
    JaimBateman

    Well, I feel silly – you’re right, it works when I stop using Private Mode on my browser… Interesting though that the rest of the theme and customization works but not this particular addition. I would have to try to look into that sometime…

    Sorry for that, and thanks !

    September 26, 2024 at 8:27 am #1467856
    Guenni007

    but remember: https://kriesi.at/support/topic/adding-captions-to-the-lightboxes-in-a-masonry/#post-1467815

    I think it has to do with the elements not loading until you have scrolled through the masonry position due to the delayed animation. On my site, sometimes this works – sometimes it doesn’t.

    Using the ‘Load More’ button even cancels this out completely after pressing Load More.

    September 26, 2024 at 8:37 am #1467857
    JaimBateman

    Thanks Guenni007, I’ve already implemented that particular change.

    I guess we can close the thread now :)

    September 26, 2024 at 9:03 am #1467859
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Thanks @guenni007 for helping out :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Adding captions to the lightboxes in a masonry’ is closed to new replies.