masonry-lightgallery 1.0.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/README.md

@@ -0,0 +1,2 @@
+# masonry-lightgallery
+

package/masonry-lightgallery.css

@@ -0,0 +1,72 @@
+.mosaic-lightgallery-data {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.grid-item {
+  margin-bottom: 12px;
+}
+
+.image-grid {
+  margin: 0 auto;
+}
+
+.grid-item img {
+  width: 380px;
+}
+
+@media (max-width: 430px) {
+  .image-grid {
+    margin: 0;
+  }
+
+  .grid-item img {
+    width: 100vw;
+  }
+}
+
+.lg-outer {
+  background: white;
+}
+
+.lg-outer button {
+  background: white;
+  color: black;
+}
+
+.lg-outer button:hover {
+  color: #aaa !important;
+}
+
+.lg-toolbar button {
+  color: black !important;
+}
+
+.lg-toolbar button:hover {
+  color: black !important;
+}
+
+.lg-toolbar .lg-counter {
+  color: black !important;
+	font-size: 18px;
+	font-weight: 600;
+}
+
+.lg-toolbar .lg-download, .lg-toolbar .lg-download:hover {
+  color: black !important;
+}
+
+.lg-sub-html {
+  color: black;
+  max-height: 20vh;
+  overflow-y: auto;
+  padding-top: 2px;
+  padding-bottom: 20px;
+}
+
+@media (max-height: 700px) {
+  .lg-sub-html {
+    max-height: 100px;
+  }
+}

package/masonry-lightgallery.js

@@ -0,0 +1,59 @@
+export function linesToSections(lines, baseImageUrl = 'gallery/tr/tr-', baseThumbnailUrl = 'gallery/tr-sm/tr-sm-') {
+    const sections = []
+    for (let i = 0; i < lines.length; i += 2) {
+        const section = {};
+        const titleLine = lines[i].trim();
+        section.description = lines[i + 1].trim();
+        section.title = titleLine.trim();
+        const id = parseInt(titleLine.split('. ')[0].trim());
+        // format with 3 zero padding
+        section.id = id.toString().padStart(3, '0');
+        section.imageUrl = `${baseImageUrl}${section.id}.jpg`;
+        section.imageThumbnailUrl = `${baseThumbnailUrl}${section.id}.jpg`;
+
+        sections.push(section);
+    }
+
+    return sections;
+}
+
+export function initMasonryLightGallery(imageGridContainer, sections) {
+    // create grid items
+    sections.forEach(section => {
+        const gridItem = document.createElement('div');
+        gridItem.classList.add('grid-item');
+        const link = document.createElement('a');
+        link.href = section.imageUrl;
+        const img = document.createElement('img');
+        img.src = section.imageThumbnailUrl;
+        // img.alt = section.title;
+        const caption = `<div id='caption-${section.id}'>${section.title}<br/><b>${section.description}</b></div>`;
+        link.setAttribute('data-sub-html', caption);
+        link.appendChild(img);
+        gridItem.appendChild(link);
+        imageGridContainer.appendChild(gridItem);
+    });
+
+
+    const msnry = new Masonry(imageGridContainer, {
+        // options
+        itemSelector: '.grid-item',
+        columnWidth: 380,
+        gutter: 12,
+        fitWidth: true
+
+    });
+
+    // layout Masonry after each image loads
+    $(imageGridContainer).imagesLoaded().progress(function () {
+        msnry.layout();
+    });
+
+    lightGallery(imageGridContainer, {
+        plugins: [lgZoom],
+        speed: 0,
+        selector: '.grid-item a',
+        allowMediaOverlap: false,
+        mobileSettings: { controls: false, showCloseIcon: true, download: false, }
+    });
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "masonry-lightgallery",
+  "version": "1.0.0",
+  "description": "lightgallery with masonry layout for thumbs",
+  "homepage": "https://github.com/juozasg/masonry-lightgallery#readme",
+  "bugs": {
+    "url": "https://github.com/juozasg/masonry-lightgallery/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/juozasg/masonry-lightgallery.git"
+  },
+  "license": "GPL",
+  "author": "Juozas Gaigalas",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}