From 52200ba314d2e712471d4470e1d1ab9fb699a6ce Mon Sep 17 00:00:00 2001 From: Andreas Blaesius Date: Sun, 1 Dec 2019 12:18:51 +0100 Subject: [PATCH] Add slideshow to gallery Slideshow solution for PhotoSwipe by jtbr. Source: https://github.com/dimsemenov/PhotoSwipe/issues/753#issuecomment-225374602 Change-Id: Ied57db2f109eacbced0f6971263cbcb3062c2bbc --- resources/img/pause-wh.png | Bin 0 -> 187 bytes resources/img/pause-wh.svg | 7 +++++ resources/img/play-wh.png | Bin 0 -> 213 bytes resources/img/play-wh.svg | 5 +++ resources/js/photoinit.js | 42 +++++++++++++++++++++++++ resources/sass/vendor/_photoswipe.scss | 19 +++++++++++ template/pswp.template.php | 3 ++ 7 files changed, 76 insertions(+) create mode 100644 resources/img/pause-wh.png create mode 100644 resources/img/pause-wh.svg create mode 100644 resources/img/play-wh.png create mode 100644 resources/img/play-wh.svg diff --git a/resources/img/pause-wh.png b/resources/img/pause-wh.png new file mode 100644 index 0000000000000000000000000000000000000000..c8fcdfdbfda5c3d532aeb70e6e4f631a3f14393c GIT binary patch literal 187 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM0wlfaz7_+iCQlc~kP60Ri6am8zy5#vfBk>^ zpZ8fjdw&0)^FRLI{@?e1&Xk^qJwK1)j!7%9tyOL>7mc-Qy9i|`uI;q&*Ir;l+z2c4+PCMGF)<|+>Jo@ + + /> + /> + diff --git a/resources/img/play-wh.png b/resources/img/play-wh.png new file mode 100644 index 0000000000000000000000000000000000000000..b6b13efc45e95f33a1b4ebc0f08f74cc00f9fdac GIT binary patch literal 213 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM0wlfaz7_+iIi4<#Ar*{kFW=`nXeiPC@oeY+ zdL^Y(qPaWg$3N+N;-abP85ra>X~(qV3oSR+KDNBK{Mzol&)PRs7`Z(O>OarWz}hPE zpmO^n5%%OmW+6!lr_!ynq#Brcc@K0>V|(D^&Rno`IpYrF3k)`rSq~OAO4mO165n+z z;`XVCev_%~w}Zp?9hzhJ0xiH1 + + + \ No newline at end of file diff --git a/resources/js/photoinit.js b/resources/js/photoinit.js index 423288091..95a4ab433 100644 --- a/resources/js/photoinit.js +++ b/resources/js/photoinit.js @@ -4,6 +4,11 @@ function initPhotoSwipeFromDOM (gallerySelector) { let gallery; + var ssRunning = false, + ssOnce = false, + ssDelay = 2500 /*ms*/, + ssButtonClass = '.pswp__button--playpause'; + const parseThumbnailElements = function (container) { return $(container).find('>a').map(function () { const element = $(this); @@ -140,6 +145,18 @@ function initPhotoSwipeFromDOM (gallerySelector) { gallery.listen('beforeChange', resetMailForm); gallery.listen('close', resetMailForm); + setSlideshowState(ssButtonClass, false /* not running from the start */); + + // start timer for the next slide in slideshow after prior image has loaded + gallery.listen('afterChange', function() { + if (ssRunning && ssOnce) { + ssOnce = false; + setTimeout(gotoNextSlide, ssDelay); + } + }); + gallery.listen('destroy', function() { gallery = null; }); + + gallery.init(); }; @@ -196,6 +213,31 @@ function initPhotoSwipeFromDOM (gallerySelector) { photoBooth.toggleMailDialog(img); }); + /* slideshow management */ + $(ssButtonClass).on('click', function(e) { + // toggle slideshow on/off + setSlideshowState(this, !ssRunning); + }); + + function setSlideshowState(el, running) { + if (running) { + setTimeout(gotoNextSlide, ssDelay / 2.0 /* first time wait less */); + } + var title = running ? "Pause Slideshow" : "Play Slideshow"; + $(el).removeClass(running ? "play" : "pause") // change icons defined in css + .addClass(running ? "pause" : "play") + .prop('title', title); + ssRunning = running; + } + + function gotoNextSlide() { + if (ssRunning && !!gallery) { + ssOnce = true; + gallery.next(); + // start counter for next slide in 'afterChange' listener + } + } + $(gallerySelector).on('click', onThumbnailClick); } diff --git a/resources/sass/vendor/_photoswipe.scss b/resources/sass/vendor/_photoswipe.scss index a2b424b8c..2e708f0d2 100644 --- a/resources/sass/vendor/_photoswipe.scss +++ b/resources/sass/vendor/_photoswipe.scss @@ -35,3 +35,22 @@ width: 100%; } } + +/* set play/pause button */ +@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /*serve if resolution high enough & browser supports */ + .pswp--svg .pswp__button--playpause.play, .pswp--svg .pswp__button--playpause.play:before { + background-image: url('../img/play-wh.svg'); + } + .pswp--svg .pswp__button--playpause.pause, .pswp--svg .pswp__button--playpause.pause:before { + background-image: url('../img/pause-wh.svg'); + } +} +.pswp__button--playpause.play, .pswp__button--playpause.play:before { + background: url('../img/play-wh.png') 12px 12px/20px 20px no-repeat; +} +.pswp__button--playpause.pause, .pswp__button--playpause.pause:before { + background: url('../img/pause-wh.png') 12px 12px/20px 20px no-repeat; +} +.pswp__button { + outline: none; +} diff --git a/template/pswp.template.php b/template/pswp.template.php index ec7b3b8aa..52b317b0f 100644 --- a/template/pswp.template.php +++ b/template/pswp.template.php @@ -49,6 +49,9 @@ class="fa fa-times"> + + +