PhotoSwipe.js official website: http://photoswipe.com/ , PhotoSwipe files and related examples can be downloaded on this website.
This component is mainly used to display pictures and albums, and is very practical.
1. Using this component requires 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 -->
2. Then the page structure can be like this
<div id="Gallery"> <div> <div><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" /></a></div> <div><a href="images/full/02.jpg"><img src="images/full/02.jpg" /></a></div> <div><a href="images/full/04.jpg"><img src="images/full/04.jpg"><img src="images/full/04.jpg"><img src="images/thumb/04.jpg" /></a></div> <div><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" /></a></div> <div><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" /></a></div> </div></div>
In fact, in addition to the page structure, the only things that are really useful in this html code are id="Gallery" and <a href="Image Path"></a> (there will be explained later). The other class only plays a role in beautifying the original page structure (different from the page you really want to have the effect, that is, you just need to type according to the above page structure, and the page effect you want is completed by the plugin js itself, and you don’t need to write the effect layout).
The page requires both js and page structure, and the following is to use the plug-in.
3. You can use two ways to declare plug-in
1. It is done by addingEventListener() in the default browser.
document.addEventListener("DOMContentLoaded",function(){ Code.photoSwipe('a','#Gallery');//This involves the id="Gallery" and <a href="..."></a> in the above page structure, where id="Gallery" is the container//<a href="picture path"></a>, here href must be the path of the picture currently pointed to}, false);2. How to use Jquery:
$(document).ready(function(){ $("#Gallery a").photoSwipe();});4. With this setting, your page will probably be like this.
The effect of the page at the beginning:
After clicking on any image, the form of the page becomes as follows (this page is actually the page I really want):
You can clearly see the content in alt in <img /> above the page, and there will be four buttons below, representing: close the page and return to the original appearance (that is, the picture above), automatic playback, previous page picture, and next page picture.
The effect of such an album appears. Of course, you can use the mouse to swipe left and right on this page. If you are on a handheld device, you can also swipe left and right on your finger.
This plugin has many properties:
allowUserZoom: Allows users to double-click to view pictures by zooming in/move. Default value = true
autoStartSlideshow: When PhotoSwipe is activated, the slideshow will be automatically played. Default value = false
allowRotationOnUserZoom: Only supported by iOS - allows users to rotate images with gestures in zoom/pan mode. Default = false
backButtonHideEnabled: Press the return key to hide album slides. It is mainly used by Android and Blackberry. Supports BB6, Android v2.1, iOS 4 and newer versions. Default value = true
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)
captionAndToolbarFlipPosition: Toggle position between title bar and toolbar (let caption be displayed at the bottom and toolbar is displayed at the top). Default value = false
captionAndToolbarHide: Hide title bar and toolbar. Default value = false
captionAndToolbarOpacity: Transparency of title bar and toolbar (0-1). Default value = 0.8
captionAndToolbarShowEmptyCaptions: Displays the title bar even if the title of the current image is empty. Default value = true
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.
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.
doubleTapSpeed: The maximum interval for double-clicking. Default value = 300 (ms)
doubleTapZoomLevel: When the user double-clicks, the magnification multiple is the default "zoom-in" level. Default value = 2.5
enableDrag: Allows dragging the previous/next image to the current interface. Default value = true
enableKeyboard: Allow keyboard operations (left and left arrow switching, Esc exit, Enter automatic playback, space bar display/hidden title bar/exit). Default = true
enableMouseWheel: Allows mouse wheel operation. Default = true
fadeInSpeed: The speed (duration) of the effect element, milliseconds. Default = 250
fadeOutSpeed: The speed (duration) of the effect element, milliseconds. Default = 250
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"
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
jQueryMobile: Indicates whether PhotoSwipe is integrated into the jQuery Mobile project. By default, PhotoSwipe will try and work this out for you
jQueryMobileDialogHash: jQuery Mobile's hash tag used for the window and dialog pages. Default value = "&ui-state=dialog"
loop: Whether the album automatically loops. Default = true
margin: The interval between two pictures, the unit is pixels. Default = 20
maxUserZoom: Maximum magnification. Default = 5.0 (set to 0 will be ignored)
minUserZoom: The smallest reduction multiple of the image. Default = 0.5 (set to 0 will be ignored)
mouseWheelSpeed: Sensitivity in response to mouse wheel. Default = 500 (ms)
nextPreviousSlideSpeed: How many milliseconds will be delayed after clicking the previous and next buttons. Default = 0 (Switch now)
preventHide: prevents the user 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
preventSlideshow: Blocks automatic playback mode. It will also hide the play button in the toolbar. Default = false
slideshowDelay: How long does it take to play the next picture in automatic play mode? Default = 3000 (ms)
slideSpeed: The time the image slides into the view. Default = 250 (ms)
swipeThreshold: How many pixels are used to slide a finger to trigger a swipe gesture event. Default = 50
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
slideTimingFunction: Easing function when sliding. Default = "ease-out"
zIndex: The initial zIndex value. Default = 1000
enableUIWebViewRepositionTimeout: Checks whether the orientation of the device has changed. Default = false
uiWebViewResetPositionDelay: The time to check whether the direction of the device changes regularly is 500 (ms)
preventDefaultTouchEvents: Blocks default touch events, such as page scrolling. Default = true
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.
If you don't need to display the first page and directly display the second page, you can set it like 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, this plugin has many other listening functions:
document.addEventListener('DOMContentLoaded',function(){ //onBeforeShow Call this method before the gallery is about to be displayed.Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeShow,function(e){ console.log("onBeforeShow");}); // onshow Call Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow,function(e){ console.log("onBeforeShow");}); // onshow Call Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow,function(e){ console.log("onShow");}); // onBeforeHide before the gallery is hidden Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){ console.log('onBeforeHide'); }); // onHide when the gallery is hidden Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onHide, function(e){ console.log('onHide'); }); // onShowNext Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowNext, function(e){ console.log('onShowNext');}); // onShowPrevious Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowPrevious, function(e){ console.log('onShowPrevious');}); // onDisplayImage Display Code.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 or window size of the device changes, start the method Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onResetPosition, function(e){ console.log('onResetPosition');}); // onSlideshowStart When the gallery starts to slide and display (this method may be something I understand wrongly, and it has not been triggered during the experiment), the original text is: When the gallery has started the slideshowCode.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStart, function(e){ console.log('onSlideshowStart');}); // onSlideshowStop When the gallery activity ends Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStop, function(e){ console.log('onSlideshowStop');}); // onBeforeCaptionAndToolbarShow triggers Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){ console.log('onBeforeCaptionAndToolbarShow');}); // onBeforeCaptionAndToolbarHide Trigger Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){ console.log('onBeforeCaptionAndToolbarHide');}); // onViewportClick triggers when clicking on the screen in gallery, onBeforeCaptionAndToolbarShow or onBeforeCaptionAndToolbarHide will usually trigger onBeforeCaptionAndToolbarHide or onBeforeCaptionAndToolbarHide Method Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onViewportClick, function(e){ console.log('onViewportClick');}); },false);Since the calling method of the API interface is not found in the photoSwipe official website, and the current level of js is not very good, some of its API interfaces are basically not well understood. However, when I checked its example, I found that a variable often appears, Code.PhotoSwipe or Code.PhotoSwipe.Current. All of them were conducted in the console. When I entered Code.PhotoSwipe, the following content appeared:
Although you can't fully understand what it is, you can see that the current element is included. Then enter Code.PhotoSwipe.Current in the console to get the following content:
You can find more information here, for example: currentIndex indicates that the current image is indexed in the list, and the whole connection is Code.PhotoSwipe.Current.currentIndex represents the indexed position of the current image. This information is very important to me. We can display different page information on different pages through this information.
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.