history.js - Photoswipe: Redirecting back a page upon closing gallery -
i implementing photoswipe website, , cannot pids work, causing page redirect page when close gallery. e.g., if @ google.com, open index.html file, click on thumbnail, photoswipe gallery opens, close gallery , redirects google.com. feel might because there no pids, , url isn't changing when inside gallery. not know javascript, , hurting me right now. i've tried can think of. i've copied code (html, css, , js) photoswipe.com index page pids working, no luck. not sure history.js file in file structure. i'm lost. i've set history option true. going wrong here?
<!doctype html> <html lang="en" prefix="og: http://ogp.me/ns#" debug="true"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta charset="utf-8"> <title>photoswipe: responsive javascript image gallery</title> <meta name="description" content="touch-friendly javascript image gallery mobile , desktop, without dependencies. responsive layout. swipe , zoom gestures."> <meta name="viewport" content="width = device-width, initial-scale = 1.0"> <meta name="author" content="dmitry semenov"> <link rel="canonical" href="http://photoswipe.com"> <meta property="og:url" content="http://photoswipe.com"> <meta property="og:title" content="photoswipe: responsive javascript image gallery"> <meta property="og:description" content="touch-friendly javascript image gallery mobile , desktop, without dependencies. responsive layout. swipe , zoom gestures."> <meta property="og:image" content="http://photoswipe.com/test/horizontal-swipe.jpg"> <link href="https://plus.google.com/102586375605352607718" rel="publisher" /> <link rel="icon apple-touch-icon" href="test/apple-touch-icon-144x144.png" sizes="144x144" type="image/png"> <link href="site-assets/site.css" rel="stylesheet" /> <link href="../dist/photoswipe.css" rel="stylesheet" /> <link href="../dist/default-skin/default-skin.css" rel="stylesheet" /> <script src="src/js/history.js"></script> <script src="../dist/photoswipe.min.js"></script> <script src="../dist/photoswipe-ui-default.min.js"></script> <script src="//use.typekit.net/snf1yod.js"></script> <script>try{typekit.load({ async: true });}catch(e){}</script> <!--[if lt ie 9]> <script> document.createelement('figure'); </script> <![endif]--> </head> <body> <div class="section section--head"> <div class="row row--heading"> <h1>photoswipe<a href="https://github.com/dimsemenov/photoswipe/releases"> v4.1.0</a></h1> <p>javascript gallery, no dependencies.</p> </div> <div class="row"> <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" data-author="folkert gorter" class="demo-gallery__img--main"> <img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" /> <figure>this dummy caption.</figure> </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="1024x683" data-author="samuel rohl"> <img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" /> <figure>this dummy caption. has been placed here solely demonstrate , feel of finished, typeset text.</figure> </a> <a href="https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg" data-size="1600x1067" data-med="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg" data-med-size="1024x683" data-author="ales krivec"> <img src="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg" alt="" /> <figure>this dummy caption. not meant read.</figure> </a> <a href="https://farm6.staticflickr.com/5584/14985868676_b51baa4071_h.jpg" data-size="1600x1067" data-med="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_b.jpg" data-med-size="1024x683" data-author="michael hull"> <img src="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_m.jpg" alt="" /> <figure>dummy caption. it's greek you. unless, of course, you're greek, in case, makes no sense.</figure> </a> <a href="https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg" data-size="1600x1067" data-med="https://farm4.staticflickr.com/3920/15008465772_383e697089_b.jpg" data-med-size="1024x683" data-author="thomas lefebvre"> <img src="https://farm4.staticflickr.com/3920/15008465772_383e697089_m.jpg" alt="" /> <figure>it's dummy caption. searches meaning here sorely disappointed.</figure> </a> </div> </div> </div> <div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <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> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <!-- <div class="pswp__loading-indicator"><div class="pswp__loading-indicator__line"></div></div> --> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"> <!-- <a href="#" class="pswp__share--facebook"></a> <a href="#" class="pswp__share--twitter"></a> <a href="#" class="pswp__share--pinterest"></a> <a href="#" download class="pswp__share--download"></a> --> </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 class="pswp__caption"> <div class="pswp__caption__center"> </div> </div> </div> </div> </div> <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 = 0; < numnodes; i++) { el = thumbelements[i]; // include 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], 10), h: parseint(size[1], 10), author: el.getattribute('data-author') }; item.el = el; // save link element getthumbboundsfn if(childelements.length > 0) { item.msrc = childelements[0].getattribute('src'); // thumbnail url if(childelements.length > 1) { item.title = childelements[1].innerhtml; // caption (contents of figure) } } var mediumsrc = el.getattribute('data-med'); if(mediumsrc) { size = el.getattribute('data-med-size').split('x'); // "medium-sized" image item.m = { src: mediumsrc, w: parseint(size[0], 10), 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; (var = 0; < 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('&'); (var = 0; < 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); // define options (if needed) options = { galleryuid: galleryelement.getattribute('data-pswp-uid'), getthumbboundsfn: function(index) { // see options->getthumbboundsfn section of docs 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; } }; if(fromurl) { if(options.gallerypids) { // parse real index when custom pids 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; } var radios = document.getelementsbyname('gallery-style'); (var = 0, length = radios.length; < length; i++) { if (radios[i].checked) { if(radios[i].id == 'radio-all-controls') { } else if(radios[i].id == 'radio-minimal-black') { options.mainclass = 'pswp--minimal--dark'; options.barssize = {top:0,bottom:0}; options.captionel = false; options.fullscreenel = false; options.shareel = false; options.bgopacity = 0.85; options.taptoclose = true; options.taptotogglecontrols = false; } break; } } if(disableanimation) { options.showanimationduration = 0; } // pass data photoswipe , initialize gallery = new photoswipe( pswpelement, photoswipeui_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) { gallery.invalidatecurritems(); } if(firstresize) { firstresize = false; } imagesrcwillchange = false; }); gallery.listen('gettingdata', function(index, item) { if( uselargeimages ) { item.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 gallery elements var galleryelements = document.queryselectorall( galleryselector ); for(var = 0, l = galleryelements.length; < l; i++) { galleryelements[i].setattribute('data-pswp-uid', i+1); galleryelements[i].onclick = onthumbnailsclick; } // parse url , open gallery if contains #&pid=3&gid=1 var hashdata = photoswipeparsehash(); if(hashdata.pid && hashdata.gid) { openphotoswipe( hashdata.pid, galleryelements[ hashdata.gid - 1 ], true, true ); } }; initphotoswipefromdom('.demo-gallery'); })(); </script> </body> </html>
have tried running index.html on local server?
i having same issue pids when directly pulled html file browser, works charm if i'm using browsersync.
Comments
Post a Comment