Shulou(Shulou.com)06/03 Report--

This article will explain in detail what pure Javascript galleries that support mobile devices are like, and the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

This is a gallery effect that does not rely on any js framework and is pure javascript. It supports gesture operations on mobile devices, such as gesture touch, sliding, zooming in and closing pictures. It also supports keyboard operations on PC. In short, it is an indispensable photo gallery plug-in for WEB developers. It is called photoswipe.

HTML

First load the required CSS and js files.

Do not worry about the above documents, the moonlight is packed, you just download and use it.

Next, prepare the HTML part of the body. We prepare image thumbnails on the page. When you click on this thumbnail, the corresponding large atlas will pop up. We prepare the HTML structure as follows:

Atlas

Now that the important gallery presentation section will provide the architecture for the larger image presentation, note that the elements in the following code: .pswp__bg, .pswp _ scroll-wrap, .pswp _ container and .pswp _ item Div are immutable.

The above HTML structure defines the elements displayed in the gallery, such as content, tools, direction buttons, caption, and so on.

Javascript

We define a collection of atlas images in js (of course, we can also define a collection of pictures in the html section like demo2), set various options, and then invoke the photoSwipe plug-in by using new PhotoSwipe ().

Var openPhotoSwipe = function () {var pswpElement = document.querySelectorAll ('.pswp') [0]; / define the picture collection var items = [{src: 'images/s1.jpg', w: 800,h: 1142}, {src:' images/s2.jpg', w: 800,h: 1142}]; var options = {history: false, focus: false, showAnimationDuration: 0, hideAnimationDuration: 0}; var gallery = new PhotoSwipe (pswpElement, PhotoSwipeUI_Default, items, options); gallery.init ();} / / triggers a call to openPhotoSwipe document.getElementById ('photos') .onclick = openPhotoSwipe when clicking on an atlas element

So much for the sharing of pure Javascript galleries that support mobile devices. I hope the above content can be of some help and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.