Question

我最近正在寻找一款智能响应漂亮的灯箱叉。我找到了很多，最容易整合和好看的。但我想我已经爱上了PhotoSwipe＆lt; 3。问题是：它是 - 当然 - 唯一的灯箱替代品，整合不是小菜一碟。

这意味着它不只是包含一些.js和.css文件，而是编写自己的DOM解析器。如果你想在编写HTML代码的方式上有创意，那就没关系，但我只是想展示一个画廊 - 这不是你必须受到缪斯的启发。

长话短说：有人知道一个项目或分支，以便轻松整合PhotoSwipe吗？

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

Answer 1

我认为这是让它运行所需的最少代码。我从Using PhotoSwipe with jQuery获得了稍加修改的主要代码。另外，我在文档中添加了一个功能，以便在您点击缩略图时启用缩放效果，因为我认为这是PhotoSwipe必要的酷炫的一部分。它假设您的缩略图位于具有“缩略图”类（第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();
        })
    })

Answer 2

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

轻松集成PhotoSwipe的方法

2 个答案: