Mobile picture preview photoswipe, supports PC picture preview, and is mostly used for mobile picture preview for Android and iOS.
Resource package: photoswipe-3.0.5
There is a 1.0.11 package download on the photoswipe official website, but the 1.0.11 version has defects. On some Android phones, 2 pictures will be jumped when they slide once.
(Under normal circumstances, slide once and jump 1 picture)
The usual usage method is as follows:
Load the following files in the resource package in the head tag of the html:
<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="jquery.transit.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>
The format of some html pictures is as follows:
<ul id="Gallery"> <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" /></a></li> <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" /></a></li> <li><a href="images/thumb/004.jpg"><img src="images/thumb/004.jpg" /></a></li> <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" /></a></li> <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" /></a></li> <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" /></a></li> <li><a href="images/full/008.jpg" /></a></li> <li><a href="images/thumb/008.jpg" /></a></li> <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" /></a></li> <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" /></a></li> <li><a href="images/full/011.jpg" /></a></li> <li><a href="images/full/012.jpg" /></a></li> <li><a href="images/thumb/012.jpg" /></a></li> <li><a href="images/full/012.jpg" /></a></li> <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" /></a></li> <li><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" /></a></li> <li><a href="images/full/015.jpg" /></a></li> <li><a href="images/full/016.jpg" /></a></li> <li><a href="images/full/016.jpg" /></a></li> <li><a href="images/thumb/016.jpg" /></a></li> <li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" /></a></li> <li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" /></a></li> </ul>
The js part calls this plugin as mentioned in the demo
(function(window, PhotoSwipe){ document.addEventListener('DOMContentLoaded', function(){ var options = {}, instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options ); }, false); }(window, window.Code.PhotoSwipe));You can also use: $("#Gallery a").photoSwipe();
If the html part needs to have a special format, it can be called in the following ways:
1. Declare global variables: var photoswipe_instance = 0;
2. For elements that need to enter the preview, the content is as follows:
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. Find initialize in PhotoSwipe.Cache.CacheClass: 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);//Original code--where the change src = image.url;//New code--where the change caption = this.settings.getImageCaption(image); metaData = this.settings.getImageMetaData(image); this.images.push(new PhotoSwipe.Image.ImageClass(image, src, caption, metaData)); } },In addition, there was a problem with the plug-in and it was necessary to make the following modifications:
Find PhotoSwipe.DocumentOverlay.DocumentOverlayClass (there was originally a problem with the positioning and height of the background floating layer here)
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//Old code--change height = Util.DOM.bodyOuterHeight(); //New code--change place// top = (this.settings.jQueryMobile) ? Util.DOM.windowScrollTop() + 'px' : '0px';//Old code -- where the changes are top = Util.DOM.windowScrollTop() + 'px';//New code -- where the changes are 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 }); },The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.