Support » Plugin: jQuery Masonry Image Gallery » no preview in editor mode for elementor page builder

  • Resolved dasigna

    (@dasigna)


    great plugin so far – easy extension for native wp gallery.

    but i am encountering some issue when using with elementor page builder:
    there is no preview at all when working in elementor as mentioned here.

    any idea whats happening?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author phoenixMagoo

    (@phoenixmagoo)

    The Masonry jQuery would have to layout/relayout every time a gallery is made in a backend editor. It’s possible for developers to hook into it so it does this in editors. Honestly, it’s one of those features I would love to work on but just have the time. My main concern and what I really have time for is keeping the front end working well.

    However, here is the documentation directly from the Masonry site that explains the process if you are intrested in tackling this yourself.

    Regards

    Thread Starter dasigna

    (@dasigna)

    hmmm …thanks for your answer, but i doubt if that really hits the case.

    in fact, there is antother thing that may be affected on the masonry script, because the galleries wont render already as masonry in elementor…

    but the thing why nothing at all is displayed in the place the gallery is included seems to come from the ‘jmig-masonry-v3-animation.css’-file!
    that is the part where the gal should fade in once loaded. but nothing fades in!
    the pics are there, and when overriding the ‘opacity: 0’ rule in inspector, the pics show up! (no masonry, but they are there).

    how do i manage to make the gallery show up even if not rendered in masonry??

    and sorry – i am definitely not an developer with the ability to fiddle out those things in detail. i am only a designer with some basic coding skills … 🙂

    so ANY help on that would be highly appreciated!

    // its not mainly an issue for me when building up a page – but its a pita for editors when trying to edit something and not seeing what to edit at all. //

    ???

    The issue was masonry-init-v3.js. The js fires too early when using Elementor. When I wrapped the code in a delay it works just fine.

    So for now, in your functions.php you can override the js with your own version like this:

    add_action('wp_enqueue_scripts', 'override_masonry_gallery_script', 11);
    function override_masonry_gallery_script(){
        wp_dequeue_script('masonryInit');
        wp_enqueue_script('masonryFix', get_stylesheet_directory_uri() . '/css/masonry-init-v3.js, array('masonry'));
    }

    This should remove the plugin’s version and load your own file with identical name in your theme’s /css directory.

    The script needs to be wrapped in a conditional waiting for all page content to load, then we apply a half second delay to execute finding .gallery elements in the DOM.

    //wait for all DOM elements to load
    window.onload = function() {
        
        setTimeout(function(){
            var galleries = document.querySelectorAll('.gallery');
            for (var i = 0, len = galleries.length; i < len; i++) {
                var gallery = galleries[i];
                initMasonry(gallery);
            }
            function initMasonry(container) {
                var imgLoad = imagesLoaded(container, function () {
                    new Masonry(container, {
                        itemSelector: '.gallery-item',
                        columnWidth: '.gallery-item',
                        isFitWidth: true
                    });
                    container.className += " jmig-gallery-loaded";
                });
            }
            
        }, 500);
    };

    Note: I should also add that this only works on the initial page load. So after you add the shortcode in Elementor, reload the Elementor editor and you should see it render just fine. It just doesn’t re-render when Elementor dynamically executes the shortcode again. We need to figure out how to reload the masonry after new DOM elements are added

    • This reply was modified 7 years, 4 months ago by pingram.
    • This reply was modified 7 years, 4 months ago by pingram.
    • This reply was modified 7 years, 4 months ago by pingram.

    Here is a crude little script that patches the one above to allow for re-rendering of the masonry js with an additional 2 second delay after any click events on the Elementor preview window.

    Without a proper handler, this again is a crude way to achieve rendering of the masonry grid even after ajax from the parent updates the DOM. With the added class “elementor-editor-active” we make sure this only occurs when using the Elementor editor.

    (function($){
        
        function initMasonry(container) {
            var imgLoad = imagesLoaded(container, function () {
                new Masonry(container, {
                    itemSelector: '.gallery-item',
                    columnWidth: '.gallery-item',
                    isFitWidth: true
                });
                container.className += " jmig-gallery-loaded";
            });
        }
        
        function loadMasonry(){
            var galleries = $('.gallery');
            for (var i = 0, len = galleries.length; i < len; i++) {
                var gallery = galleries[i];
                initMasonry(gallery);
            }    
        }
        
        function exeMasonry(script, delay){
            setTimeout(function(){
                script();
            }, delay);
        }
        
        $(document).on('ready', function(){
            exeMasonry(loadMasonry, 500);
            
            $('body.elementor-editor-active').on('click', function(){
                    exeMasonry(loadMasonry, 2000);
            });
            
        });
        
    })(jQuery);
    Thread Starter dasigna

    (@dasigna)

    @pingram3541 – THANKS!!

    crude or not, tried it a minute before and it works!
    there’s only one little ” ‘ ” missing after “/css/masonry-init-v3.js” in your functions.php-code. (drove me nearly crazy for some minutes by getting a parsing error)

    so this is a acceptable solution as far as i am concerned until there might be some better one – content can be seen, renders as it should – and: editors are happy! 🙂

    BIG, BIG thanks for this again!

    • This reply was modified 7 years, 4 months ago by dasigna.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘no preview in editor mode for elementor page builder’ is closed to new replies.