Support » Plugin: Photoswipe Masonry Gallery » Thumbnails appear grayed out and do not work

  • Sculptorium

    (@jeffsculptoriumcom)


    I really like this gallery plugin and I really want to use it, but the problem is that about half the time a page loads the thumbnails are grayed out and clicking on one open a static page of that image. Sometimes nothing at all happens. I have tried turning off all plugins, but it keeps happening. I get the same behavior in Safari and Firefox and on my desktop iphone and ipad pro. I have rebuilt the thumbnails with the AJAX thumbnail rebuild tool. What is strange to me is that I can load the page and it may appear fine, and then after reloading without making any edits, the thumbnails will be grayed out. Any suggestions greatly appreciated.
    Thanks.

    https://wordpress.org/plugins/photoswipe-masonry/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Exactly the same problem here. Every time it happens I get a “Masonry is not defined” error in the js console.

    Although I suspect that won’t help us, it might help the plugin author if they’re not able to reproduce the error.

    Same using DIVI theme

    Sorry I still can’t reproduce this but I did change the way masonry is enqueued in a recent version to use the preloaded WP version of masonry. It sounds like it’s causing issues so I’ll go back to the old style! I’ll update it now.

    I can confirm the update fixed this issue for me, thank you.

    Yes, looks its working fine now, thanks

    Hi there having the same issue. As i remember everything was working fine while using WordPress 4.4.2 with Photoswipe Masonry Gallery 1.1.1.

    My thumbnails appear grayed out and link to the attachment page.

    JavaScript console shows the following error:
    Uncaught SyntaxError: Unexpected token ILLEGAL

    On this line of code:
    figureEl = thumbElements[i]; // <figure> element

    Using WordPress (4.4.2) with Photoswipe Masonry Gallery (1.1.2) on localhost (xampp) with a custom theme. Tested in current versions of Google Chrome, Firefox and Edge.

    Hi Tobias,

    I think this is a different issue. Are you seeing this in all browsers?

    ~Dean

    Hi Dean,

    yes in all browsers. I thought it may be connected to this issue, cause of the issue description (grayed out, not working, if image is clicked link to attachment page).

    Can I do anything to help you fix this error? Like disable plugins and test again etc.?

    You can try:

    To disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).

    Switch to the Twenty Fifteen theme to rule out any theme-specific problems

    [advanced] If it’s a theme issue you may have some scripts embedded in your theme. To disable these look inside the header.php, footer.php or from functions.php

    Hi Dean,

    I’ve disabled any plugins, but still got that error. When i switch the theme to Twenty Fifteen that error in the console is gone.

    However I don’t know what in my custom theme is causing that issue with your plugin. Cause even when i disable all my custom scripts i get this error.

    Btw I concatenate and comrpess all my JS and CSS into one single file and then load it with

    add_action(‘wp_enqueue_scripts’, ‘site_scripts’, 999);

    Btw. why is Photoswipe adding it’s CSS and JS inline instead of using the recommendet wp_enqueue_scripts? Maybe that causes some weird issues with jQuery etc. Cause I deregister the WordPress included jQuery and enqueue my own.

    I would like to test the previous version of your plugin, cause before I updated the plugin everything worked fine. Where can I download version 1.1.1?

    Also saw that the download link on the plugin page changes if you’re on another tab.

    Description Tab: https://downloads.wordpress.org/plugin/photoswipe-masonry.zip
    Reviews Tab: https://downloads.wordpress.org/plugin/photoswipe-masonry.latest-stable.zip

    Are those different?
    Tobias

    Plugin Author THRIVE – Web Design Gold Coast

    (@deanoakley)

    Hi Tobias.

    There is some inline to use the php settings in the css. I think that is the only way.

    Please email me and I can send you an older version contact@thriveweb.com.au

    tobiasmalikowski

    (@tobiasmalikowski)

    Update from me:
    Dean sent me an older version, tested it and got the same error.

    I disabled all plugins and switched to a default WordPress theme and everything works. After that i disabled all plugins and switched to my custom theme and the following error occurs:

    Uncaught SyntaxError: Unexpected token < (index.php line 613)

    That is the JavaScript which gets outputted inline by the plugin (note the figcaption and a tag at the last line, What are they doing there?):

    <script type='text/javascript'>
    
    			var container_1140_1 = document.querySelector('#photoswipe_gallery_1140_1');
    			var msnry; 
    
    			// initialize  after all images have loaded
    			imagesLoaded( container_1140_1, function() {
    
    						// initialize Masonry after all images have loaded
    						new Masonry( container_1140_1, {
    						  // options...
    						  itemSelector: '.msnry_item',
    						  //columnWidth: 220,
    						  isFitWidth: true
    						});
    
    						(container_1140_1).className += ' photoswipe_showme';
    
    				// PhotoSwipe
    				var initPhotoSwipeFromDOM = function(gallerySelector) {
    
    			    // parse slide data (url, title, size ...) from DOM elements
    			    // (children of gallerySelector)
    			    var parseThumbnailElements = function(el) {
    			        var thumbElements = el.childNodes,
    			            numNodes = thumbElements.length,
    			            items = [],
    			            figureEl,
    			            linkEl,
    			            size,
    			            item;
    
    			        for(var i = 0; i < numNodes; i++) {
    
    			            figureEl = thumbElements[i]; // <figure> element
    
    			            // include only element nodes
    			            if(figureEl.nodeType !== 1) {
    			                continue;
    			            }
    
    			            linkEl = figureEl.children[0]; // <a> element
    
    			            size = linkEl.getAttribute('data-size').split('x');
    
    			            // create slide object
    			            item = {
    			                src: linkEl.getAttribute('href'),
    			                w: parseInt(size[0], 10),
    			                h: parseInt(size[1], 10)
    			            };
    
    			            if(figureEl.children.length > 1) {
    			                // <figcaption> content
    			                item.title = figureEl.children[1].innerHTML;
    			            }
    
    			            if(linkEl.children.length > 0) {
    			                // <img /> thumbnail element, retrieving thumbnail url
    			                item.msrc = linkEl.children[0].getAttribute('src');
    			            } 
    
    			            item.el = figureEl; // save link to element for getThumbBoundsFn
    			            items.push(item);
    			        }
    
    			        return items;
    			    };
    
    			    // find nearest parent element
    			    var closest = function closest(el, fn) {
    			        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
    			    };
    
    			    // triggers when user clicks on thumbnail
    			    var onThumbnailsClick = function(e) {
    			        e = e || window.event;
    			        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    
    			        var eTarget = e.target || e.srcElement;
    
    			        // find root element of slide
    			        var clickedListItem = closest(eTarget, function(el) {
    			            return el.tagName === 'FIGURE';
    			        });
    
    			        if(!clickedListItem) {
    			            return;
    			        }
    
    			        // find index of clicked item by looping through all child nodes
    			        // alternatively, you may define index via data- attribute
    			        var clickedGallery = clickedListItem.parentNode,
    			            childNodes = clickedListItem.parentNode.childNodes,
    			            numChildNodes = childNodes.length,
    			            nodeIndex = 0,
    			            index;
    
    			        for (var i = 0; i < numChildNodes; i++) {
    			            if(childNodes[i].nodeType !== 1) {
    			                continue;
    			            }
    
    			            if(childNodes[i] === clickedListItem) {
    			                index = nodeIndex;
    			                break;
    			            }
    			            nodeIndex++;
    			        }
    
    			        if(index >= 0) {
    			            // open PhotoSwipe if valid index found
    			            openPhotoSwipe( index, clickedGallery );
    			        }
    			        return false;
    			    };
    
    			    // parse picture index and gallery index from URL (#&pid=1&gid=2)
    			    var photoswipeParseHash = function() {
    
    			        var hash = window.location.hash.substring(1),
    			        params = {};
    
    			        if(hash.length < 5) {
    			            return params;
    			        }
    
    			        var vars = hash.split('&');
    			        for (var i = 0; i < vars.length; i++) {
    			            if(!vars[i]) {
    			                continue;
    			            }
    			            var pair = vars[i].split('=');
    			            if(pair.length < 2) {
    			                continue;
    			            }
    			            params[pair[0]] = pair[1];
    			        }
    
    			        if(params.gid) {
    			            params.gid = parseInt(params.gid, 10);
    			        }
    
    			        if(!params.hasOwnProperty('pid')) {
    			            return params;
    			        }
    			        params.pid = parseInt(params.pid, 10);
    
    			        return params;
    			    };
    
    			    var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
    			        var pswpElement = document.querySelectorAll('.pswp')[0],
    			            gallery,
    			            options,
    			            items;
    
    			        items = parseThumbnailElements(galleryElement);
    
    			        // define options (if needed)
    			        options = {
    			            index: index,
    
    			            // define gallery index (for URL)
    			            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
    
    			            getThumbBoundsFn: function(index) {
    			                // See Options -> getThumbBoundsFn section of documentation for more info
    			                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
    			                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
    			                    rect = thumbnail.getBoundingClientRect(); 
    
    			                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    			            }
    
    			        };
    
    			        if(disableAnimation) {
    			            options.showAnimationDuration = 0;
    			        }
    
    			        // Pass data to PhotoSwipe and initialize it
    			        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    			        gallery.init();
    			    };
    
    			    // loop through all gallery elements and bind events
    			    var galleryElements = document.querySelectorAll( gallerySelector );
    
    			    for(var i = 0, l = galleryElements.length; i < l; i++) {
    			        galleryElements[i].setAttribute('data-pswp-uid', i+1);
    			        galleryElements[i].onclick = onThumbnailsClick;
    			    }
    
    			    // Parse URL and open gallery if it contains #&pid=3&gid=1
    			    var hashData = photoswipeParseHash();
    			    if(hashData.pid > 0 && hashData.gid > 0) {
    			        openPhotoSwipe( hashData.pid - 1 ,  galleryElements[ hashData.gid - 1 ], true );
    			    }
    			};
    
    			// execute above function
    			initPhotoSwipeFromDOM('.photoswipe_gallery');
    
    		});
    
    	</figcaption></a></script>

    I think the error is caused by this figcaption and a tag in the script tag. I don’t know how they get there, I think they are not supposed to…

    In the plugin php file (photoswipe-masonry.php) the output of this part starts at line 392 and ends at line 617. There is no figcaption or a tag. So how do they get there?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Thumbnails appear grayed out and do not work’ is closed to new replies.