Album Display Photoswipe.js plug-in implementation _javascript skills

Photoswipe.js Official website: http://photoswipe.com/, on this website can download to photoswipe file and related examples.

This component is mainly used to show pictures, albums, or very practical.

First, use this component need to introduce 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 edition should be 1.0.11-->

Second, then the page structure can be like this

<div id= "Gallery" > <div class= "Gallery-row" > <div class= "gallery-item" ><a href= "images/full/01" . jpg "></a></div> <div" class= "& Gt;<a href= "images/full/02.jpg" ></a></div> & Lt;div class= "Gallery-item" ><a href= "images/full/03.jpg" ></a></div> </div> <div class= "Gallery-row" > <div class= "gallery-item" ><a href = "Images/full/04.jpg" ></a></div> <div class= "Gallery-item" ><a href= "images/full/05.jpg" ></a ></div> <div class= "Gallery-item" ><a href= "images/full/06.jpg" ></a></div> &Lt;/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> (in the following will be explained), The other class God horse just plays the role of beautifying the original page structure (unlike the pages you really want to effect), in other words, you just follow the structure of the above page layout, you want the page effect is plug-in JS itself completed, is not required to write the effect of the layout.

Page needs of 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 Plug-ins

1, is in the browser by default way AddEventListener () the way

Document.addeventlistener ("domcontentloaded", function () {
  code.photoswipe (' A ', ' #Gallery ');

Here is the id= "Gallery" and <a href= "..." ></a> in the above page structure, where id= "Gallery" is the container

//<a href= "Picture path" ></a In this case, the href must be the path},false of the picture currently being pointed to
;

2, the use of jquery way:

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

Four, through such settings your page will probably be like this
The first page effect:

Click on any picture after the form of the page becomes as follows (this page is actually the page I really Want):

You can obviously see the contents of the alt in the Above the page, there will be four buttons, in turn, the page is closed back to the original display (that is, the top image), automatic playback, the previous page picture, the next page picture.

The effect of such an album appears. Of course, this page can be used to switch around the mouse, if the handheld device can also be left and right through the fingers of the slide.

This plugin also has many of its own properties:

Allowuserzoom: Allows the user to double-click the zoom/move mode to view the picture. Default value = True
Autostartslideshow: When the Photoswipe is active, the slides are played automatically. Default value = False
Allowrotationonuserzoom: Only IOS Support-allows the user to rotate the image with gestures in zoom/pan mode. Default value = False
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
Captionandtoolbarautohidedelay: The delay time when the title bar and toolbar are automatically hidden. The default value is = 5000 (ms). If set to 0, it will not be automatically hidden (tap/click Toggle Explicit)
Captionandtoolbarflipposition: Title bar and toolbar toggle position (let caption appear at the bottom and toolbar on top). Default value = False
Captionandtoolbarhide: Hides the title bar and toolbars. Default value = False
Captionandtoolbaropacity: Transparency of the title bar and toolbars (0-1). Default value = 0.8
Captionandtoolbarshowemptycaptions: The title bar is displayed even if the title of the current picture is empty. Default value = True
Cachemode: Cached 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.
Doubletapspeed: Double-click the maximum interval. Default = 300 (ms)
Doubletapzoomlevel: When the user double-clicks, the magnification, the default "zoom-in" (zoom) level. Default value = 2.5
Enabledrag: Allows you to drag the previous/next picture to the current interface. Default value = True
Enablekeyboard: Allow keyboard operation (left-right arrow toggle, ESC exit, enter auto play, empty Geshin/hidden title bar/exit). Default = True
Enablemousewheel: Allows the mouse wheel to operate. Default = True
Fadeinspeed: The speed (duration) of the fade element, milliseconds. Default = 250
Fadeoutspeed: The speed (duration) of the fading effect element, in milliseconds. Default = 250
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"
Invertmousewheel: Reverse the mouse wheel. By default, scrolling down will switch to the next one, and up to the previous one. Default = False
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 Jquerymobiledialoghash:jquery Mobile Window,dialog page. Default = "&ui-state=dialog"
Loop: Whether albums are automatically cycled. Default = True
Margin: The interval between two graphs, in pixels. Default = 20
Maxuserzoom: Maximum magnification. Default = 5.0 (set to 0 will be 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 one, after the Next button, the number of milliseconds to delay to perform the switch. Default = 0 (toggle now)
Preventhide: Prevents users 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
Preventslideshow: Block AutoPlay mode. The play button in the toolbar is also hidden. Default = False
Slideshowdelay: How often to play the next one in AutoPlay mode. Default = 3000 (ms)
Slidespeed: The time when the picture slides into view. Default = 250 (ms)
Swipethreshold: How many pixels does the finger slide to trigger a swipe gesture event. Default = 50
Swipetimethreshold: Defines the maximum number of milliseconds to trigger a swipe (slide) gesture, too slow to trigger a slide, and only drag the position of the current photo. Default = 250
Slidetimingfunction: Easing function when sliding. Default = "Ease-out"
ZIndex: The initial zindex value. Default = 1000
Enableuiwebviewrepositiontimeout: Check if the direction of the device changes. Default = False
Uiwebviewresetpositiondelay: Time to check whether the direction of the device is changed by default = 500 (ms)
Preventdefaulttouchevents: Prevents default touch events, such as page scrolling. Default = True
Target: Must be a legitimate DOM element (such as a 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.

If you don't 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"
  var thumbels = Code.photoswipe ( ' A ', ' #Gallery ', {preventhide:true});
  Code.PhotoSwipe.Current.show (0);
}); 

Of course, there are many other listening functions for this plugin:

Document.addeventlistener (' domcontentloaded ', function () {//onbeforeshow calls this method before gallery will be displayed Code.PhotoSwipe.Current.addEventListener (Code.photoswipe.eventtypes.onbeforeshow,function (e) {Console.log ("
Onbeforeshow "); ////OnShow calls Code.PhotoSwipe.Current.addEventListener at Gallery display (Code.photoswipe.eventtypes.onshow,function (

e) {console.log ("OnShow");}); Onbeforehide before gallery is hidden Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onBeforeHide,      
Function (e) {console.log (' onbeforehide ');
      
});
  Onhide when gallery is hidden Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onHide, function (e) {      
Console.log (' onhide ');
      
}); Onshownext in the next show Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onShowNext, function (E
  
) {Console.log (' Onshownext ');}); Onshowprevious on the last Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onShowPrevious, Function (e) {Console.log (' onShowprevious ');
      
}); Ondisplayimage in the Picture Show Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onDisplayImage,
      
Function (e) {console.log (' ondisplayimage ');}); Onresetposition This method Code.PhotoSwipe.Current.addEventListener when the size and position of the gallery change, or when the direction or window size of the device changes.
      
Code.PhotoSwipe.EventTypes.onResetPosition, Function (e) {console.log (' onresetposition ');});
Onslideshowstart when the gallery began to slide the show (this method may be I understand incorrectly, the experimental process has not been triggered), the original: When the gallery has started the slideshow Code.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 triggers the Code.PhotoSwipe.Current.addEventListener before the top status bar and the bottom toolbar display ( Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, Function (e) {COnsole.log (' onbeforecaptionandtoolbarshow ');

}); Onbeforecaptionandtoolbarhide triggers the Code.PhotoSwipe.Current.addEventListener before the top status bar and the bottom toolbar are hidden ( Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, Function (e) {Console.log ('
Onbeforecaptionandtoolbarhide ');
      
});
Onviewportclick is triggered when the screen is clicked in Gallery, which usually triggers the Onbeforecaptionandtoolbarshow or Onbeforecaptionandtoolbarhide method Code.PhotoSwipe.Current.addEventListener (Code.PhotoSwipe.EventTypes.onViewportClick, function (e) {Console.log ('
Onviewportclick ');
    
});

 },false);

Because in the Photoswipe official website did not find the API interface to call the way, and now the JS level is not very good, so some of its API interface is not very understanding, but I look at its example when I found a variable will often appear, Code.photoswipe or Code.PhotoSwipe.Current, I did some experiments 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 the element of current, then in the console input Code.PhotoSwipe.Current, get the following content:

Here you can find more information, such as: Currentindex indicates that the current picture is the index position in the list, the whole connection is the Code.PhotoSwipe.Current.currentIndex represents the current picture of the index position, This information is very important to me, we can use this information to display different page information on different pages.

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.