相册展示PhotoSwipe.js插件实现

  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);