grid-gallery
grid-gallery copied to clipboard
Thumbnail + Full size options?
Firstly thank you for creating this. Absolutely love it!
Feature Request : Ability to specify a thumbnail/small image with a full size image as a popup instead of using full size images as thumbnails. Possibly using data-* attributes for the source of the large image?
<div class="gg-container">
<div class="gg-box">
<img src="img/thumb/your-image-1-sm.jpg" data-gg-src="img/your-image-1.jpg">
<img src="img/thumb/your-image-2-sm.jpg" data-gg-src="img/your-image-2.jpg">
<img src="img/thumb/your-image-3-sm.jpg" data-gg-src="img/your-image-3.jpg">
</div>
</div>
Thank you, I am pleased that this is useful.
Thanks for your recommendation, I considered it initially, but the goal of using large images as thumbnails is not to have a double load of images, what would be the objective and / or benefit of adding small images as thumbnails?
I understand your point of view and I agree.
I guess what I was requesting is having a feature to lazy load larger versions of the image when a user clicks on the thumbnail instead of using the hires images as thumbnails and full size images all in one go .In most cases, a photo gallery will consist of hundreds of phots on one page and having to load all the hi-res versions in on go isn't the best purely because of page load times and bandwidth.
This feature will be extremely helpful for static sites where in most cases there will be thumbnail images based on the original images.
Also, thank you for taking the time out to replying to this request :-)
I understand, i'm going to work on this feature in next days, thanks for your request!
I made some modifications to grid-gallery.js to load the thumbnails (_thumb) in the grid view, but when a photo is clicked the full size is loaded:
var route = currentImg.src;
var route = route.replace("_thumb", "");
imgItem.innerHTML = '<img src="' + prevImg.src.replace("_thumb", "") + '">';
It's a bit dirty, but works fine for me.
Thanks @harmenhoek, it works like a treat.