Today I'd like to share a very simple trick which seems a bit underrepresentated in the documentation of jquery.photoswipe (built on Photoswipe): How to simply provide a photoswipe gallery function using the following class based markup:
For more see https://github.com/yaquawa/jquery.photoswipe
There you can find the following description:
slideSelector
The selector of slides, the default selector is 'img'.
Make sure you include a img tag inside of the selected element, or you can just use a "bare img tag" just like the above sample markup.
If this selector indicates an a tag, the attribute href will be used as the "original image url" of that image.
If this selector indicates an a tag, and the value of the attribute href begin with the # that point to an element, the inner html of the pointed element will be shown.
And that's our simple trick! Just implement:
$('.photoswipe-gallery').photoSwipe('a',
{
showHideOpacity: true,
getThumbBoundsFn: false
},
{
'gettingData':
function (index, item) {
// Get the size from the the large image.
// We don't want to provide data attributes manually so we recalculate the size
// on opening the large image here:
var self = this;
var img = new Image();
img.onload = function () {
item.w = this.width;
item.h = this.height;
self.updateSize(true);
};
img.src = item.src;
}
});
And that's it!
The helper function in "gettingData" is required to recalculate the size of the large image to display it larger than the thumbnail image. That saves us from manual data attributes.
This is very very simple, but helpful because the fallback works even if JavaScript fails and the large image will open on click. You don't need heavy implementations for this simple use-case anymore.
