PhotoSwipe is a photo album/game designed specifically for mobile touch devices. It is compatible with all iPhone, iPad, BlackBerry 6+, and desktop browsers. The underlying implementation is based on HTML/CSS/JavaScript, and is a free and open source photo album product.
For whom
Let the mobile site experience the album of the album like 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 popular JavaScript class libraries/development frameworks. There are both jQuery-based versions, jQuery-free versions, and jQuery Mobile-compatible versions. Of course, All In One is all in the source code sample package.
How to use
PhotoSwipe is an independent JavaScript library that can be easily integrated into your website. A lot of optimizations have been made for mobile browsers (webkits). Of course, for desktop browsers and jQueryMobile, corresponding versions are also provided in the source code package.
Class library references
<!-- photoswipe referenced klass before. If you need to increase the loading speed, you can add a defer tag/attribute to script-->
<script type="text/javascript" src="klass.min.js"></script>
<!-- Important note, if you do not use the jQuery version, an error will occur under IE. Of course, if you use the jQuery version, you need to introduce jQuery-->
<script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>
Call code
/* Add DOMContentLoaded event listening, similar to jQuery's ready function.
Default method examples/01-default.html
Please check the .examples/09-exclusive-mode-no-thumbnails.html for no thumbnails mode.
*/
// The PhotoSwipe.attach method receives 3 parameters (HTML element collection, optional configuration information, and optional string type ID when multiple instances)
document.addEventListener('DOMContentLoaded', function(){
//Set PhotoSwipe to bind to all <a> tags under the container with id as Gallery. Click to activate
// The object here is a PhotoSwipe instance, and you can use corresponding methods, such as show(0), hide(), etc.
var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
}, false);
If you use jQuery, the call code is as follows:
//JQuery version, the corresponding js file also needs to be changed in the js file
// See examples/02-jquery.html for details for examples
$(document).ready(function(){
// The object here is a PhotoSwipe instance, and you can use corresponding methods, such as show(0), hide(), etc.
var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
});
HTML code
<!-- ul li and other things are used to display thumbnails, and can also be adjusted as needed. The <img> element below is a thumbnail. If not required, src can be set to empty -->
<ul id="Gallery">
<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" /></a></li>
<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" /></a></li>
<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" /></a></li>
<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" /></a></li>
<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" /></a></li>
<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" /></a></li>
</ul>
Parameter description
1.allowUserZoom: Allows users to double-click to view pictures by zooming in/move. Default value = true
2.autoStartSlideshow: When PhotoSwipe is activated, the slideshow will be automatically played. Default value = false
3.allowRotationOnUserZoom: Only supported by iOS - allows users to rotate images with gestures in zoom/pan mode. Default value = false
4.backButtonHideEnabled: Press the return key to hide album slides. It is mainly used by Android and Blackberry. It supports BB6, Android v2.1, iOS 4 and newer versions. Default value = true
5.captionAndToolbarAutoHideDelay: The delay time automatically hidden by the title bar and toolbar. The default value is = 5000 (ms). If set to 0, it will not be hidden automatically (tap/click to switch visible and hidden)
6.captionAndToolbarFlipPosition: Toggle the title bar and toolbar (let the caption be displayed at the bottom and the toolbar is displayed at the top). Default value = false
7.captionAndToolbarHide: Hide title bar and toolbar. Default value = false
8.captionAndToolbarOpacity: Transparency of title bar and toolbar (0-1). Default value = 0.8
9.captionAndToolbarShowEmptyCaptions: The title bar is displayed even if the title of the current image is empty. Default value = true
10.cacheMode: Cache mode, Code.PhotoSwipe.Cache.Mode.normal (default, normal) or Code.PhotoSwipe.Cache.Mode.aggressive (radical, active). Decides how PhotoSwipe manages image cache cache.
11. Aggressive mode will actively set the type of non-"current, previous, next" images that are empty. It will be useful for memory overflows in older iOS browsers. In most cases, normal mode is OK.
12.doubleTapSpeed: The maximum interval for double-clicking. Default value = 300 (ms)
13.doubleTapZoomLevel: When the user double-clicks, the magnification multiple is the default "zoom-in" level. Default value = 2.5
14.enableDrag: Allows dragging the previous/next image to the current interface. Default value = true
15.enableKeyboard: Allow keyboard operations (left and right arrow switching, Esc exit, Enter automatic playback, space bar display/hidden title bar/exit). Default = true
16.enableMouseWheel: Allows mouse wheel operation. Default = true
17.fadeInSpeed: The speed (duration) of the effect element, milliseconds. Default = 250
18.fadeOutSpeed: The speed (duration) of the fade effect element, milliseconds. Default = 250
19.imageScaleMethod: Image scaling method (mode). Optional values: "fit", "fitNoUscale" and "zoom". Mode "fit" ensures that the image adapts to the screen. "fitNoUscale" is similar to "fit" but does not enlarge the image. "zoom" will screen the image in full, but it is possible that the image scaling is not equally proportional. Default = "fit"
20.invertMouseWheel: Invert the mouse wheel. By default, scrolling down the mouse will switch to the next picture and up to the previous picture. Default = false
21.jQueryMobile: Indicates whether PhotoSwipe is integrated into the jQuery Mobile project. By default, PhotoSwipe will try and work this out for you
22.jQueryMobileDialogHash: jQuery Mobile's hash tag used on the window and dialog pages. Default value = "&ui-state=dialog"
23.loop: Whether the album automatically loops. Default = true
24.margin: The interval between two pictures, the unit is pixels. Default = 20
25.maxUserZoom: Maximum magnification. Default = 5.0 (set to 0 will be ignored)
26.minUserZoom: The smallest reduction multiple of the image. Default = 0.5 (set to 0 will be ignored)
27.mouseWheelSpeed: Sensitivity in response to mouse wheel. Default = 500 (ms)
28.nextPreviousSlideSpeed: How many milliseconds will be delayed when the previous and next buttons are clicked. Default = 0 (Switch now)
29.preventHide: prevents users from closing PhotoSwipe. It will also hide the "close" close button on the toolbar. Use it on the exclusive page (the example is examples/08-exclusive-mode.html in the source code). Default = false
30.preventSlideshow: Blocks automatic playback mode. It will also hide the play button in the toolbar. Default = false
31.slideshowDelay: How long does it take to play the next picture in automatic play mode? Default = 3000 (ms)
32.slideSpeed: The time when the image slides into the view. Default = 250 (ms)
33.swipeThreshold: How many pixels does the finger slide to trigger a swipe gesture event. Default = 50
34.swipeTimeThreshold: Defines the maximum number of milliseconds to trigger the swipe gesture. If it is too slow, it will not trigger the slide, and will only drag the position of the current photo. Default = 250
35.slideTimingFunction: Easing function when sliding. Default = "ease-out"
36.zIndex: The initial zIndex value. Default = 1000
37.enableUIWebViewRepositionTimeout: Check whether the orientation of the device has changed. Default = false
38.uiWebViewResetPositionDelay: The time to check whether the direction of the device changes regularly is 500 (ms)
39.preventDefaultTouchEvents: Blocks the default touch event, such as page scrolling. Default = true
40.target: Must be a legal DOM element (such as DIV). The default is window (full page). If it is a low-level DOM, it will be displayed in the DOM and may not be full screen.
Custom functions
getToolbar: function(){ /*Returns the HTML string to be displayed in the Toolbar*/ }, getImageSource: function(el){ /* Tell gallery how to get the src of the image. By default, gallery assumes that you use the <a> tag to wrap the <img> thumbnail, and the href attribute of the <a> tag is the URL of the complete image. At this time, this method can be used to return the path of the picture of the corresponding element. It can be of all kinds. For example, rel attribute or something. It would be easier to have jQuery. */ return el.getAttribute('rel'); }, getImageCaption: function(el){ /** Like the getImageSource method, this method returns the title of the image. By default, gallery looks for the alt attribute of the image. */ }, getImageMetaData: function(el){ /** If you listen to onDisplayImage, then you can get extra meta information through this function. And use */ return in onDisplayImage { longDescription: el.getAttribute(el, 'data-long-description') } }For Android phones, one click will cause the problem of clicking on a layer to be closed, and the bottom layer will still trigger the click event. Our solution is as follows:
// Trigger clicks at multiple levels on android phones. We use a timer to intercept var event_timeout = 500;// Prevent multiple event triggers// Block consecutive events in a short time var multiClickPrevent = false; function preventMultiClick(){ if(multiClickPrevent){ return false; } multiClickPrevent = true; window.setTimeout(function(){ multiClickPrevent = false; },event_timeout); return true; }; // Adapt to the 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 operations} else { // else is to reject the operation, you can directly return false or other return false; } }); //Example $("body").live(specialClick,function(){ if(preventMultiClick()){ // Perform other operations} });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.