v5-beta - add slide transition with keyboard and click button action?

[BilouMaster]

Hello, marvelous creator of this marvelous creation!

I think it would be perfect if there were a sliding animation when we use pswp with the keyboard or the right/left buttons, for now it jumps instantly to the next or previous image and it's a bit disappointing because I am sure that the core already have what it needs to add a simple sliding animation just like if we swiped it...

Is there a specific reason for the actual lack of transition?

Best regards!

Joke

[amkdev]

I am very much in favor of this!

[acwolff]

Yes please implement sliding animations!

[rbndelrio]

To anyone really wanting this feature, it's technically possible to force it. It seems like dimsemenov has intentions to add this feature but hasn't enabled it for stability. From my testing, it doesn't play well with gallery looping enabled.

Option 1: Fork and modify these lines

goTo(index, animate = false) {
  // ...
  const indexChanged = this.mainScroll.moveIndexBy(index - this.potentialIndex, animate);
  // ...
}

//... next
this.goTo(this.potentialIndex + 1, true);

//... prev
this.goTo(this.potentialIndex - 1, true);
//...

That's enough for my (very temporary) use case.

Option 2: Replacing the method after construction

const lightbox = new PhotoSwipeLightbox({ loop: false });
const customGoTo = (index, animate = false) => {
  const ctx = lightbox.pswp;
  index = ctx.getLoopedIndex(index);
  const indexChanged = ctx.mainScroll.moveIndexBy(index - ctx.potentialIndex, animate);

  if (indexChanged) {
    ctx.dispatch('afterGoto');
  }
}
lightbox.on('uiRegister', () => {
  lightbox.pswp.next = () => customGoTo(lightbox.pswp.potentialIndex + 1, true);
  lightbox.pswp.prev = () => customGoTo(lightbox.pswp.potentialIndex - 1, true);
});

I haven't tested the above but you get the idea

[acwolff]

@bndelrio I tried your Option 2 and I think it works!

Compare my album with transitions with the same album without Option 2.
You see now too transitions in the slide show!

The transition is rather fast, how can I make it longer?

@dimsemenov why is this a hidden feature?

[NickBodliev]

@acwolff I am not sure if you still need this, but I am sharing this anyway as it might be useful to others

The following snippet alters the transition duration (addition to the solution offered by @rbndelrio):

#pswp__items {
  transition-duration: .6s;
}

[acwolff]

@NickBodliev I am very interested, but where should I put your code?
I tried this:

import PhotoSwipeLightbox from './photoswipe-lightbox.esm.min.js'; 
  const options = { 
    transitionDuration: 600,

but this does not work.

[NickBodliev]

@acwolff the snippet I mentioned should be placed in the styles file of the component which uses photoswipe

[acwolff]

@NickBodliev I tried that already earlier, but that does not work either:

I added

<style>
#pswp__items {
  transition-duration: 1.6s;
}
</style>

To my main page https://andrewolff.jalbum.net/PhotoSwipeWeb-with-transitions/

The code of @rbndelrio is in page https://andrewolff.jalbum.net/PhotoSwipeWeb-with-transitions/res/initGallery.js

[NickBodliev]

Have you implemented the customToGo method? Are you using that method? The css would work without that
@acwolff

[acwolff]

Yes, in page https://andrewolff.jalbum.net/PhotoSwipeWeb-with-transitions/res/initGallery.js :

import PhotoSwipeLightbox from './photoswipe-lightbox.esm.min.js'; 
	const options = { 
	  gallerySelector: '#gallery', 
	  childSelector: 'a', 
	  counter: false, 
	  showHideAnimationType: 'zoom',
	  showAnimationDuration: transtime,
	  hideAnimationDuration: transtime,
	  bgOpacity:  1.0,
	  paddingTop: 0,
	  paddingBottom: 0,
	  wheelToZoom: true,
	  loop:  false,
	  imageClickAction: (releasePoint, e) => {  playpause() },  
	  tapAction: (releasePoint, e) => { if (isImage) playpause() },  
	  closeTitle: 'Sluit',
	  zoomTitle:  'Zoom in/uit (gebruik muis wiel op een PC)',
	  arrowPrevTitle: 'Vorige dia (pijl naar links toets)',
	  arrowNextTitle:  'Volgende dia (pijl naar rechts toets)',
	  mouseMovePan: true,
	  initialZoomLevel: 'fit',
	  secondaryZoomLevel: 'fill',
	  maxZoomLevel: 1,
	  mainClass:  'pswp--buttons-visible',	
 	  pswpModule: () => import('./photoswipe.esm.min.js')
 	}; 
	const lightbox = new PhotoSwipeLightbox(options);
	const customGoTo = (index, animate = false) => {
 	  const ctx = lightbox.pswp;
 	  index = ctx.getLoopedIndex(index);
	  const indexChanged = ctx.mainScroll.moveIndexBy(index - ctx.potentialIndex, animate);
	  if (indexChanged) {
		ctx.dispatch('afterGoto');
 	  }
	}
    lightbox.on('uiRegister', function() {
        lightbox.pswp.next = () => customGoTo(lightbox.pswp.potentialIndex + 1, true);
        lightbox.pswp.prev = () => customGoTo(lightbox.pswp.potentialIndex - 1, true);
        lightbox.pswp.ui.registerElement({
          name: 'custom-caption',
          order: 1,
          isButton: false,
          appendTo: 'root',
          html: 'Caption text',
          onInit: (el, pswp) => {
            lightbox.pswp.on('change', () => {
              const currSlideElement = lightbox.pswp.currSlide.data.element;
              let captionHTML = '';
              if (currSlideElement) {
                  captionHTML = currSlideElement.dataset.caption;
              } else  captionHTML = strCap[slide_index];
              if (captionHTML.length>0 && !isPansph) { 
                  el.style.display = "block";                 	
                  el.innerHTML = captionHTML;
                  if (captionHTML.indexOf("<audio") > -1) initTooltips();
              }
              else {
                 el.style.display = "none";
              }
            });
          }
        });

[NickBodliev]

@acwolff do you have the animation so far?

[acwolff]

I am not sure, look for your self to my implementation:

https://andrewolff.jalbum.net/PhotoSwipeWeb-with-transitions/

[NickBodliev]

@acwolff the animation looks great
It looks like you have already specified the transition duration and the animation works as expected

[acwolff]

@NickBodliev I am looking to the tansitions after I opened the ligthbox and go to the next slide. I don't see there a transition of 1.6 sec.

BTW I added the 1.6s style rule, but see in the F12 log 800ms:

photoswipe.css contains this:

/* defined via js:
  --pswp-transition-duration: 333ms; */

So apparently somewhere else this 800ms is defined.

[NickBodliev]

the 800ms trnasition duration is defined by Photoswipe (via JS). This is the duration of the open/close animation
You can change that with showAnimationDuration and hideAnimationDuration properties – the default value is 333ms (see more here)
@acwolff

[acwolff]

oh i'm a stupid klutz, i already used that parmeter! I have now set it to 1500ms, but that only affects the transition when opening and closing the lightbox, not the transition from slide to slide in the lightbox.

But showAnimationDuration and hideAnimationDuration do have the same values:

import PhotoSwipeLightbox from './photoswipe-lightbox.esm.min.js'; 
	const options = { 
	  gallerySelector: '#gallery', 
	  childSelector: 'a', 
	  counter: false, 
	  showHideAnimationType: 'zoom',
	  showAnimationDuration: 1500,
	  hideAnimationDuration: 1500,	

and still there is no 1500 ms transition from slide to slide in the lightbox.

[NickBodliev]

showAnimationDuration and hideAnimationDuration are responsible for opening/closing of the photoswipe only
the css I provided above is going to alter the animation duration between slides
@acwolff

[acwolff]

@NickBodliev I have added your code

#pswp__items {
  transition-duration: 1.6s;
}

to my css file res\common.css, and now it works as you can see in my test album:.

I have no idea why it did not work before!

Anyhow thanks for your help and patience!

Edit:

Cheered too early. it worked once, but not anymore
Can you show me a working album?

In Firefox I see that the 1.6s from my css file is overruled:

But the even the remaining 1500ms does not apply to the slide to slide transition.

[acwolff]

I tried:

#pswp__items {
  transition-duration: 1.6s !important;
}

But that does not help.

[arnowelzel]

JFTR: The proposal as suggested in #1765 (comment) seems to work with a current version now even with looping.

[acwolff]

@arnowelzel where / how did you define the transition-duration?

[arnowelzel]

@acwolff I didn't. I just use it as it is. See in action here (the integration is a WordPress plugin):

Demos:

https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/
https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/

Source: https://github.com/arnowelzel/lightbox-photoswipe

The relevant frontend code: https://github.com/arnowelzel/lightbox-photoswipe/blob/5.1.0/assets/ps5/frontend.js#L408-L425

[acwolff]

@arnowelzel thanks for the demo's.

I like to change the transition time, because you hardly see a transition effect with the default tgransition time of 800 ms,
but I have no idea how to do that with the standard minified Photoswipe library.

[arnowelzel]

@acwolff yes, the transition is quite fast - but personally I find it just right. You still can see that there is a transition, but you dont't feel like you have to wait for ages when swiping through a larger image collection (not all users may be aware that the keyboard shortcuts for left/right work even during the transition and they don't have to wait for it to complete before changing to the next image).

And for comparison: PhotoSwipe 4 was more or less the same - https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/