javascriptjquerycsslightboxphotoswipe

Way for easy integration of PhotoSwipe


I was recently looking for a smart responsive beautiful lightbox fork. I found a lot, the most easy to integrate and good looking. But I think I've been falling in love with PhotoSwipe <3. Problem is: it's - of course - the only lightbox alternative whos integration is not a piece of cake.

Meaning it's not just including some .js and .css files but to write your own DOM parser. That's fine if you want to be creative in the way writing HTML code but I just want to display a gallery - that's not where you have to be inspired by the muses.

Long story short: Does anybody know a project or fork for easy integration of PhotoSwipe?

PS: The website's already using JQuery and I'm willing to adjust my HTML code as needed.


Solution

  • Here is the minimum code necessary to get it running, I think. I got the main code, slightly modified, from Using PhotoSwipe with jQuery. Plus I added a function from the documentation to enable the zooming effect when you click on a thumbnail, since I figured that is part of the necessary coolness of PhotoSwipe. It assumes your thumbnails are in a container with a class of "thumbnail" (line 1), and it assumes that inside the thumbnail container are simple a tags (line 5 and 23). It also does nothing to dynamically load the PhotoSwipe HTML, I just pasted it at the bottom of my page. I will ultimately include it as a PHP snippet. I am sure that with a bit more work this code could be incorporated into the main PhotoSwipe js and it could be intitalized with something as simple as $('.my-gallery').photoswipe({options}). That would be nice.

    Oh, additionally, to get it working at all you will need to include the photoswipe.css and "default-skin" files from here https://github.com/dimsemenov/PhotoSwipe/tree/master/dist.

    $('.thumbnails').each( function() {
            var $pic     = $(this),
                getItems = function() {
                    var items = [];
                    $pic.find('a').each(function() {
                        var $href   = $(this).attr('href'),
                            $size   = $(this).data('size').split('x'),
                            $width  = $size[0],
                            $height = $size[1];
    
                        var item = {
                            src : $href,
                            w   : $width,
                            h   : $height
                        }
    
                        items.push(item);
                    });
                    return items;
                }
    
            var items = getItems();
            var $pswp = $('.pswp')[0];
            $pic.on('click','a',function(event) {
                event.preventDefault();
    
                var $index = $(this).index();
                var thumbnail = $(this)[0]
                var options = {
                    index: $index,
                    bgOpacity: 0.7,
                    showHideOpacity: true,
                    getThumbBoundsFn: function(index) {
    
                        // get window scroll Y
                        var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
                        // optionally get horizontal scroll
    
                        // get position of element relative to viewport
                        var rect = thumbnail.getBoundingClientRect();
    
                        // w = width
                        return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
    
                    }
                }
    
                // Initialize PhotoSwipe
                var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
                lightBox.init();
            })
        })