Struggling to create a photo gallery similar to Google Photos because of large image sizes - around 15mb - causing slow loading for users with poor connections.
Currently using a placeholder image while waiting for the full-size image to load, but encountering issues with right-clicking and viewing the full-size image which links to the small image file.
My main goal is to add a link within the modal to direct users to the full-size image.
https://jsfiddle.net/mikemaer/ghc9o1v6/10/
`function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
(() => {
'use strict';
// Page is loaded
const objects = document.getElementsByClassName('asyncImage');
Array.from(objects).map((item) => {
// Start loading image
const img = new Image();
img.src = item.dataset.src;
// Once image is loaded replace the src of the HTML element
img.onload = () => {
item.classList.remove('asyncImage');
return item.nodeName === 'IMG' ?
item.src = item.dataset.src :
item.style.thumbnail = `url(${item.dataset.src})`;
};
});
})();`
Example used a random image without the placeholder image.
Only relevant post found was this --- Modal image with download link and the only suggested solution was to implement PHP.
If anyone has advice for a beginner like me, it would be greatly appreciated.