轻松集成 PhotoSwipe 的方法

Question

我最近在寻找一个智能响应漂亮的灯箱叉子。找了很多，最容易集成又好看的。但我想我已经爱上了 PhotoSwipe <3。问题是：它 - 当然 - 唯一集成不是小菜一碟的灯箱替代品。

意思是它不只是包括一些 .js 和 .css 文件，而是编写您自己的 DOM 解析器。如果您想以编写 HTML 代码的方式发挥创意，那很好，但我只想展示一个画廊 - 这不是您必须从灵感中获得灵感的地方。

长话短说：有人知道可以轻松集成 PhotoSwipe 的项目或分支吗？

PS：该网站已经在使用 JQuery，我愿意根据需要调整我的 HTML 代码。

Answer 1

您可以使用我的 jAlbum PhotoSwipe 皮肤，请参阅 http://jalbum.net/nl/skins/skin/PhotoSwipe 这根本不需要编码，结果可以嵌入到网页中。例如，请参阅示例相册：http://andrewolff.jalbum.net/Reestdal_PS/

Answer 2

我认为这是获取它所需的最少代码运行。我从 Using PhotoSwipe with jQuery 获得了主要代码，稍作修改。另外，我从文档中添加了一个功能，可以在您单击缩略图时启用缩放效果，因为我认为这是 PhotoSwipe 必备的酷炫功能的一部分。它假设您的缩略图位于 class 为 "thumbnail" 的容器中（第 1 行），并且假设缩略图容器内部是简单的标签（第 5 行和第 23 行）。它也不会动态加载 PhotoSwipe HTML，我只是将其粘贴在页面底部。我最终会将其作为 PHP 片段包含在内。我确信通过更多的工作，这段代码可以合并到主要的 PhotoSwipe js 中，并且可以用像 $('.my-gallery').photoswipe({options}) 这样简单的东西来初始化。那就太好了。

哦，此外，要使其完全正常工作，您需要从此处 https://github.com/dimsemenov/PhotoSwipe/tree/master/dist.

包含 photoswipe.css 和 "default-skin" 文件

$('.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();
        })
    })

轻松集成 PhotoSwipe 的方法

Way for easy integration of PhotoSwipe

javascript

jquery

css

lightbox

photoswipe