手机图片预览插件photoswipe.js使用总结

前端技术 2023/09/02 JavaScript

手机图片预览photoswipe，支持pc图片预览，多用于android，ios的手机图片预览。 

资源包：photoswipe-3.0.5

在photoswipe官网有1.0.11的包下载，但是1.0.11这个版本，存在缺陷，在部分android手机上，滑动一次的时候，会跳转2张图片
 （正常情况下，滑动一次，跳转1张图片） 

通常使用方法如下： 

在html的head标签中依次加载资源包中如下文件：

<script type=\"text/javascript\" src=\"klass.min.js\"></script>
<script type=\"text/javascript\" charset=\"utf-8\" src=\"jquery-1.8.2.js\"></script>
<script type=\"text/javascript\" charset=\"utf-8\" src=\"code.photoswipe-3.0.5.js\"></script>
<script type=\"text/javascript\" charset=\"utf-8\" src=\"jquery.transit.js\"></script>
<script type=\"text/javascript\" charset=\"utf-8\" src=\"hammer.js\"></script>
<script type=\"text/javascript\" charset=\"utf-8\" src=\"jquery.hammer.js\"></script>

html部分图片的格式如下：  

<ul id=\"Gallery\" class=\"gallery\">
 
 <li><a href=\"images/full/001.jpg\"><img src=\"images/thumb/001.jpg\" alt=\"Image 001\" /></a></li>
 <li><a href=\"images/full/002.jpg\"><img src=\"images/thumb/002.jpg\" alt=\"Image 002\" /></a></li>
 <li><a href=\"images/full/003.jpg\"><img src=\"images/thumb/003.jpg\" alt=\"Image 003\" /></a></li>
 <li><a href=\"images/full/004.jpg\"><img src=\"images/thumb/004.jpg\" alt=\"Image 004\" /></a></li>
 <li><a href=\"images/full/005.jpg\"><img src=\"images/thumb/005.jpg\" alt=\"Image 005\" /></a></li>
 <li><a href=\"images/full/006.jpg\"><img src=\"images/thumb/006.jpg\" alt=\"Image 006\" /></a></li>
 <li><a href=\"images/full/007.jpg\"><img src=\"images/thumb/007.jpg\" alt=\"Image 007\" /></a></li>
 <li><a href=\"images/full/008.jpg\"><img src=\"images/thumb/008.jpg\" alt=\"Image 008\" /></a></li>
 <li><a href=\"images/full/009.jpg\"><img src=\"images/thumb/009.jpg\" alt=\"Image 009\" /></a></li>
 <li><a href=\"images/full/010.jpg\"><img src=\"images/thumb/010.jpg\" alt=\"Image 010\" /></a></li>
 <li><a href=\"images/full/011.jpg\"><img src=\"images/thumb/011.jpg\" alt=\"Image 011\" /></a></li>
 <li><a href=\"images/full/012.jpg\"><img src=\"images/thumb/012.jpg\" alt=\"Image 012\" /></a></li>
 <li><a href=\"images/full/013.jpg\"><img src=\"images/thumb/013.jpg\" alt=\"Image 013\" /></a></li>
 <li><a href=\"images/full/014.jpg\"><img src=\"images/thumb/014.jpg\" alt=\"Image 014\" /></a></li>
 <li><a href=\"images/full/015.jpg\"><img src=\"images/thumb/015.jpg\" alt=\"Image 015\" /></a></li>
 <li><a href=\"images/full/016.jpg\"><img src=\"images/thumb/016.jpg\" alt=\"Image 016\" /></a></li>
 <li><a href=\"images/full/017.jpg\"><img src=\"images/thumb/017.jpg\" alt=\"Image 017\" /></a></li>
 <li><a href=\"images/full/018.jpg\"><img src=\"images/thumb/018.jpg\" alt=\"Image 018\" /></a></li>
 
 </ul>
 

js部分调用该插件可以demo中提到的 

(function(window, PhotoSwipe){ 
 document.addEventListener(\'DOMContentLoaded\', function(){ 
 var
 options = {},
 instance = PhotoSwipe.attach( window.document.querySelectorAll(\'#Gallery a\'), options );
 
 }, false);
 
 }(window, window.Code.PhotoSwipe));
 

也可以使用： $(\"#Gallery a\").photoSwipe();

如果html部分，需要有特殊格式，则可以通过以下方式调用： 

1、声明全局变量： var photoswipe_instance = 0; 

2、对于需要需要进入预览的元素绑定点按事件，内容如下： 

arr_images.push({ 
 url: XXX
});

var PhotoSwipe = window.Code.PhotoSwipe;
var instance = PhotoSwipe.attach(arr_images, \'\', photoswipe_instance);
photoswipe_instance++;
instance.show(show_current);
 3、找到PhotoSwipe.Cache.CacheClass中
 
 initialize: function(images, options){
 
 var i, j, cacheImage, image, src, caption, metaData;
 
 this.settings = options;
 
 this.images = [];
 
 for (i=0, j=images.length; i<j; i++){
 
 image = images[i];
 // src = this.settings.getImageSource(image);//原来的代码---改动的地方
 src = image.url;//新的代码---改动的地方
 caption = this.settings.getImageCaption(image);
 metaData = this.settings.getImageMetaData(image);
 
 this.images.push(new PhotoSwipe.Image.ImageClass(image, src, caption, metaData));
 
 }
 
 
 },

另外，插件原来有个地方有问题，需要做如下修改： 

找到PhotoSwipe.DocumentOverlay.DocumentOverlayClass（这里背景浮层的定位和高度原先有问题） 

 resetPosition: function(){
 
 var width, height, top;
 
 if (this.settings.target === window){
 
 width = Util.DOM.windowWidth();
 // height = Util.DOM.bodyOuterHeight() * 2; // This covers extra height added by photoswipe//旧的代码--改动之处
 height = Util.DOM.bodyOuterHeight(); //新的代码--改动之处
 // top = (this.settings.jQueryMobile) ? Util.DOM.windowScrollTop() + \'px\' : \'0px\';//旧的代码--改动之处
 top = Util.DOM.windowScrollTop() + \'px\';//新的代码--改动之处
 
 if (height < 1){
 height = this.initialBodyHeight;
 }

 if (Util.DOM.windowHeight() > height){
 height = Util.DOM.windowHeight();
 }
 
 }
 else{
 
 width = Util.DOM.width(this.settings.target);
 height = Util.DOM.height(this.settings.target);
 top = \'0px\';
 
 }
 Util.DOM.setStyle(this.el, {
 width: width,
 height: height,
 top: top
 });
 
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/6054

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案