msrc

I’m not sure if I understand you. There was never a “msrc: $el.find(‘img’).attr(‘src’),” in the script. What exactly are you talking about?

And what exactly do you mean with “The plugin functions more beautiful with it.”?

Hi Arno,

I always thought you were re-animating the old photoswipe plugin which can also be found at the plugin at wordpress.
I use the old plugin (with a little rewriting) with my Enfold theme and got it working. On localhost I am testing your plugin.

While following your developments on your plugin, I see you are doing a great job. compliments.

What did not work nicely with your plugin was the appearance of the image within the lightbox. Photoswipe should first show the smaller size image in the lightbox and display the high res as soon it is loaded. This was because in the /js/photoswipe.js file after line 44 your plugin was missing the line “msrc: $el.find(‘img’).attr(‘src’),”. At the your plugin, the lightbox got a grey background, and will show the loading of the image file.

Try it and see how your images will be displayed.

Keep on the good work!

regards,

roger

I see. The problem with the msrc: parameter is, that it does not work well when the thumbnail is not the same aspect ratio as the linked image.

Also see the FAQ of PhotoSwipe about this, section “My thumbnails are square, but large images have different dimensions …”:

https://photoswipe.com/documentation/faq.html

As an example see this gallery on my website with the msrc: parameter added (I’ll remove that modification in a couple of days):

https://arnowelzel.de/en/back-from-finland

The thumbnails are squares, the large pictures not. So when you click a thumbnail, you can see how the thumbnail will be distorted until it fills the final image size – which is not a square. You can see how weird the picture looks for a moment before the higher resolution image will be loaded and “snaps” into place. I decided having a grey background is better then this weird animation.

Therefore I think a better approach might be to remove the grey background during the loading sequence within PhotoSwipe. You can do this by adding display: none to the basic PhotoSwipe UI CSS (lib/photoswipe.css):

.pswp__img--placeholder--blank {
  background: #222;
  display: none; }

(I mentioned opacity: 0 before, but hiding the whole placeholder is better).

You can see this in action here:

https://criticalmass-augsburg.de/mai-2018-ueber-220-mitfahrer-innen

I will include this in the next update.

• This reply was modified 5 years, 11 months ago by Arno Welzel. Reason: Changed suggestions for hiding the image placeholder