PhotoSwipe使用圖像打開圖庫

我正在尋找解決方案，打開PhotoSwipe圖庫， img鏈接。所以有一個圖庫圖標的IMG。我想如果用戶點擊它，畫廊打開。PhotoSwipe使用圖像打開圖庫

有人知道我該如何處理這件事？

我發現了這一點。但是這會打開加載畫廊。

<script type="text/javascript"> 
     (function(window, PhotoSwipe){ 

      document.addEventListener('DOMContentLoaded', function(){ 

       var 
        options = { 
         preventHide: true 
        }, 
        instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 

        instance.show(0); 

      }, false); 


     }(window, window.Code.PhotoSwipe)); 

</script>

最佳regargs

來源

2013-03-19 user1551496

您正在尋找一個龐大的系統。不只是JavaScript。你將需要PHP來保存所有圖像的記錄，並且它是這樣的細節。提供我明白你的意思。否則使用屬性的圖像細節等，並建立一個onclick事件來顯示這些屬性等 – sourRaspberri 2013-03-19 10:23:47

你有沒有嘗試過自己呢？ – 2013-03-19 10:24:08

是的。發佈代碼 – user1551496 2013-03-19 10:25:26

我剛開始工作photoSwipe所以我不積極，這將工作，但在我看來，你只需要調用instance.show(0)上的click事件。

假設我在網頁上有該元素：<a id="launch-gallery" href="#">Click to launch gallery</a>我可以添加這個jQuery的單擊事件啓動畫廊：

$('#launch-gallery').click(function(evt){ 
    evt.preventDefault(); // prevent regular click action 
    instance.show(0);  // Make sure 'instance' variable is available to this function 
});

如果你不使用jQuery，你可以做同樣的事情在本地JavaScript（但更詳細一點）。

我希望這會有所幫助。

來源

2013-03-20 23:25:52 generalchaos

請注意，我使用php（ajax）來傳遞圖像位置和大小，所以您仍然必須自己定義json數據。這就是我如何與做的jQuery的：

$('.element').off(); //in case it's a dynamically changing element 
$('.element').on("click tap", function() { 
var dataForPhpScript = $(this).parents('.gallery').attr("data-attr"); //data for php script 

    $.getJSON('urlToPHPFunction?dataID=' + dataForPhpScript, function (json) { 
     openPhotoSwipe(json); 
    }); 
    });

這裏是photoswipe開啓功能：

function openPhotoSwipe(jsonData) { 
    var pswpElement = document.querySelectorAll('.pswp')[0]; 

    // define options (if needed) 
    var options = { 
    // history & focus options are disabled on CodePen 
    history: false, 
    focus: false, 

    showAnimationDuration: 0, 
    hideAnimationDuration: 0 

    }; 

    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, jsonData, options); 
    gallery.init(); 
}

注意jsonData應該有點像這樣：

[ 
{ 
    src: 'https://placekitten.com/600/400', 
    w: 600, 
    h: 400 
}, 
{ 
    src: 'https://placekitten.com/1200/900', 


     w: 1200, 
     h: 900 
    } 
];

我意識到這個答案已經晚了，但是因爲這個在j上面，我用google搜索了一些完全不同的東西（但與photoswipe有關），我想這可能會有用！

來源

2016-04-08 03:28:03 NoobishPro

PhotoSwipe使用圖像打開圖庫

回答

相關問題