Mobile phone end HTML5 use photoswipe.js imitation micro-trust friends Circle picture Amplification effect _javascript Skills

Let's start with a couple of effect graphs:

Click on one of the photos to enlarge, can support the picture text description:

Sharing features are also supported:

Support gesture zoom in and zoom out

Using the JS framework is photoswipe.
Photoswipe is a picture amplification plug-in, compatible PC and mobile end, experienced many versions of iterations and has been constantly updated, stepped on the pit Buchihan, the mobile end has a huge advantage.
1, can control a variety of styles such as:
Title, Share, Full screen button, click event, whether to add subtitles, background transparent and so on.
2, can support the mobile end touch gesture compatible PC end
All basic gesture support: Slide the next or previous, drag pan, zoom, zoom in or off, click the Toggle control, double-click to zoom in or zoom in.
3. Share
The default UI has a button that shares the link. The default links are Facebook, Twitter, and Pinterest, but you can set the sharing type through the API.
4, user interface
The user interface is completely detached from the core script. You can customize the interface completely. The default Photoswipe UI is responsive, and desktops, tablets, and mobile devices are fully available.
5, more multi-functional and so you find.
Official website: http://photoswipe.com/
Github:https://github.com/dimsemenov/photoswipe

1, in the official website download Photoswipe, introduces in the page

<link rel= "stylesheet prefetch" href= "Css/photoswipe.css" > <link rel= "stylesheet prefetch" href= "css/"
Default-skin/default-skin.css ">
<script src=" js/photoswipe.js "></script>
<script src=" Js/photoswipe-ui-default.min.js "></script> 

2, the page must be added to the following code structure (this structure is the plugin image browsing must be code, the author is not integrated into JS, so users must manually join their own web page):

<!--Root element of Photoswipe. Must have class PSWP. 
 --> <div class= "PSWP" tabindex= "-1" role= "dialog" aria-hidden= "true" > <!--Background of Photoswipe. It ' s a separate element as animating opacity is faster than (). --> <div class= "PSWP__BG" ></div> <!--Slides wrapper with Overflow:hidden. 
 --> <div class= "Pswp__scroll-wrap" > <!--Container that holds slides.
 Photoswipe keeps only 3 of the them in the DOM to save memory. Don ' t modify these 3 pswp__item elements, the data is added later on. --> <div class= "Pswp__container" > <div class= "pswp__item" ></div> <div class= "Pswp__item" >  </div> <div class= "Pswp__item" ></div> </div> <!--Default (Photoswipeui_default) interface On top of sliding area. Can be changed. --> <div class= "pswp__ui pswp__ui--hidden" > <div class= "Pswp__top-bar" > <!--Controls are SELF-EXPL Anatory. Order can be changed. --> <Div class= "Pswp__counter" ></div> <button class= "Pswp__button pswp__button--close" title= "Close (ESC)" ></button> <button class= "Pswp__button pswp__button--share" title= "Share" ></button> <button class= "Pswp__button pswp__button--fs" title= "Toggle fullscreen" ></button> <button class= "Pswp__button Pswp__button--zoom "title=" Zoom in/out "></button> <!--element'll get class pswp__preloader--active when P Reloader is running--> <div class= "Pswp__preloader" > <div class= "PSWP__PRELOADER__ICN" > <div class = "Pswp__preloader__cut" > <div class= "pswp__preloader__donut" ></div> </div> </div> </d iv> </div> <div class= "Pswp__share-modal pswp__share-modal--hidden pswp__single-tap" > <div class= "P Swp__share-tooltip "></div> </div> <button class=" Pswp__button pswp__button--arrow--left "title="
Previous (arrow left) > </button>
 <button class= "Pswp__button pswp__button--arrow--right" title= "Next (arrow right)" > </button> <div CLA 

ss= "Pswp__caption" > <div class= "pswp__caption__center" ></div> </div> </div> </div>

 </div>

3, need to browse the picture to add photoswipe structure code, here need to pay attention to IS
Data-pswp-uid in each album must be unique, data-size is to specify the magnification of the picture display width and height, if the specified width and the picture does not conform to the image will cause the picture deformation; there is no way to remove the data-size, but there is time to find alternatives.

<!--Data-pswp-uid must be unique in each album, data-size specify the width and height of the picture when magnified-->
<div class= "My-gallery" data-pswp-uid= "1" >
<figure>
  <a href= "img/m3.jpg" data-size= "670x712" >
  
  </a>
  </figure>
</div>

4, add JS code, this code author is not integrated into the PHOTOSWIPE framework, you need to manually join the Web page

<script type= "Text/javascript" > var initphotoswipefromdom = function (galleryselector) {//parsing slide data from DOM elements (URL, title Size... )//(Children of galleryselector) var parsethumbnailelements = function (EL) {var thumbelements = el.childnodes, Numn

 Odes = thumbelements.length, items = [], Figureel, Linkel, size, item; for (var i = 0; i < numnodes; i++) {figureel = thumbelements[i];//<figure> element//is only a component node if (Figureel.
 NodeType!== 1) {continue; } Linkel = figureel.children[0];

 <a> element size = Linkel.getattribute (' data-size '). Split (' X ');


 Create Slide Object item = {src:linkEl.getAttribute (' href '), W:parseint (Size[0], H:parseint (size[1), 10)}; 
 if (FigureEl.children.length > 1) {//<figcaption> content item.title = figureel.children[1].innerhtml; } if (LinkEl.children.length > 0) {// thumbnail node, retrieving thumbnail URL item.msrc = linkel.children[0].getattribute (' src ')
 ; } Item.el = Figureel; Save link element for GetthumbboUNDSFN Items.push (item);
 return items;

 };
 Finds the nearest parent node var closest = function closest (el, FN) {return el && (FN (EL) el:closest (El.parentnode, FN));

 };
 When the user clicks on the thumbnail to trigger the var Onthumbnailsclick = function (e) {e = e | | window.event; E.preventdefault?

 E.preventdefault (): E.returnvalue = false; var etarget = E.target | |

 E.srcelement; Find root element of slide var Clickedlistitem = closest (Etarget, function (EL) {return (El.tagname && El.tag
 Name.touppercase () = = = ' FIGURE ');

 });
 if (!clickedlistitem) {return; //Find index of clicked item by looping through all child nodes//Alternatively, your may define index via Data-att Ribute var clickedgallery = clickedlistitem.parentnode, childnodes = ClickedListItem.parentNode.childNodes, Numchildno

 Des = childnodes.length, Nodeindex = 0, index; 
 for (var i = 0; i < numchildnodes i++) {if (Childnodes[i].nodetype!== 1) {continue; } if (childnodes[i] = = Clickedlistitem) {Index= Nodeindex;
 Break
 } nodeindex++;
 } if (index >= 0) {//Open Photoswipe If valid index found Openphotoswipe (index, clickedgallery);
 return false;

 }; Parse Picture index and Gallery index from URL (#&pid=1&gid=2) var photoswipeparsehash = function () {VAR has

 h = window.location.hash.substring (1), params = {};
 if (Hash.length < 5) {return params;
 var VARs = hash.split (' & ');
 for (var i = 0; i < vars.length i++) {if (!vars[i)) {continue; 
 var pair = vars[i].split (' = ');
 if (Pair.length < 2) {continue;
 } Params[pair[0]] = pair[1];
 } if (params.gid) {params.gid = parseint (Params.gid, 10);
 return params;

 }; var openphotoswipe = function (index, galleryelement, Disableanimation, Fromurl) {var pswpelement = Document.queryselecto

 Rall ('. Pswp ') [0], gallery, options, items;

 Items = parsethumbnailelements (galleryelement); Here you can define the parameter options = {barssize: {top:100, bottom:100}, Fullscreenel:false, Support for Full screen button sharebuttons: [{id: ' WeChat ', Label: ' Share micro-letter ', url: ' # '}, {id: ' Weibo ', Label: ' Sina Weibo ', url: ' # '}, {id: ' Download ' , Label: ' Save Picture ', url: ' {{raw_image_url}} ', download:true}],//Share button//define Gallery index (for URL) galleryuid:galle Ryelement.getattribute (' Data-pswp-uid '), Getthumbboundsfn:function (index) {//* Options-> GETTHUMBBOUNDSFN Sect Ion of documentation for more info var thumbnail = items[index].el.getelementsbytagname (' img ') [0],//Find thumbnail PA Geyscroll = Window.pageyoffset | |

 Document.documentElement.scrollTop, rect = Thumbnail.getboundingclientrect ();
 return {x:rect.left, y:rect.top + Pageyscroll, w:rect.width};

 }

 }; Photoswipe opened from URL if (fromurl) {if (options.gallerypids) {//parse real index when custom PIDs are used F
  or (var j = 0; J < Items.length J + +) {if (Items[j].pid = = index) {options.index = J;
  Break
 }} else {//in URL indexes start from 1 Options.index = parseint (index, 10)-1; }} Else {options.index = parseint (index, 10);
 }//exit if Index not found if (isNaN (Options.index)) {return;
 } if (disableanimation) {options.showanimationduration = 0; //Pass data to Photoswipe and initialize it gallery = new Photoswipe (pswpelement, Photoswipeui_default, items, Opti
 ONS);
 Gallery.init ();

 };

 Loop through all gallery elements and bind events var galleryelements = Document.queryselectorall (galleryselector);
 for (var i = 0, L = galleryelements.length i < l; i++) {Galleryelements[i].setattribute (' data-pswp-uid ', i+1);
 Galleryelements[i].onclick = Onthumbnailsclick;
 }//Parse URL and open Gallery if it contains #&pid=3&gid=1 var hashdata = Photoswipeparsehash ();  if (hashdata.pid && hashdata.gid) {openphotoswipe (hashdata.pid, galleryelements[hashdata.gid-1], True, true
 );

 }
 };
Execute above function initphotoswipefromdom ('. My-gallery ');

 </script>

This article has been organized into the "JavaScript micro-Credit Development Skills Summary", welcome to learn to read.

For everyone to recommend now more attention than the micro-letter Program Tutorial: "Micro-letter Small Program Development tutorial" Small series for everyone carefully organized, hope like.

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.