Photoswipe.js Album Display plugin Learning

Photoswipe.js Official website: http://photoswipe.com/, on this site can be downloaded to photoswipe files and related examples.

This component is mainly used for displaying pictures, albums, or is very useful.

First, the use of this component requires the introduction of two JS files:

1 <script type= "Text/javascript" src= "Simple-inheritance.min.js" >2 <script type= "text/ JavaScript "src=" Code-photoswipe-1.0.11.min.js "> <!--the current latest version should be 1.0.11--

Second, then the page structure can be such a child:

<DivID= "Gallery">    <Divclass= "Gallery-row">        <Divclass= "Gallery-item"><ahref= "Images/full/01.jpg"><imgsrc= "Images/thumb/01.jpg"alt= "Image" /></a></Div>        <Divclass= "Gallery-item"><ahref= "Images/full/02.jpg"><imgsrc= "Images/thumb/02.jpg"alt= "Image" /></a></Div>        <Divclass= "Gallery-item"><ahref= "Images/full/03.jpg"><imgsrc= "Images/thumb/03.jpg"alt= "Image" /></a></Div>    </Div>    <Divclass= "Gallery-row">        <Divclass= "Gallery-item"><ahref= "Images/full/04.jpg"><imgsrc= "Images/thumb/04.jpg"alt= "Image" /></a></Div>        <Divclass= "Gallery-item"><ahref= "Images/full/05.jpg"><imgsrc= "Images/thumb/05.jpg"alt= "Image" /></a></Div>        <Divclass= "Gallery-item"><ahref= "Images/full/06.jpg"><imgsrc= "Images/thumb/06.jpg"alt= "Image" /></a></Div>    </Div></Div>

In fact, in this HTML code in addition to the page structure, really useful only id= "Gallery" and <a href= " picture path " ></a> (explained later), Other class God horse just play the role of beautifying the original page structure ( and you really want the effect of the page is different, that is, you just follow the structure of the above page layout, you want the page effect is the plug-in JS itself to complete, is not required to write the effect layout ).

The page needs the JS and page structure have, the following is the use of plug-ins.

Three, you can use two ways to make the declaration of the plugin:

1, is to use the browser default way AddEventListener ()

Document.addeventlistener ("domcontentloaded",function() {    code.photoswipe (' A ', ' #Gallery ') );//This relates to the id= "Gallery" and <a href= "..." in the above page structure, ></A>, where id= "Gallery" is a container,
<a href= "Picture path" ></a>, where the href must be the path of the currently pointing picture},false);

2. How to use jquery:

$ (document). Ready (function() {    $ ("#Gallery a"). Photoswipe ();}); 

Four, through this setup your page will probably be like this:

The first page effect:

Click on any image after the form of the page becomes the following (this page is actually the page I really Want):

You can clearly see the content of Alt in at the top of the page, there are four buttons below, which in turn represent: Turn off the page back to the original display (that is, on), auto play, previous page picture, next page picture.

The effect of such a photo album appears. Of course on this page can use the mouse to swipe left and right to switch, if on the handheld device can also be done by the left and the finger slide.

This plugin also has a lot of its own properties:

Allowuserzoom: Allows the user to double-click the zoom/move view picture. Default = Trueautostartslideshow: The slideshow is played automatically when Photoswipe is activated. Default = Falseallowrotationonuserzoom: Only IOS Support-allows the user to rotate the image with gestures in zoom/pan mode. Default = falsebackbuttonhideenabled: Press the back key to hide the album slideshow. Mainly used by Android and BlackBerry. Supports BB6, Android v2.1, IOS 4, and newer versions. Default = Truecaptionandtoolbarautohidedelay: The delay time when the title bar and toolbar are automatically hidden. The default value is = 5000 (milliseconds). If set to 0, it is not automatically hidden (tap/click Toggle) captionandtoolbarflipposition: Title bar and toolbar toggle position (let caption appear at the bottom and toolbar at the top). Default value = Falsecaptionandtoolbarhide: Hides the title bar and toolbar. Default = falsecaptionandtoolbaropacity: The transparency of the title bar and toolbar (0-1). Default = 0.8captionAndToolbarShowEmptyCaptions: The title bar is displayed even if the title of the current picture is empty. Default = Truecachemode: Cache mode, Code.PhotoSwipe.Cache.Mode.normal (default, Normal) or Code.PhotoSwipe.Cache.Mode.aggressive (aggressive, active). Decide how Photoswipe manages the picture cache caches. Aggressive mode will actively set the non-"current, previous, next" picture to be an empty type. Large image memory overflow will be useful for older iOS browsers. In most cases, the normal mode is available. Doubletapspeed: Double-click the maximum interval. Default value = 300 (ms) Doubletapzoomlevel: When the user double-clicks, the magnification multiplier, the default "zoom-in" (zoom) level. Default = 2.5enableDrag: Allows you to drag the previous/next picture to the current interface. Default value = TrueEnablekeyboard: Allow keyboard operation (left and RIGHT arrow toggle, ESC exit, enter AutoPlay, empty Geshin/hidden title bar/exit). Default = Trueenablemousewheel: Allows the mouse wheel to operate. Default = Truefadeinspeed: The speed (duration) of the fade-in effect element, in milliseconds. Default = 250fadeOutSpeed: The speed (duration) of the fade-out effect element, in milliseconds. Default = 250imageScaleMethod: Picture Scaling Method (mode). Optional values: "Fit", "Fitnoupscale" and "Zoom". The mode "fit" ensures that the image adapts to the screen. "Fitnoupscale" and "fit" are similar but do not enlarge the picture. "Zoom" will picture full screen, but it is possible that the picture zoom is not proportional. Default = "Fit" Invertmousewheel: Reverses the mouse wheel. By default, scrolling down the mouse will switch to the next one, up to the previous one. Default = Falsejquerymobile: Indicates whether the photoswipe is integrated into the JQuery Mobile project. By default, Photoswipe'll try and work on the hash label used by the Window,dialog page of the for Youjquerymobiledialoghash:jquery Mobile. Default value = "&ui-state  =dialog "Loop: Does the album automatically loop. Default = Truemargin: The interval between two graphs, in pixels. Default = 20maxUserZoom: Maximum magnification. Default = 5.0 (set to 0 is ignored) Minuserzoom: the smallest reduction in the image. Default = 0.5 (set to 0 will be ignored) Mousewheelspeed: responds to mouse wheel sensitivity. Default = 500 (ms) Nextpreviousslidespeed: When you click on the previous button, the delay in how many milliseconds to perform the switchover. Default = 0 (toggle now) Preventhide: Prevents users from shutting down Photoswipe. The Close button on the toolbar is also hidden. Use on exclusive pages (examples are examples/08-exclusive-mode.html in the source code). Default = Falsepreventslideshow: Prevents autoplay mode. It also hides the play button in the toolbar. Default = Falseslideshowdelay: How long it takes to play the next one in AutoPlay mode. Default = 3000 (ms) Slidespeed: The time the picture slides into view. Default = 250 (ms) Swipethreshold: The number of pixels the finger slides to trigger an swipe gesture event. Default = 50swipeTimeThreshold: Defines the maximum number of milliseconds to trigger a swipe (swipe) gesture, which is too slow to trigger a swipe, and only drags the position of the current photo. Default = 250slideTimingFunction: Easing function when sliding. Default = "Ease-out" ZIndex: the initial zIndex value. Default = 1000enableUIWebViewRepositionTimeout: Check that the orientation of the device is changed. Default = Falseuiwebviewresetpositiondelay: Time to check the direction of the device changes by default = 500 (ms) Preventdefaulttouchevents: Blocks default touch events, such as page scrolling. Default = Truetarget: Must be a valid DOM element (such as a div). The default is window (Full page). If it is a low-level DOM, it is displayed inside the DOM and may not be full-screen.

If you do not need to show the first page to show the second page directly, you can set this:

$ (document). Ready (function() {        //  Set up photoswipe, setting "Preventhide:true"     vartrue  });    Code.PhotoSwipe.Current.show (0);});

Of course, this plugin has a lot of other listening functions:

Document.addeventlistener (' domcontentloaded ',function(){    //Onbeforeshow Call this method before gallery will be shownCode.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onBeforeShow,function(e) {Console.log ("Onbeforeshow");}) ;//OnShow is called when the gallery is displayed.Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onShow,function(e) {Console.log ("OnShow");});//onbeforehide before gallery hiddenCode.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onBeforeHide,function(e) {Console.log (' Onbeforehide ');            }); //Onhide when the gallery hideCode.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onHide,function(e) {Console.log (' Onhide ');            }); //Onshownext on the next show.Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onShowNext,function(e) {Console.log (' Onshownext ');}); //onshowprevious on the last show.Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onShowPrevious,function(e) {Console.log (' Onshowprevious ');}); //Ondisplayimage in the Picture ShowCode.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onDisplayImage,function(e) {Console.log (' Ondisplayimage ');}); //Onresetposition when the size and position of the gallery change or the direction of the device or the window size changes, the methodCode.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onResetPosition,function(e) {Console.log (' Onresetposition ');}); //Onslideshowstart when gallery began to slide the display (this method may be I understand wrong, the experiment has not been triggered), the original is: when the gallery have started the SlideshowCode.PhotoSwipe.Current.addEventListener ( Code.PhotoSwipe.EventTypes.onSlideshowStart,function(e) {Console.log (' Onslideshowstart ');}); //Onslideshowstop When gallery activity is over.Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onSlideshowStop,function(e) {Console.log (' Onslideshowstop ');}); //Onbeforecaptionandtoolbarshow triggered before the top status bar and the bottom toolbar are displayedCode.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow,function(e) {Console.log (' Onbeforecaptionandtoolbarshow ');});//onbeforecaptionandtoolbarhide fires before the top status bar and the bottom toolbar are hiddenCode.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide,function(e) {Console.log (' Onbeforecaptionandtoolbarhide ');}); //Onviewportclick triggers when the screen is clicked in Gallery, which typically triggers onbeforecaptionandtoolbarshowor Onbeforecaptionandtoolbarhide method Code.PhotoSwipe.Current.addEventListener ( Code.PhotoSwipe.EventTypes.onViewportClick,function(e) {Console.log (' Onviewportclick ');}); },false);

Because there is no API interface in the PHOTOSWIPE official website call Way, and now the JS level is not good, so some of its API interface is basically not very understanding, but I look at its example when I found a variable will often appear, Code.photoswipe or Code.PhotoSwipe.Current, all I did was experiment in the console, and when I entered Code.photoswipe, the following appeared:

Although not fully understand what is inside, but can see that there is current this element, and then in the console input Code.PhotoSwipe.Current, get the following content:

More information can be found in this area, such as: Currentindex indicates that the current picture is in the index position in the list, the whole connection is Code.PhotoSwipe.Current.currentIndex Represents the index position of the current picture, this information is important to me, we can use this information to display different page information on different pages.

Other methods have yet to be further studied.