Introduction to photoswape

The official introduction

PhotoSwipe It is a photo album designed for mobile touch devices / Gallery . Compatible with all iPhone、iPad、 blackberry 6+, And desktop browsers . The underlying implementation is based on HTML/CSS/JavaScript, Is a free and open source photo album product .

For whom

Let the mobile site's photo album experience and native App The same designers and developers .

Great features

PhotoSwipe Provide users with a familiar and intuitive photo album interaction 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 ​​

On-line demo

​ ​ http://www.photoswipe.com/latest/examples/04-jquery-mobile.html ​​

Compatibility features

PhotoSwipe Compatible with a large number of mobile devices and all popular JavaScript Class library / Development framework . Existing based on jQuery Version of , Some do not depend on jQuery Version of , And compatibility jQuery Mobile Version of . Of course ,All In One, All in the source code sample package .

How to use

PhotoSwipe It is an independent JavaScript library , It can be easily integrated into your website . For mobile browsers (webkit) A lot of optimizations , Of course , For desktop browsers , as well as jQueryMobile, The corresponding version is also provided in the source package .

Class library reference

Log in and copy

       

        <!-- photoswipe  Quote before klass, If you need to increase the loading speed , You can give  script  add  defer  Mark / attribute -->
        
<script type="text/javascript" src="klass.min.js"></script>
        
<!--  Important note , If not used jQuery edition , stay IE There will be errors below , Of course , Use jQuery edition , We need to introduce jQuery-->
        
<script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>
       
       

        
1.
        
2.
        
3.
        
4.
       

Calling code

Log in and copy

       

        /*  add to DOMContentLoaded  Event monitoring , Be similar to jQuery Of  ready function .
        
  Default mode  examples/01-default.html
        
  No thumbnail mode, please see .examples/09-exclusive-mode-no-thumbnails.html
        
*/
        
// PhotoSwipe.attach  Method reception 3 Parameters (HTML Element set , Optional configuration information , When multiple instances are available string Type of ID)
        
document.addEventListener('DOMContentLoaded', function(){
        
  // Set up  PhotoSwipe Bind as  id by Gallery All under the container <a> label . Click to activate 
        
  //  The object here , Namely PhotoSwipe example , The corresponding method can be used , for example  show(0),hide() etc. .
        
  var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
        
}, false);
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
        
10.
       

If you use

jQuery, The calling code is as follows ：

Log in and copy

       

        //jQuery  edition , Corresponding js Documents also need to be changed 
        
//  See for example examples/02-jquery.html
        
$(document).ready(function(){
        
  //  The object here , Namely PhotoSwipe example , The corresponding method can be used , for example  show(0),hide() etc. .
        
  var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
        
});
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
       

HTML Code

Log in and copy

       

        <!-- ul li  And so on are used to display thumbnails , It can also be adjusted as needed .<a> Below <img>  Elements , Thumbnails , If you don't need to , be src Set it to blank  -->
        
<ul id="Gallery">
        
  <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
        
  <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
        
  <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
        
  <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
        
  <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
        
  <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
        
</ul>
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
       

Parameter description

Log in and copy

       

        allowUserZoom:  Allows the user to double-click to zoom in / View pictures in mobile mode .  The default value is  = true
        
autoStartSlideshow:  When PhotoSwipe After activation , Auto slide show .  The default value is  = false
        
allowRotationOnUserZoom:  Only  iOS  Support  -  Allows the user to zoom / In Pan mode   Rotate the image with gestures .  The default value is   = false
        
backButtonHideEnabled:  Press the back key to hide the album slides .  Mainly  Android  and  Blackberry Use .  Support  BB6, Android v2.1, iOS 4  And newer versions .  The default value is  = true
        
captionAndToolbarAutoHideDelay:  Delay time for title bar and toolbar to be hidden automatically .  The default value is  = 5000( millisecond ).  If it is set to  0  Will not automatically hide (tap/ Click to switch between explicit and implicit )
        
captionAndToolbarFlipPosition:  Title bar and toolbar switch position ( Give Way  caption Displayed at the bottom and  toolbar Show at the top ).  The default value is  = false
        
captionAndToolbarHide:  hide   Title bar and toolbar .  The default value is   = false
        
captionAndToolbarOpacity:  Title bar and toolbar   Transparency (0-1).  The default value is   = 0.8
        
captionAndToolbarShowEmptyCaptions:  Even if the title of the current picture is empty , Also display the title bar .  The default value is  = true
        
cacheMode:  Cache mode ,Code.PhotoSwipe.Cache.Mode.normal ( Default , normal )  perhaps  Code.PhotoSwipe.Cache.Mode.aggressive( radical , positive ).  decision  PhotoSwipe  How to manage picture cache  cache.
        
 Aggressive  The mode will actively set non  " At present , Previous , Next " The picture of is an empty type .  For the old version iOS  Large image memory overflow under the browser will be very useful .  Most of the time ,normal The pattern is fine .
        
doubleTapSpeed:  Maximum interval between double clicks .  The default value is  = 300( millisecond )
        
doubleTapZoomLevel:  When the user double clicks , The magnification ,  default  "zoom-in"( zoom in )  Level .  The default value is  = 2.5
        
enableDrag:  Allows you to drag the previous / The next picture to the current interface .  The default value is  = true
        
enableKeyboard:  Allow keyboard operation ( Left and right arrows switch ,Esc sign out ,Enter Auto play , Space bar   display / Hidden title block / sign out ).  Default  = true
        
enableMouseWheel:  Allow mouse wheel operation .  Default  = true
        
fadeInSpeed:  The speed at which the effect elements fade ( The duration of the ), millisecond .  Default  = 250
        
fadeOutSpeed:  The rate at which effect elements fade out ( The duration of the ), millisecond .  Default  = 250
        
imageScaleMethod:  Picture scaling method ( Pattern ).  Optional value : "fit", "fitNoUpscale"  and  "zoom".  Pattern "fit"  Make sure the image fits the screen . "fitNoUpscale"  and  "fit" Similar but not enlarged . "zoom" Full screen picture ,  But it is possible that the image is not scaled equally .  Default  = "fit"
        
invertMouseWheel:  Reverse the mouse wheel . By default , Scrolling down the mouse will switch to the next page , Switch up to the previous  .  Default  = false
        
jQueryMobile:  instructions  PhotoSwipe  Whether it is integrated into  jQuery Mobile  project .  By default , PhotoSwipe will try and work this out for you
        
jQueryMobileDialogHash: jQuery Mobile Of window,dialog page   What is used hash label .  The default value is  = "&ui-state=dialog"
        
loop:  Whether the album will automatically cycle .  Default  = true
        
margin:  The interval between two figures , Unit is pixel .  Default  = 20
        
maxUserZoom:  Maximum magnification .  Default  = 5.0 ( Set to 0 Will be ignored )
        
minUserZoom:  The smallest reduction of the image .  Default  = 0.5 ( Set to 0 Will be ignored )
        
mouseWheelSpeed:  Response to mouse wheel sensitivity .  Default  = 500( millisecond )
        
nextPreviousSlideSpeed:  When clicking on the previous , After the next button , How many milliseconds is it delayed to perform the switch .  Default  = 0 ( Switch now )
        
preventHide:  Prevent users from closing  PhotoSwipe.  It also hides   On the toolbar "close" close button .  Use... On exclusive pages  ( The example is in the source code  examples/08-exclusive-mode.html).  Default  = false
        
preventSlideshow:  Block autoplay mode .  It also hides the play button in the toolbar .  Default  = false
        
slideshowDelay:  In auto play mode , How long does it take to play the next . Default = 3000( millisecond )
        
slideSpeed:  When the picture slides into the view .  Default  = 250( millisecond )
        
swipeThreshold:  How many pixels does the finger slide to trigger a   swipe  Gesture events .  Default  = 50
        
swipeTimeThreshold:  Define trigger swipe( slide ) The maximum number of milliseconds for gestures , Too slow will not trigger sliding , Only the position of the current photo will be dragged .  Default  = 250
        
slideTimingFunction:  When sliding  Easing function .  Default  = "ease-out"
        
zIndex:  Initial zIndex value .  Default  = 1000
        
enableUIWebViewRepositionTimeout:  Check whether the direction of the equipment changes . Default  = false
        
uiWebViewResetPositionDelay:  Time to regularly check whether the direction of the equipment changes   Default  = 500( millisecond )
        
preventDefaultTouchEvents:  Block default touch event , For example, page scrolling .  Default  = true
        
target:  It has to be a legal DOM Elements ( Such as DIV). The default is window( Full page ). And if it's a low-level DOM, It's in DOM The display , May not be full screen .
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
        
10.
        
11.
        
12.
        
13.
        
14.
        
15.
        
16.
        
17.
        
18.
        
19.
        
20.
        
21.
        
22.
        
23.
        
24.
        
25.
        
26.
        
27.
        
28.
        
29.
        
30.
        
31.
        
32.
        
33.
        
34.
        
35.
        
36.
        
37.
        
38.
        
39.
        
40.
       

Custom function

Log in and copy

       

        getToolbar: function(){
        
    /* return   To be in Toolbar As shown in HTML character string */
        
},
        
getImageSource: function(el){
        
    /*  tell  gallery How to get pictures src,
        
      By default ,gallery Suppose you use <a> The label wraps <img> thumbnail , and <a> Labeled href The attribute is the... Of the complete picture URL.
        
      In this case, you can use this method to return the path of the image of the corresponding element . It can be all kinds of . such as rel Attribute or something . Yes jQuery That's easier .
        
    */
        
    return el.getAttribute('rel'); 
        
},
        
getImageCaption: function(el){
        
    /**
        
     Like  getImageSource  The method is the same , This method returns the title of the picture , By default gallery Looking for pictures alt  attribute .
        
    */
        
},
        
getImageMetaData: function(el){
        
    /**
        
     If you listen  onDisplayImage, Then you can get additional meta information through this function . And in  onDisplayImage Use in 
        
    */
        
    return {
        
        longDescription: el.getAttribute(el, 'data-long-description')
        
    }
        
}
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
        
10.
        
11.
        
12.
        
13.
        
14.
        
15.
        
16.
        
17.
        
18.
        
19.
        
20.
        
21.
        
22.
        
23.
       

in the light of android Press the phone once , It will cause the first floor to close , The bottom layer will still trigger the click event , Our solution is as follows :

Log in and copy

       

        //  stay android  Multiple layers on the mobile phone trigger clicking , We use a timer to intercept 
        

        
var event_timeout = 500;//  Prevent multiple events from triggering  
        
//  Prevent continuous 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;
        
};
        

        
//  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 operations 
        
  } else {
        
    // else  The operation is rejected , Can return directly  false  And so on. 
        
    return false;
        
  }
        
});
        
//  Example 
        
$("body").live(specialClick,function(){
        
  if(preventMultiClick()){
        
    //  Perform other operations 
        
  }
        
});
       
       

        
1.
        
2.
        
3.
        
4.
        
5.
        
6.
        
7.
        
8.
        
9.
        
10.
        
11.
        
12.
        
13.
        
14.
        
15.
        
16.
        
17.
        
18.
        
19.
        
20.
        
21.
        
22.
        
23.
        
24.
        
25.
        
26.
        
27.
        
28.
        
29.
        
30.
        
31.
        
32.
        
33.
        
34.
        
35.
        
36.
        
37.
        
38.
        
39.
        
40.
        
41.
        
42.