Mobile side picture Zoom rotate full screen view Photoswipe.js plugin implement _javascript tips

Photoswipe is a photo album/gallery designed for mobile touch devices that are compatible with all iphones, ipads, BlackBerry 6+, and desktop browsers. The underlying implementation is based on Html/css/javascript and is a free and open source album product.

For whom?
Let the mobile site's photo albums experience the same designers and developers as the native app.

Excellent features
Photoswipe provides users with a familiar and intuitive photo album interactive interface.

Official website
http://www.photoswipe.com/

Source code Example
Http://github.com/downloads/codecomputerlove/PhotoSwipe/code.photoswipe-3.0.5.zip

Github
Https://github.com/codecomputerlove/PhotoSwipe

Online Demo
Http://www.photoswipe.com/latest/examples/04-jquery-mobile.html

Compatibility features
Photoswipe is compatible with a large number of mobile devices and all the popular JavaScript libraries/development frameworks. It has both a jquery based version, a version that doesn't rely on jquery, and a version that is compatible with jquery mobile. Of course, all in one is in the source sample package.

How to use
Photoswipe is a standalone JavaScript library that can be easily integrated into your site. For mobile browsers (WebKit) a lot of optimization, of course, for desktop browsers, as well as jquerymobile, in the source package also provides a corresponding version.

Class Library references

<!--Photoswipe before the Klass, if you need to increase the speed of loading, you can add defer tags/attributes-->
<script type= "Text/javascript" src= "Klass.min.js" ></script>
<!--Important Note that if you do not use the jquery version, there will be an error under IE, of course, using the jquery version, you need to introduce jquery-->
<script type= "Text/javascript" src= "Code.photoswipe-3.0.5.min.js" ></script>

Calling code

/* Add domcontentloaded Event Listener, similar to jquery's ready function.
Default Method examples/01-default.html
No thumbnail mode please view. examples/09-exclusive-mode-no-thumbnails.html
*/
The Photoswipe.attach method receives 3 parameters (HTML element collection, optional configuration information, string ID when multiple instances are optional)
Document.addeventlistener (' domcontentloaded ', function () {
Sets all <a> labels under a container that is photoswipe bound to ID gallery. Click to activate
The object here is the Photoswipe instance, and you can use the appropriate method, such as show (0), hide (), and so on.
var myphotoswipe = Code.PhotoSwipe.attach (Window.document.querySelectorAll (' #Gallery a '), {enablemousewheel:false, Enablekeyboard:false});
}, False);

If you use jquery, the calling code is as follows:

JQuery version, the corresponding JS file also need to change
Examples are detailed in examples/02-jquery.html
$ (document). Ready (function () {
The object here is the Photoswipe instance, and you can use the appropriate method, such as show (0), hide (), and so on.
var myphotoswipe = $ ("#Gallery a"). Photoswipe ({enablemousewheel:false, enablekeyboard:false});
});

HTML code

<!--ul Li is used to display thumbnails, you can also adjust the .<a> the following elements, that is, thumbnails, if not required, then SRC set to empty can-->
<ul id= "Gallery" >
<li><a href= "images/full/01.jpg" ></a></ Li>
<li><a href= "images/full/02.jpg" ></a></ Li>
<li><a href= "images/full/03.jpg" ></a></ Li>
<li><a href= "images/full/04.jpg" ></a></ Li>
<li><a href= "images/full/05.jpg" ></a></ Li>
<li><a href= "images/full/06.jpg" ></a></ Li>
</ul>

Parameter description

1.allowUserZoom: Allows the user to double-click the zoom/move mode to view the picture. Default value = True
2.autoStartSlideshow: When the Photoswipe is active, the slides are played automatically. Default value = False
3.allowRotationOnUserZoom: Only IOS Support-allows the user to rotate the image with gestures in zoom/pan mode. Default value = False
4.backButtonHideEnabled: Press the return key to hide the photo album slide. Mainly for Android and BlackBerry use. Support for BB6, Android v2.1, IOS 4, and newer versions. Default value = True
5.captionAndToolbarAutoHideDelay: The delay time when the title bar and the toolbar are automatically hidden. The default value is = 5000 (ms). If set to 0, it will not be automatically hidden (tap/click Toggle Explicit)
6.captionAndToolbarFlipPosition: Title bar and toolbar toggle position (let caption appear at the bottom and toolbar on top). Default value = False
7.captionAndToolbarHide: Hide the title bar and toolbars. Default value = False
8.captionAndToolbarOpacity: Transparency of the title bar and toolbars (0-1). Default value = 0.8
9.captionAndToolbarShowEmptyCaptions: The title bar is displayed even if the title of the current picture is empty. Default value = True
10.cacheMode: Caching mode, Code.PhotoSwipe.Cache.Mode.normal (default, Normal) or Code.PhotoSwipe.Cache.Mode.aggressive (aggressive, positive). Decide photoswipe How to manage the cached cache of pictures.
The aggressive mode will actively set the blank type of the picture that is not "current, previous, next." Large-picture memory overruns in older versions of iOS will be useful. In most cases, Normal mode is OK.
12.doubleTapSpeed: Double-click the maximum interval. Default = 300 (ms)
13.doubleTapZoomLevel: When the user double click, the magnification, the default "zoom-in" (zoom) level. Default value = 2.5
14.enableDrag: Allows you to drag the previous/next picture to the current interface. Default value = True
15.enableKeyboard: Allow keyboard operation (left-right arrow toggle, ESC exit, enter auto play, empty Geshin/hidden title bar/exit). Default = True
16.enableMouseWheel: Allows the mouse wheel to operate. Default = True
17.fadeInSpeed: The speed (duration) of the fade element, in milliseconds. Default = 250
18.fadeOutSpeed: Fade The effect Element's speed (duration), milliseconds. Default = 250
19.imageScaleMethod: Picture Scaling Method (mode). Optional values: Fit, Fitnoupscale, and Zoom. The pattern fit ensures that the image fits the screen. "Fitnoupscale" and "fit" are similar but do not enlarge the picture. "Zoom" will make the picture full screen, but it is possible that the picture scaling is not proportional. Default = "Fit"
20.invertMouseWheel: Reverse the mouse wheel. By default, scrolling down will switch to the next one, and up to the previous one. Default = False
21.jQueryMobile: Indicates whether Photoswipe is integrated into the JQuery Mobile project. By default, Photoswipe'll try and work this out for you
The hash label used by the 22.jquerymobiledialoghash:jquery Mobile Window,dialog page. Default = "&ui-state=dialog"
23.loop: Albums are automatically cycled. Default = True
24.margin: The interval between two graphs, in pixels. Default = 20
25.maxUserZoom: Maximum magnification. Default = 5.0 (set to 0 will be ignored)
26.minUserZoom: The smallest reduction in the image. Default = 0.5 (set to 0 will be ignored)
27.mouseWheelSpeed: Responds to mouse wheel sensitivity. Default = 500 (ms)
28.nextPreviousSlideSpeed: When you click on the previous one, after the Next button, how many milliseconds to delay to perform the switch. Default = 0 (toggle now)
29.preventHide: Prevent user from shutting down photoswipe. The Close button on the toolbar is also hidden. Used on exclusive pages (examples are examples/08-exclusive-mode.html in the source code). Default = False
30.preventSlideshow: Block AutoPlay mode. The play button in the toolbar is also hidden. Default = False
31.slideshowDelay: In automatic playback mode, how often to play the next one. Default = 3000 (ms)
32.slideSpeed: The time the picture slides into view. Default = 250 (ms)
33.swipeThreshold: How many pixels a finger slides to trigger a swipe gesture event. Default = 50
34.swipeTimeThreshold: Defines the maximum number of milliseconds to trigger the swipe (sliding) gesture, too slow to trigger the slide, and only drag the current photo position. Default = 250
35.slideTimingFunction: The easing function when sliding. Default = "Ease-out"
36.zIndex: The initial zindex value. Default = 1000
37.enableUIWebViewRepositionTimeout: Check if the direction of the device changes. Default = False
38.uiWebViewResetPositionDelay: Time to check whether the direction of the device is changed by default = 500 (ms)
39.preventDefaultTouchEvents: Prevents default touch events, such as page scrolling. Default = True
40.target: Must be a legitimate DOM element (such as DIV). The default is window (Full page). In the case of a low-level dom, it is displayed in the DOM and may not be full-screen.

Custom functions

Gettoolbar:function () {/ 
 * Returns the HTML string to be displayed in toolbar/ 
 }, 
 getimagesource:function (EL) {/ 
 * tells Gallery How to get the src of the picture, 
 by default, gallery assumes that you have  thumbnails wrapped with <a> tags, and the href attribute of the <a> tag is the URL of the full picture. 
 You can use this method to return the path to the picture of the corresponding element. Can be all kinds of. Like the rel attribute or something. It's easier to have jquery. 
 */Return 
 el.getattribute (' rel '); 
 }, 
 getimagecaption:function (EL) { 
 /** 
 as Getimagesource method, this method returns the caption of the picture, by default Gallery find the Alt attribute of the picture. 
 * 
 /}, 
 getimagemetadata:function (EL) { 
 /** 
 if you monitor ondisplayimage, you can get extra meta information through this function. and in Ondisplayimage using the 
 * 
 /return { 
  longDescription:el.getAttribute (el, ' Data-long-description ') 
 } 
} 

Click on the Android phone at a time, will cause a layer of shutdown, the bottom layer will still trigger the problem of clicking Events, our solution is as follows:

With multiple levels of trigger clicks on Android phones, we use a timer to intercept 
 
var event_timeout = 500;//Prevent multiple event triggers 
//Prevent short time continuous event 
var Multiclickprevent = false; 
function Preventmulticlick () { 
 if (multiclickprevent) {return 
 false; 
 } 
 Multiclickprevent = true; 
 Window.settimeout (function () { 
 multiclickprevent = false; 
 },event_timeout); 
 return true; 
 }; 
 
 Adaptive browser 
var useragent = navigator.useragent; 
var Likeios = Useragent.match (/ipad|iphone|ipod/i); 
var likeandroid = Useragent.match (/android/i); 
var Specialclick = "click"; 
if (Likeios) { 
 Specialclick = "Touchstart click"; 
} else if (likeandroid) { 
 Specialclick = "Touchstart Click "; 
} 

/Example 
 $ (". T_right"). Live (Specialclick,function () { 
 if (Preventmulticlick ()) { 
 //Perform other actions 
 } else { 
 //else is to reject the operation, you can return false and so on directly 
 ; 
Example 
$ ("body"). Live (Specialclick,function () { 
 if (Preventmulticlick ()) { 
 //Perform other operations 
 } 
 }); 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.