[JS plugin] Photoswipe Picture Browsing Plugin usage

First, introduce

Photoswipe is a photo album/gallery designed for mobile touch devices that are compatible with all iphones, ipads, BlackBerry 6+, and desktop browsers. The underlying implementation is based on Html/css/javascript and is a free and open source album product.

Official website: http://photoswipe.com/
SOURCE Download: Https://github.com/dimsemenov/photoswipe
The domestic cdn:http://www.bootcdn.cn/photoswipe/ two, constructs the webpage, introduces the related document

1, the new HTML page, if it is moving the end to see, you need to insert a viewport in the page description:

<meta name= "viewport" content= "Width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, User-scalable=no ">

2, the introduction of PHOTOSWIPE.CSS, DEFAULT-SKIN.CSS documents, the introduction of Photoswipe.js, photoswipe-ui-default.js documents.

<link href= "Http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.css" rel= "stylesheet" >
<link href= " Http://cdn.bootcss.com/photoswipe/4.1.1/default-skin/default-skin.css "rel=" stylesheet ">
<script src=" Http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.js "></script>
<script src=" http:// Cdn.bootcss.com/photoswipe/4.1.1/photoswipe-ui-default.js "></script>

third, write your photo album structure, and with the style

For example, if you have 2 pictures, the structure is as follows:

<div id= "Demo-test-gallery" class= "Demo-gallery" >
    <a href= "https://farm4.staticflickr.com/3894/" 15008518202_c265dfa55f_h.jpg "data-size=" 1600x1600 "data-med=" https://farm4.staticflickr.com/3894/15008518202_ B016d7d289_b.jpg "data-med-size=" 1024x1024 ">
        
    </a>

    <a href=" https://farm6.staticflickr.com/5591/15008867125_ B61960af01_h.jpg "data-size=" 1600x1068 "data-med=" https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_ B.jpg "data-med-size=" 1024x1024 ">
        
    </a>
</div>

Note: Be sure to have the "data-med" this attribute, otherwise it will not appear on the mobile side; Be sure to include the picture in a container. Four, the necessary startup code

First of all, you must write the necessary structure code of the album layer, because this part of the author is not integrated into his JS inside, so to add it yourself, the code is as follows:

<!--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 the top of the sliding area. Can be changed.

  --> <div class= "pswp__ui Pswp__ui--hidden" >          <div class= "Pswp__top-bar" > <!--Controls are self-explanatory. 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--shar E "title=" Share "></button> <button class=" Pswp__button pswp__button--fs "title=" Toggle FULLSC Reen "></button> <button class=" Pswp__button pswp__button--zoom "title=" Zoom In/out "></b" Utton> <!--preloader Demo Http://codepen.io/dimsemenov/pen/yyBWoR--> <!--E Lement'll get Class pswp__preloader--active when Preloader is running--> <div class= "Pswp__preloa Der "> <div class=" PSWP__PRELOADER__ICN "> <div class=" Pswp__preloader
            __cut ">            <div class= "Pswp__preloader__donut" ></div> </div> </div> </div> </div> <div class= "Pswp__share-modal Pswp__sha Re-modal--hidden Pswp__single-tap "> <div class=" pswp__share-tooltip "></div> &L
            t;/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)" &G
            T </button> <div class= "pswp__caption" > <div class= "Pswp__caption__center" &GT;&L t;/div> </div> </div> </div> </div>

Then add the necessary JS boot code:

<script type= "Text/javascript" > (function () {var initphotoswipefromdom = function (galleryselector) {
                        var parsethumbnailelements = function (EL) {var thumbelements = el.childnodes,
                        NumNodes = thumbelements.length, items = [], El,

                Childelements, thumbnailel, size, item;

                    for (var i = 0; i < numnodes i++) {el = thumbelements[i];
                    Include only element nodes if (El.nodetype!== 1) {continue;

                    } childelements = El.children;

                    Size = El.getattribute (' data-size '). Split (' X ');
                  Create Slide Object item = {src:el.getAttribute (' href '),      W:parseint (Size[0], H:parseint (size[1), author:el.getAt

                    Tribute (' Data-author ')}; Item.el = El;
                        Save link to element for GETTHUMBBOUNDSFN if (Childelements.length > 0) { ITEM.MSRC = Childelements[0].getattribute (' src '); Thumbnail URL if (childelements.length > 1) {item.title = Childe lements[1].innerhtml; Caption (contents of figure)}} var mediumsrc = EL.G
                    Etattribute (' data-med ');
                        if (mediumsrc) {size = El.getattribute (' data-med-size '). Split (' X ');
                            "medium-sized" image item.m = {src:mediumsrc, W:parseint (Size[0], h:parseint(Size[1], 10)};
                        }//Original image item.o = {src:item.src,

                    W:ITEM.W, h:item.h};
                Items.push (item);
            return items;

            };  Find nearest parent element var closest = function closest (el, FN) {return El && ( fn (EL)?
            El:closest (El.parentnode, FN));

            };
                var Onthumbnailsclick = function (e) {e = e | | window.event; E.preventdefault?

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

                E.srcelement;
                var clickedlistitem = closest (Etarget, function (EL) {return el.tagname = = ' A ';

                });
       if (!clickedlistitem) {return;         var clickedgallery = Clickedlistitem.parentnode;
                        var 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) {openphotoswipe (index, clickedgallery);
            return false;

            };
                        var photoswipeparsehash = function () {var hash = window.location.hash.substring (1),

                params = {}; if (Hash.lenGth < 5) {//pid=1 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 = Docume
                        Nt.queryselectorall ('. Pswp ') [0], gallery, Options,

                Items

                Items = parsethumbnailelements (galleryelement); //Define options (if needed) options = {GalleryUID:galleryElement.getAttribute (' data- Pswp-uid '), Getthumbboundsfn:function (index) {//Options->getthumbbo
                                UNDSFN section of docs for more info var thumbnail = items[index].el.children[0], Pageyscroll = Window.pageyoffset | |

                        Document.documentElement.scrollTop, rect = Thumbnail.getboundingclientrect ();
                    return {x:rect.left, y:rect.top + Pageyscroll, w:rect.width};
                            }, Addcaptionhtmlfn:function (item, Captionel, Isfake) {if (!item.title) {
                            Captionel.children[0].innertext = ';
                        return false; } captionel.children[0].innerhtml = Item.title + ' <br/><small>photo: ' + iteM.author + ' </small> ';
                    return true;

                }

                };
                The options for control bar Options.shareel = false;

                Options.fullscreenel = false; if (Fromurl) {if (options.gallerypids) {//parse real index when custom PIDs a
                        Re used//Http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                                for (var j = 0; J < Items.length J + +) {if (Items[j].pid = = index) {
                                Options.index = j;
                            Break
                    }} else {options.index = parseint (index, 10)-1;
                } else {options.index = parseint (index, 10); }//exit if Index not fOund if (isNaN (Options.index)) {return; }//Pass data to Photoswipe and initialize it gallery = new Photoswipe (pswpelement, P

                Hotoswipeui_default, items, options);
                        see:http://photoswipe.com/documentation/responsive-images.html var realviewportwidth,

                Uselargeimages = False, Firstresize = true, Imagesrcwillchange; Gallery.listen (' Beforeresize ', function () {var dpiratio = Window.devicepixelratio?
                    Window.devicepixelratio:1;
                    Dpiratio = Math.min (dpiratio, 2.5);


                    Realviewportwidth = gallery.viewportsize.x * dpiratio; if (realviewportwidth >= 1200 | | (!gallery.likelytouchdevice && realviewportwidth > 800) | |
    Screen.width > 1200) {if (!uselargeimages) {                        Uselargeimages = true;
                        Imagesrcwillchange = true; } else {if (uselargeimages) {uselargeimages =
                            False
                        Imagesrcwillchange = true; } if (Imagesrcwillchange &&!firstresize) {Gall
                    Ery.invalidatecurritems ();
                    } if (firstresize) {firstresize = false;

                } Imagesrcwillchange = false;

                }); Gallery.listen (' Gettingdata ', function (index, item) {if (uselargeimages) {i
                        TEM.SRC = ITEM.O.SRC;
                        ITEM.W = ITEM.O.W;
                    item.h = item.o.h; else {item.src = ITEM.M.SRc
                        ITEM.W = ITEM.M.W;
                    item.h = item.m.h;

                }
                });
            Gallery.init ();

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

        }
        };

    Initphotoswipefromdom ('. Demo-gallery ');

})(); </script>

Five, can be outside the chain of JS files

If you do not want to write too much code on the page, you can put the above Div and JS are written in a file, and then introduced into the can, please save the following code as a. js file bar:

Document.writeln ("<!--Root element of Photoswipe. Must have class PSWP. --> "