PhotoSwipe.js插件实现图片相册展示

<div id="Gallery">
  <div class="gallery-row">
    <div class="gallery-item"><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></div>
    <div class="gallery-item"><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></div>
    <div class="gallery-item"><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></div>
  </div>
  <div class="gallery-row">
    <div class="gallery-item"><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></div>
    <div class="gallery-item"><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></div>
    <div class="gallery-item"><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></div>
  </div>
</div>

document.addEventListener("DOMContentLoaded",function(){
  Code.photoSwipe('a','#Gallery');

//此处就涉及到上述页面结构中的 id="Gallery"和<a href="..."></a>，其中id="Gallery"是容器　　

//<a href="图片路径"></a>,此处href中一定是当前所指向的图片的路径
},false);

$(document).ready(function(){
  $("#Gallery a").photoSwipe();
}); 

$(document).ready(function(){  
  // Set up PhotoSwipe, setting "preventHide: true"
  var thumbEls = Code.photoSwipe('a', '#Gallery', { preventHide: true });
  Code.PhotoSwipe.Current.show(0);
}); 

document.addEventListener('DOMContentLoaded',function(){
  //onBeforeShow 在gallery将要展示之前调用该方法
 Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeShow,function(e){
  console.log("onBeforeShow");
})；
  
// onshow 在gallery展示的时候调用
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow,function(e){
  console.log("onShow");
});

// onBeforeHide 在gallery隐藏之前
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){      
　　console.log('onBeforeHide');      
});
      
// onHide 在Gallery隐藏的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onHide, function(e){
  console.log('onHide');      
});
      
// onShowNext 在展示下一个的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowNext, function(e){
  console.log('onShowNext');
});
  
// onShowPrevious 在展示上一个的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowPrevious, function(e){
  console.log('onShowPrevious');
});
      
// onDisplayImage 在图片展示
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onDisplayImage, function(e){
  console.log('onDisplayImage');
});
      
// onResetPosition 当Gallery的大小和位置发生变化时或者设备的方向或者窗口大小改变时，出发该方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onResetPosition, function(e){
  console.log('onResetPosition');
});
      
// onSlideshowStart 当gallery开始滑动展示的时候（此方法可能是我理解有误，实验过程中一直没有触发过
的），原文是：When the gallery has started the slideshow
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStart, function(e){
  console.log('onSlideshowStart');
});
      
// onSlideshowStop 当Gallery活动结束的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStop, function(e){
  console.log('onSlideshowStop');
});
      
// onBeforeCaptionAndToolbarShow 在顶部状态栏和底部的工具栏展示之前触发
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
  console.log('onBeforeCaptionAndToolbarShow');
});

// onBeforeCaptionAndToolbarHide 在顶部状态栏和底部的工具栏隐藏之前触发
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
  console.log('onBeforeCaptionAndToolbarHide');
});
      
// onViewportClick 在gallery中点击屏幕的时候触发，此时一般会触发onBeforeCaptionAndToolbarShow
或者onBeforeCaptionAndToolbarHide 方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onViewportClick, function(e){
  console.log('onViewportClick');
});
    
},false);