4

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.

Alex
  • 789
  • 1
  • 12
  • 29
  • 1
    What do you mean? they have all the documentation you need here: http://photoswipe.com/documentation/getting-started.html – odedta Jan 13 '16 at 07:12
  • http://codepen.io/dimsemenov/pen/ZYbPJM/ try this – Gautam Jha Jan 13 '16 at 07:16
  • 1
    That's the documentation I found, too, and it says a lot like "You might ask, why PhotoSwipe doesn't add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout." - I don't need modification of layout and was asking myself if somebody forked PhotoSwipe doing exactly what the documentation says it won't do: adding necessary code via js injection or similar :) – Alex Jan 13 '16 at 08:33

2 Answers2

2

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();
        })
    })
Moss
  • 3,695
  • 6
  • 40
  • 60
  • Your code is the exact copy of an example by Thoriq Firdaus (but you did not gave credit to him) [from here](https://webdesign.tutsplus.com/tutorials/the-perfect-lightbox-using-photoswipe-with-jquery--cms-23587) with a slight modification. However your code as well as the original PhotoSwipe does require 1 important piece of information to be provided before the integration - the size of images. The benefit of other galleries, such as PrettyPhoto is that you don't have to know the sizes, but here you have to include them. Would be nice if the size can be detected automatically. – Jack Watts Jan 22 '20 at 07:41
  • I gave the link in my answer saying where I got the code from, so... – Moss Feb 16 '20 at 01:16
-2

You can use my jAlbum PhotoSwipe skin, see http://jalbum.net/nl/skins/skin/PhotoSwipe This requires no coding at all, the result can be embedded in a webpage. For an example, see the sample album: http://andrewolff.jalbum.net/Reestdal_PS/

André Wolff
  • 41
  • 9