diff options
| -rw-r--r-- | resources/css/style.css | 20 | ||||
| -rw-r--r-- | resources/js/gallery.js | 63 | ||||
| -rw-r--r-- | templates/gallery.crotmp | 2 |
3 files changed, 61 insertions, 24 deletions
diff --git a/resources/css/style.css b/resources/css/style.css index 7e8f72d..0c51bab 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -60,6 +60,18 @@ input, .alert { img, .text { width: 400px; } .heading { width: 380px; } +@media only screen and (max-width: 512px) { + img, .text { width: 368px; } + .heading { width: 350px; } +} +@media only screen and (max-width: 450px) { + img, .text { width: 350px; } + .heading { width: 330px; } +} +@media only screen and (max-width: 400px) { + img, .text { width: 330px; } + .heading { width: 310px; } +} .heading { box-shadow: var(--blue-intense-bg) 0px 0px 0px 2px inset, @@ -83,15 +95,15 @@ img, .text { width: 400px; } padding: 1em; } -.gallery { +#gallery { margin: auto; } -.gallery img { +#gallery img { transform-origin: center; transition: 0.5s; } -.gallery:hover img { opacity: 0.5; } -.gallery img:hover { +#gallery:hover img { opacity: 0.5; } +#gallery img:hover { transform: scale(1.1); box-shadow: var(--bg-active) 0px 20px 30px -10px; opacity: 1; diff --git a/resources/js/gallery.js b/resources/js/gallery.js index f9be5e2..ae0fd90 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -1,24 +1,22 @@ 'use strict'; -/* import Bricks from '/bricks.js'; */ - -// mq - the minimum viewport width (String CSS unit: em, px, rem) -// columns - the number of vertical columns -// gutter - the space (in px) between the columns and grid items // image width. const imgW = 400; +// Gallery using bricks.js //////////////////////////////////////////////////// + +// mq - the minimum viewport width (String CSS unit: em, px, rem) +// columns - the number of vertical columns +// gutter - the space (in px) between the columns and grid items const sizes = [ { columns: 1, gutter: 30 }, - { mq: ((imgW * 2.2) + 40) + "px", columns: 2, gutter: 35 }, - { mq: ((imgW * 3.5) + 50) + "px", columns: 3, gutter: 50 }, - { mq: ((imgW * 4.4) + 50) + "px", columns: 4, gutter: 50 }, - // { mq: '768px', columns: 2, gutter: 25 }, - // { mq: '1280px', columns: 3, gutter: 50 } + { mq: Math.round((imgW * 2.2) + 40) + "px", columns: 2, gutter: 35 }, + { mq: Math.round((imgW * 3.5) + 50) + "px", columns: 3, gutter: 50 }, + { mq: Math.round((imgW * 4.4) + 50) + "px", columns: 4, gutter: 50 }, ]; const instance = Bricks({ - container: '.gallery', + container: '#gallery', packed: 'data-packed', sizes: sizes }); @@ -30,12 +28,39 @@ instance // start it up, when the DOM is ready. note that if images are in the // grid, you may need to wait for document.readyState === 'complete'. -document.addEventListener('DOMContentLoaded', eve => { - document.addEventListener('readystatechange', event => { - if (event.target.readyState === 'complete') { - instance - .resize(true) // bind resize handler - .pack() // pack initial items +document.addEventListener('DOMContentLoaded', event => { + instance.resize(true).pack(); // bind resize handler & pack initial items +}); +document.addEventListener('readystatechange', event => { + if (event.target.readyState === 'complete') { + instance.pack(); + } +}); + +// Re-packing after loading images //////////////////////////////////////////// + +function onImagesLoaded(container, event) { + let images = container.getElementsByTagName("img"); + let loaded = images.length; + for (let i = 0; i < images.length; i++) { + if (images[i].complete) { + loaded--; } - }) -}) + else { + images[i].addEventListener("load", function () { + loaded--; + if (loaded == 0) { + event(); + } + }); + } + if (loaded == 0) { + event(); + } + } +} + +const container = document.getElementById("gallery"); +onImagesLoaded(container, function () { + instance.pack(); +}); diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp index 021b366..25c55ea 100644 --- a/templates/gallery.crotmp +++ b/templates/gallery.crotmp @@ -1,6 +1,6 @@ <:use 'templates/base.crotmp'> <|page(.title)> -<div class="gallery"> +<div id="gallery"> <@gallery : $i> <?{ $i.<type> eq 'img' }> |