PhotoSwipe and Joomla Gavick Template

[genesisfan]

I’m trying to implement PhotoSwipe into my Joomla Gavick template. Gavick did implement PhotoSwipe to their latest Quark template, here: https://demo.gavick.com/joomla3/quark/gallery

I'm using another Gavick template and thus is must be modified for PhotoSwipe. This is what I’ve done already, but PhotoSwipe is not working? See http://bit.ly/1y8yBQX (scroll a little bit down)

The PhotoSwipe core JS file (photoswipe.min.js) and UI JS file (photoswipe-ui.min.js) are located in the head.php file and are loaded.

$this->API->addJS($this->API->URLtemplate() . '/js/photoswipe.min.js');
$this->API->addJS($this->API->URLtemplate() . '/js/photoswipe-ui.min.js');

The PhotoSwipe(.pswp) element to DOM are added to footer.php file and this javascript is also loaded.

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>

                <div class="pswp__preloader"></div>

                <button class="pswp__button pswp__button--fs" title="<?php echo JText::_('TPL_GK_LANG_PHOTOSWIPE_TOGGLE_FULLSCREEN'); ?>"></button>
                <button class="pswp__button pswp__button--zoom" title="<?php echo JText::_('TPL_GK_LANG_PHOTOSWIPE_ZOOM'); ?>"></button>
                <button class="pswp__button pswp__button--share" title="<?php echo JText::_('TPL_GK_LANG_PHOTOSWIPE_SHARE'); ?>"></button>
                <button class="pswp__button pswp__button--close" title="<?php echo JText::_('TPL_GK_LANG_PHOTOSWIPE_CLOSE'); ?>"></button>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="<?php echo JText::_('TPL_GK_LANG_PHOTOSWIPE_PREV'); ?>"></button>
            <button class="pswp__button pswp__button--arrow--right" title="<?php echo JText::_('TPL_GK_LANG_PHOTOSWIPE_NEXT'); ?>"></button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

An array of slides is defined into gk.scripts.js which is loaded. I've all checked by Firebug.

    var initPhotoSwipeFromDOM = function(gallerySelector) {
        // parse slide data (url, title, size ...) from DOM elements 
        // (children of gallerySelector)
        var parseThumbnailElements = function(el) {
            var thumbElements = jQuery(el).find('a'),
                numNodes = thumbElements.length,
                items = [],
                figureEl,
                linkEl,
                size,
                item;

            thumbElements.each(function(i, link) {
                link = jQuery(link);
                size = link.attr('data-size').split('x');

                // create slide object
                item = {
                    src: link.attr('href'),
                    w: parseInt(size[0], 10),
                    h: parseInt(size[1], 10)
                };

                if(link.attr('data-title') || link.attr('data-desc')) {
                    item.title = '';

                    if(link.attr('data-title')) {
                        item.title += '<h3>' + link.attr('data-title') + '</h3>';
                    }

                    if(link.attr('data-desc')) {
                        item.title += '<span>' + link.attr('data-desc') + '</span>';
                    }
                }

                item.msrc = link.find('img').first().attr('src');
                item.el = link; // save link to element for getThumbBoundsFn
                // Detect the data-order attribute
                if(link.attr('data-order')) {
                    items[parseInt(link.attr('data-order'), 10) - 1] = item;
                } else {
                    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.preventDefault(); 
            // find root element of slide
            var clickedListItem = closest(e.target, function(el) {
                return (el.tagName && el.tagName.toUpperCase() === 'A');
            });

            if(!clickedListItem) {
                return;
            }

            // find index of clicked item by looping through all child nodes
            // alternatively, you may define index via data- attribute
            var clickedGallery = jQuery(clickedListItem).parents('.gk-gallery'),
                childNodes = clickedGallery.find('a'),
                numChildNodes = childNodes.length,
                nodeIndex = 0,
                index;

            for (var i = 0; i < numChildNodes; i++) {
                if(childNodes[i] === clickedListItem) {
                    index = nodeIndex;
                    break;
                }
                nodeIndex++;
            }

            if(clickedListItem.hasAttribute('data-order')) {
                index = parseInt(clickedListItem.getAttribute('data-order'), 10) - 1;
            }

            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: jQuery(galleryElement).attr('data-pswp-uid'),

                getThumbBoundsFn: function(index) {
                    // See Options -> getThumbBoundsFn section of documentation for more info
                    var thumbnail = items[index].el.find('img').first(), // find thumbnail
                        rect = {
                            "left": thumbnail.offset().left, 
                            "top": thumbnail.offset().top,
                            "width": thumbnail.outerWidth()
                        }; 
                    return {x:rect.left, y:rect.top, 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 = jQuery(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 if the gallery elements exists
    if(jQuery('.gk-gallery').length) {
        initPhotoSwipeFromDOM(jQuery('.gk-gallery'));
    }

The Custom HTML looks like this:
In the below code the structure of the gk-cols is different due adding additional CSS class gk-gallery. This is necessary for the PhotoSwipe script.

<div class="gkPage">
<div class="gk-cols gk-gallery" data-cols="3">
<div><a href="images/demo/gallery/image1.jpg" data-order="1" data-size="1280x1280" data-title="Modern clock" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="images/demo/gallery/thumb1.jpg" alt="Thumbnail I" width="334" height="334" /></a> <a href="images/demo/gallery/image2.jpg" data-order="4" data-size="1280x853" data-title="Painting love" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="images/demo/gallery/thumb2.jpg" alt="Thumbnail II" width="335" height="224" /></a> <a href="images/demo/gallery/image3.jpg" data-order="7" data-size="1164x872" data-title="Green Barrel" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="images/demo/gallery/thumb3.jpg" alt="Thumbnail III" width="335" height="251" /></a></div>
</div>
</div>

Thank You!

[dimsemenov]

Sorry, I can't assist with such issues. Isolate the gallery as much as you can and you'll find what's wrong.

The first mistake that I see is that this line is wrong:

var galleryElements = jQuery(gallerySelector);

        for(var i = 0, l = galleryElements.length; i < l; i++) {
            galleryElements[i].setAttribute('data-pswp-uid', i+1);
            galleryElements[i].onclick = onThumbnailsClick;
        }

jQuery(gallerySelector) is a jQuery element, not a native DOM element, setAttribute and onclick won't work on it properly.

[genesisfan]

Hi, the gallery is part of the gk.scripts.js file.

I've upload the gk.scripts.js file from the Quark template (which include PhotoSwipe) to my website. And now PhotoSwipe is working.
The only thing is that the gk.scripts.js is template dependent. So some things won't work I only need the PhotoSwipe scripting.

When I copy/paste the PhotoSwipe part of the Quark gk.scripts.js file to my template gk.scripts.js this file is not loaded.
With Firebug I can see that there is an error.

SyntaxError: expected expression, got '}'
gk.scripts.js (line 451)

Can you check what's wrong with gk.scripts.js-mytemplate?

gk.scripts.js-quark: https://www.dropbox.com/s/nbnk0ygy5fin9v3/gk.scripts-quark.js?dl=0
gk.scripts.js-mytemplate: https://www.dropbox.com/s/5krms4quecl4gg7/gk.scripts-mytemplate.js?dl=0

Thanks!