Let’s first look at a few renderings:
Click one of the photos to enlarge, which can support image text description:
Support sharing function:
Support gesture enlargement and zoom out
Using js framework is PhotoSwipe.
PhotoSwipe is a picture enlargement plug-in, compatible with PC and mobile terminals. It has experienced multiple versions and has been constantly updated. It has countless pitfalls and has huge advantages on mobile terminals.
1. Can control a variety of styles such as:
Title, share, full screen buttons, click event, whether to add subtitles, transparent background, etc.
2. It can support mobile touch gesture compatible with PC terminal
All basic gestures support: Slide the next or previous one, drag pan, zoom, zoom, or close, click to toggle controls, and double-click to zoom in or zoom.
3. Share
The default UI has a button to share 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 separated from the core script. The interface can be customized completely. The default photoswipe UI is responsive and can be used entirely on desktops, tablets and mobile devices.
5. More functions are waiting for you to discover.
Official website: http://photoswipe.com/
github: https://github.com/dimsemenov/photoswipe
1. Download PhotoSwipe on the official website and introduce it to 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 following code structure must be added to the page (this structure is the code required for browsing plug-in images. The author has not integrated into js, so the user must manually add it to his own webpage):
<!-- Root element of PhotoSwipe. Must have class pswp. --><div tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). --> <div></div> <!-- Slides wrapper with overflow:hidden. --> <div> <!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory. Don't modify these 3 pswp__item elements, data is added later on. --> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div> <div> <!-- Controls are self-explanatory. Order can be changed. --> <div></div> <button></button> <button></button> <!-- element will get class pswp__preloader--active when preloader is running --> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div> <div></div> </div> </div> </div> <div> <div></div> </div> </div> </div> <div> <div></div> </div> </div> </div> </div> </div> </div>
3. Add photoswipe structure code to the pictures you need to browse. What you need to pay attention to here is
data-pswp-uid must be unique in each album. data-size is the width and height of the picture when enlarged. If the specified width and height do not match the picture, the displayed picture will be deformed. There is no way to remove data-size, but if you have time, you can find an alternative.
<!--data-pswp-uid must be unique in each album. data-size specifies the width and height of the image when zoomed in --><div data-pswp-uid="1"> <figure> <a href="img/m3.jpg" data-size="670x712"> <img src="img/th1.jpg"> </a> </figure></div>
4. Add js code. The author of this code has not been integrated into the photoswipe framework. He needs to manually add it to the web page.
<script type="text/javascript"> var initPhotoSwipeFromDOM = function(gallerySelector) { // parse slide data from DOM elements (URL, title, size...) // (children of gallerySelector) var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item; for(var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // Include only element nodes if(figureEl.nodeType !== 1) { continue; } 25 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], 10), h: parseInt(size[1], 10) }; if(figureEl.children.length > 1) { // <figcaption> content item.title = figureEl.children[1].innerHTML; } if(linkEl.children.length > 0) { // <img> Thumbnail node, search thumbnail URL item.msrc = linkEl.children[0].getAttribute('src'); } item.el = figureEl; // Save link element for getThumbBoundsFn items.push(item); } return items; }; // Find the nearest parent node var closest = function closest(el, fn) { return el && ( fn(el) ? el : closest(el.parentNode, fn) ); }; // When the user clicks the thumbnail, trigger 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.tagName.toUpperCase() === 'FIGURE'); }); if(!clickedListItem) { return; } // find index of clicked item by looping through all child nodes // alternatively, you may define index via data- attribute var clickedGallery = clickedListItem.parentNode, childNodes = clickedListItem.parentNode.childNodes, numChildNodes = 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 hash = 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.querySelectorAll('.pswp')[0], gallery, options, items; items = parseThumbnailElements(galleryElement); // Parameter options = { barsSize: { top: 100, bottom: 100 }, fullscreenEl : false, // Whether full screen button shareButtons is supported: [ {id:'wechat', label:'share WeChat', 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: galleryElement.getAttribute('data-pswp-uid'), getThumbBoundsFn: function(index) { // See Options -> getThumbBoundsFn section of documentation for more info var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail pageYScroll = 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 for(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, options); 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 compiled into "Summary of JavaScript WeChat Development Skills", and everyone is welcome to learn and read.
I would like to recommend a tutorial on WeChat mini program that is highly concerned: "WeChat Mini Program Development Tutorial" has been carefully compiled by the editor of everyone, I hope you like it.
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.