轻松整合PhotoSwipe的方法

我最近在寻找一款智能响应式美丽的灯箱叉。我发现很多，最容易整合和好看。但我认为我一直爱上PhotoSwipe < 3.问题是：当然是 - 唯一的灯箱替代品，整合不是小菜一碟。轻松整合PhotoSwipe的方法

这意味着它不仅仅包括一些.js和.css文件，而是要编写自己的DOM解析器。如果你想以写HTML代码的方式创意，那很好，但我只想展示一个画廊 - 这不是你必须受到灵感启发的地方。

长话短说：有没有人知道一个项目或叉易于整合PhotoSwipe？

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

2016-01-13 Alex

你是什么意思？他们在这里有你需要的所有文档：http://photoswipe.com/documentation/getting-started.html – odedta

http://codepen.io/dimsemenov/pen/ZYbPJM/试试这个 –

这也是我找到的文档，并且它很像“您可能会问，为什么PhotoSwipe不会通过JS自动添加此代码，原因很简单 - 只是为了节省文件大小，以防您需要修改布局。” - 我不需要修改布局，并问自己是否有人分叉PhotoSwipe正在做什么文档说，它不会做：通过js注入或类似的添加必要的代码:) – Alex

以下是使其运行所需的最低代码，我认为。我从Using PhotoSwipe with jQuery获得了主要代码，稍作修改。另外，我从文档中添加了一个函数，当您单击缩略图时启用缩放效果，因为我认为这是PhotoSwipe必要的酷炫功能的一部分。它假定您的缩略图位于具有“缩略图”类（第1行）的容器中，并且它假定缩略图容器内部是简单的标签（第5行和第23行）。它也没有动态加载PhotoSwipe HTML，我只是把它粘贴在我的页面底部。我将最终将其作为PHP代码片段加入。我相信，通过更多的工作，这些代码可以合并到主PhotoSwipe js中，并且可以使用简单的$('.my-gallery').photoswipe({options})这样的简单工具进行投资。那样就好了。

哦，另外，为了让它工作，您需要包含这里的photoswipe.css和“default-skin”文件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(); 
     }) 
    })

来源

2016-03-04 19:18:44 Moss

-2

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

来源

2016-03-04 12:54:45

轻松整合PhotoSwipe的方法

回答

相关问题