usecueweb development

Tiled Mosaic Gallery by Usecue

Close
  • readme.txt
  • index.html
  • mosaic.js

What is it?

While converting a website from WordPress to Hugo and needed an equivalent to the Tiled Image Gallery from Wordpress. I wanted the Tiled Mosaic style, but that was a little too complex, as it also contains colspans. I came up with this as an alternative.

How to use it?

It requires only Javascript and a simple HTML structure, as illustrated below:

<div class="mosaic-gallery">
   <a href="full_img.jpg">
      <img src="thumb_img.jpg" />
   </a>
   ...
</div>
<script src="mosaic.js"></script>

<!-- optional -->
<link rel="stylesheet" href="lightbox.css" />
<script src="lightbox.js"></script>

Features

This whole javascript is only a few kilobytes large, so it loads relatively quickly. It is fully responsive and has a debounce function that limits the redraws to 50ms, preventing it from being CPU-heavy. Aestheticly, it aims for about 1 image every 700px of width. The images always fill out nicely and the code prevents subpixel issues. Images have a minimum size, which turns the gallery into a list of images on mobile.

License

This code is licensed WTFPL.

 1<div class="mosaic-gallery">
 2    <a href="large01.jpg">
 3        <img src="01.jpg" alt="01" loading="lazy" />
 4    </a><a href="large02.jpg">
 5        <img src="02.jpg" alt="02" loading="lazy" />
 6    </a><a href="large03.jpg">
 7        <img src="03.jpg" alt="03" loading="lazy" />
 8    </a><a href="large04.jpg">
 9        <img src="04.jpg" alt="04" loading="lazy" />
10    </a><a href="large05.jpg">
11        <img src="05.jpg" alt="05" loading="lazy" />
12    </a><a href="large06.jpg">
13        <img src="06.jpg" alt="06" loading="lazy" />
14    </a><a href="large07.jpg">
15        <img src="07.jpg" alt="07" loading="lazy" />
16    </a><a href="large08.jpg">
17        <img src="08.jpg" alt="08" loading="lazy" />
18    </a><a href="large09.jpg">
19        <img src="09.jpg" alt="09" loading="lazy" />
20    </a><a href="large10.jpg">
21        <img src="10.jpg" alt="10" loading="lazy" />
22    </a><a href="large11.jpg">
23        <img src="11.jpg" alt="11" loading="lazy" />
24    </a><a href="large12.jpg">
25        <img src="12.jpg" alt="12" loading="lazy" />
26    </a><a href="large13.jpg">
27        <img src="13.jpg" alt="13" loading="lazy" />
28    </a><a href="large14.jpg">
29        <img src="14.jpg" alt="14" loading="lazy" />
30    </a><a href="large15.jpg">
31        <img src="15.jpg" alt="15" loading="lazy" />
32    </a><a href="large16.jpg">
33        <img src="16.jpg" alt="16" loading="lazy" />
34    </a><a href="large17.jpg">
35        <img src="17.jpg" alt="17" loading="lazy" />
36    </a>
37</div>
38
39<script src="/demos/mosaic/mosaic.js"></script>
40
41<link rel="stylesheet" href="/demos/lightbox/lightbox.css" />
42<script src="/demos/lightbox/lightbox.js"></script>
  1const gallery = document.querySelector('div.mosaic-gallery');
  2document.body.style.overflowX = 'hidden';
  3gallery.style.width = '100%';
  4gallery.style.display = 'flex';
  5gallery.style.flexWrap = 'wrap';
  6gallery.style.overflow = 'hidden';
  7gallery.style.padding = 0;
  8gallery.style.margin = 0;
  9const links = Array.from(gallery.querySelectorAll('a'));
 10links.forEach(function(image) {
 11  image.style.display = 'inline-block';
 12  image.style.verticalAlign = 'bottom';
 13  image.style.padding = 0;
 14  image.style.margin = 0;
 15  image.style.border = 'none';
 16  image.style.textDecoration = 'none';
 17  image.querySelector('img').style.display = 'inline-block';
 18  image.querySelector('img').style.margin = 0;
 19  image.querySelector('img').style.border = 0;
 20  image.querySelector('img').style.verticalAlign = 'bottom';
 21  image.querySelector('img').style.lineHeight = 0;
 22  image.querySelector('img').style.marginBottom = '4px';
 23});
 24
 25function justifyGallery() {
 26    gallery.style.width = '100%';
 27    const containerWidth = Math.floor(gallery.getBoundingClientRect().width);
 28    const images = Array.from(gallery.querySelectorAll('img'));
 29    //set data-ratio, based on width and height attribute to loaded images if not set
 30    images.forEach(function(img) {
 31        if(!img.dataset.ratio && img.naturalWidth) {
 32            if(img.naturalWidth && img.naturalHeight) {
 33                img.dataset.ratio = img.naturalWidth / img.naturalHeight;
 34            }
 35        }
 36    });
 37    const margin = 4; // px, space between images
 38    const maxImageWidth = 700; // px
 39    const minImagesPerRow = Math.ceil(containerWidth/maxImageWidth);
 40    const maxImagesLastRow = Math.ceil(containerWidth/maxImageWidth)+1;
 41
 42    let rows = [];
 43    let idx = 0;
 44
 45    // Build rows aiming for minImagesPerRow images per row, but allow more if needed
 46    while (idx < images.length) {
 47        let row = [];
 48        let rowRatios = 0;
 49        let rowEnd = false;
 50
 51        while (!rowEnd && idx < images.length) {
 52            const img = images[idx];
 53            const ratio = parseFloat(img.dataset.ratio) || 1;
 54            row.push({ img, ratio });
 55            rowRatios += ratio;
 56
 57            const gutters = (row.length - 1) * margin;
 58            let rowHeight = (containerWidth - gutters) / rowRatios;
 59            let widths = row.map(({ ratio }) => Math.round(rowHeight * ratio));
 60            let tooWide = widths.some(w => w > maxImageWidth);
 61
 62            // If we have at least minImagesPerRow and no image is too wide, break
 63            if ((row.length >= minImagesPerRow && !tooWide) || idx === images.length - 1) {
 64                rowEnd = true;
 65            } else if (tooWide && idx < images.length - 1) {
 66                idx++;
 67            } else {
 68                rowEnd = true;
 69            }
 70        }
 71
 72        rows.push({ row, rowRatios });
 73        idx++;
 74    }
 75
 76    // Ensure last row has at least minImagesPerRow images (unless total images < 3 or gallery is narrow)
 77    while (
 78        rows.length > 1 &&
 79        rows[rows.length - 1].row.length < minImagesPerRow &&
 80        containerWidth >= 600
 81    ) {
 82        const lastRow = rows.pop();
 83        rows[rows.length - 1].row = rows[rows.length - 1].row.concat(lastRow.row);
 84        rows[rows.length - 1].rowRatios += lastRow.rowRatios;
 85    }
 86
 87    // If last row has more than maxImagesLastRow images, move extras to previous rows
 88    while (
 89        rows.length > 1 &&
 90        rows[rows.length - 1].row.length > maxImagesLastRow
 91    ) {
 92        const lastRow = rows[rows.length - 1];
 93        const prevRow = rows[rows.length - 2];
 94
 95        if (lastRow.row.length > maxImagesLastRow) {
 96            const moved = lastRow.row.shift();
 97            lastRow.rowRatios -= moved.ratio;
 98            prevRow.row.push(moved);
 99            prevRow.rowRatios += moved.ratio;
100        } else {
101            break;
102        }
103    }
104
105    rows.forEach(({ row, rowRatios }) => {
106        const gutters = (row.length - 1) * margin;
107        let rowHeight = (containerWidth - gutters) / rowRatios;
108
109        let widths = row.map(({ ratio }) => Math.round(rowHeight * ratio));
110        let roundedHeight = Math.round(rowHeight);
111
112        let totalWidth = widths.reduce((a, b) => a + b, 0) + gutters;
113        let diff = containerWidth - totalWidth;
114
115        widths[widths.length - 1] += diff;
116
117        row.forEach(({ img }, i) => {
118            img.style.height = `${roundedHeight}px`;
119            img.style.width = `${widths[i]}px`;
120            img.style.marginRight = (i < row.length - 1) ? `${margin}px` : '0';
121        });
122    });
123    gallery.style.width = containerWidth + 'px';
124}
125
126function debounce(fn, delay) {
127    let timeoutId;
128    return function (...args) {
129        clearTimeout(timeoutId);
130        timeoutId = setTimeout(() => {
131            fn.apply(this, args);
132        }, delay);
133    };
134}
135
136// Debounce it with 50ms delay
137const debouncedResize = debounce(justifyGallery, 50);
138
139// Attach to event
140window.addEventListener("resize", function() {
141    debouncedResize();
142});
143
144// When images load, re-justify gallery
145gallery.querySelectorAll('img').forEach(function(img) {
146    img.addEventListener('load', function() {
147        debouncedResize();
148    });
149});
150
151justifyGallery();