jquery - 通过简单的链接启动 Photoswipe 画廊

Question

我使用 photoswipe 插件：

(function(window, PhotoSwipe){
    document.addEventListener('DOMContentLoaded', function() {
        var options = {
            preventHide: true,
            getImageSource: function(obj) {
                return obj.url;
            },
            getImageCaption: function(obj) {
                return obj.caption;
            }
        },
        instance = PhotoSwipe.attach([
            { url: 'http://www.site.com/img/8896/ico5.jpg', caption: 'Image 001' },
            { url: 'http://www.site.com/img/8897/ico5.jpg', caption: 'Image 002' },
            { url: 'http://www.site.com/img/8898/ico5.jpg', caption: 'Image 003' },
            { url: 'http://www.site.com/img/8899/ico5.jpg', caption: 'Image 004' },
            { url: 'http://www.site.com/img/9000/ico5.jpg', caption: 'Image 005' },
            { url: 'http://www.site.com/img/9001/ico5.jpg', caption: 'Image 006' }
        ], options);

        instance.show(0);
    }, false);
}(window, window.Code.PhotoSwipe));

我想从我页面中的一个简单网址启动画廊，如下所示：

<a href="#" id="photo">
    <img src="/img/ico_photo1.png" border="0" /><br>
    Gallery
</a>

但我不知道怎么做；你能帮助我吗？

Answer 1

好的，这段代码对我有用：

function startSwipe()
{

(function(window, PhotoSwipe){

var
options = {
preventHide: false,
loop: false,
allowUserZoom = false,
getImageSource: function(obj){
return obj.url;
},
getImageCaption: function(obj){
return obj.caption;
}
},
instance = PhotoSwipe.attach( 
[
{ url: 'http://www.site.com/img/nameimg1.jpg', caption: 'description'},
{ url: 'http://www.site.com/img/nameimg2.jpg', caption: 'description'},                     
{ url: 'http://www.site.com/img/nameimg3.jpg', caption: 'description'},                     

], 
options 
);
instance.show(0);

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

}

html:

<a href="#" onClick="startSwipe();"><img src="/img/ico1.png" border="0" /><br>Gallery</a>

我希望将来有人会为之服务。