61 lines
1.7 KiB
JavaScript
61 lines
1.7 KiB
JavaScript
// Modern gallery init: wait for images to decode, then init Isotope/Masonry
|
|
(function(){
|
|
'use strict';
|
|
|
|
function waitForImages(container) {
|
|
var imgs = Array.prototype.slice.call(container.querySelectorAll('img'));
|
|
var promises = imgs.map(function(img){
|
|
try {
|
|
if (!img.complete) {
|
|
return img.decode().catch(function(){ /* ignore */ });
|
|
}
|
|
// already complete: still attempt decode if supported
|
|
return img.decode ? img.decode().catch(function(){}) : Promise.resolve();
|
|
} catch (e) {
|
|
return Promise.resolve();
|
|
}
|
|
});
|
|
return Promise.all(promises);
|
|
}
|
|
|
|
async function initGallery() {
|
|
var grid = document.querySelector('.gallery-grid');
|
|
if (!grid) return;
|
|
|
|
try {
|
|
await waitForImages(grid);
|
|
} catch (e) {
|
|
// continue even on failures
|
|
}
|
|
|
|
// Prefer Isotope (legacy code included it). Fall back to Masonry.
|
|
if (window.Isotope) {
|
|
// eslint-disable-next-line no-unused-vars
|
|
var iso = new Isotope(grid, {
|
|
itemSelector: '.photo_frame',
|
|
layoutMode: 'masonry',
|
|
masonry: { columnWidth: '.photo_frame', gutter: 12 },
|
|
percentPosition: true,
|
|
fitWidth: true
|
|
});
|
|
} else if (window.Masonry) {
|
|
// eslint-disable-next-line no-unused-vars
|
|
var m = new Masonry(grid, {
|
|
itemSelector: '.photo_frame',
|
|
columnWidth: '.photo_frame',
|
|
percentPosition: true,
|
|
gutter: 12,
|
|
fitWidth: true
|
|
});
|
|
}
|
|
}
|
|
|
|
// Auto-run when DOM ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initGallery);
|
|
} else {
|
|
initGallery();
|
|
}
|
|
|
|
})();
|