輕鬆整合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的方法

回答

相關問題