123 lines
4.6 KiB
HTML
123 lines
4.6 KiB
HTML
{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
|
|
<script defer src="{{ $masonry.RelPermalink }}"></script>
|
|
{{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
|
|
<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
// ========================= masonry =========================
|
|
var grid = document.querySelector('.grid');
|
|
var msnry = new Masonry(grid, {
|
|
itemSelector: '.grid-item',
|
|
columnWidth: '.grid-sizer',
|
|
percentPosition: true,
|
|
});
|
|
imagesLoaded(grid).on('progress', function () {
|
|
msnry.layout();
|
|
});
|
|
|
|
document.querySelectorAll('.grid-item').forEach(function(elem) {
|
|
elem.addEventListener('mouseenter', function() {
|
|
elem.querySelector('.grid-item__desc').style.display = 'block';
|
|
elem.querySelector('.grid-item__desc').style.opacity = 1;
|
|
elem.querySelector('.grid-item__desc--text').onclick = function (e) {
|
|
e.stopPropagation();
|
|
e.target.parentNode.previousElementSibling.click();
|
|
}
|
|
elem.querySelector('.grid-item__desc').onclick = function(e) {
|
|
e.target.previousElementSibling.click();
|
|
}
|
|
});
|
|
elem.addEventListener('mouseleave', function () {
|
|
elem.querySelector('.grid-item__desc').style.opacity = 0;
|
|
});
|
|
});
|
|
|
|
enquire.register("screen and (max-width:1200px)", {
|
|
match: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function(elem) {
|
|
elem.classList.add('quarter');
|
|
elem.classList.remove('fifth');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('quarter');
|
|
elem.classList.remove('fifth');
|
|
});
|
|
},
|
|
unmatch: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function (elem) {
|
|
elem.classList.add('fifth');
|
|
elem.classList.remove('quarter');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('fifth');
|
|
elem.classList.remove('quarter');
|
|
});
|
|
},
|
|
}).register("screen and (max-width:900px)", {
|
|
match: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function (elem) {
|
|
elem.classList.add('third');
|
|
elem.classList.remove('quarter');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('third');
|
|
elem.classList.remove('quarter');
|
|
});
|
|
},
|
|
unmatch: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function (elem) {
|
|
elem.classList.add('quarter');
|
|
elem.classList.remove('third');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('quarter');
|
|
elem.classList.remove('third');
|
|
});
|
|
},
|
|
}).register("screen and (max-width:700px)", {
|
|
match: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function (elem) {
|
|
elem.classList.add('half');
|
|
elem.classList.remove('third');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('half');
|
|
elem.classList.remove('third');
|
|
});
|
|
},
|
|
unmatch: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function (elem) {
|
|
elem.classList.add('third');
|
|
elem.classList.remove('half');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('third');
|
|
elem.classList.remove('half');
|
|
});
|
|
},
|
|
}).register("screen and (max-width:500px)", {
|
|
match: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function (elem) {
|
|
elem.classList.add('full');
|
|
elem.classList.remove('half');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('full');
|
|
elem.classList.remove('half');
|
|
});
|
|
},
|
|
unmatch: function () {
|
|
document.querySelectorAll('.grid-item').forEach(function (elem) {
|
|
elem.classList.add('half');
|
|
elem.classList.remove('full');
|
|
});
|
|
document.querySelectorAll('.grid-sizer').forEach(function (elem) {
|
|
elem.classList.add('half');
|
|
elem.classList.remove('full');
|
|
});
|
|
},
|
|
});
|
|
// ===========================================================
|
|
}
|
|
</script> |