jestov / grid-gallery Goto Github PK
View Code? Open in Web Editor NEWA simple and light Grid Gallery with pure JS
Home Page: https://jestov.github.io/grid-gallery/
A simple and light Grid Gallery with pure JS
Home Page: https://jestov.github.io/grid-gallery/
Firstly thank you for creating this. Absolutely love it!
Feature Request : Ability to specify a thumbnail/small image with a full size image as a popup instead of using full size images as thumbnails. Possibly using data-* attributes for the source of the large image?
<div class="gg-container">
<div class="gg-box">
<img src="img/thumb/your-image-1-sm.jpg" data-gg-src="img/your-image-1.jpg">
<img src="img/thumb/your-image-2-sm.jpg" data-gg-src="img/your-image-2.jpg">
<img src="img/thumb/your-image-3-sm.jpg" data-gg-src="img/your-image-3.jpg">
</div>
</div>
In some cases we need to dynamically write out the script tag for grid-gallery.js (e.g., when used in modals). In this case, if the container is destroyed and recreated, it will throw an "Uncaught SyntaxError: Identifier 'root' has already been declared" error because the constant root
is still in memory.
Steps to reproduce:
Fix: wrap everything in an IIFE to preserve variable scope.
(() => {
const root = document.querySelector("body, html");
...
})();
Hi, tested on PC OK, but on my iPhone 4s touch on tumbnail does nothing. I just see the gallery, but cannot open individual images.
I made two different configurations at the end of the main.js file:
gridGallery({
selector: "#main",
darkMode: false,
layout: "square",
gapLength: 0,
rowHeight: 500,
columnWidth: 400
});
gridGallery({
selector: "#main-vertical",
darkMode: false,
layout: "vertical",
gapLength: 1,
rowHeight: 800,
columnWidth: 400
});
However, only the top (selector "main") configuration will be loaded.
I want to apply ONLY the second, vertical configuration to my gallery:
<div class="gg-box" id="main-vertical">
<img src="resources/picture/cr1.jpg">
<img src="resources/picture/cr2.jpg">
</div>
It will just load the square "main" gallery, though...
Any way to get around this?
Thanks!
Hello,
This a great library. I was wondering if its possible to directly read images from a given folder without specifying the name in the index.html file? Basically, I would like to just put some images in a folder (no fixed format for the name, but must have the same extension like .jpg) and then specify the folder in the index.html file.
P.S.: I am very new to this and have no experience with either HTML and/or javascript, so apologies if the question seems too trivial.
Hello ,
thanks for the great stuff , i 've used it and it quite and clean :)
is there any option object , that i can pass properties in to control some aspects for this gallery, something like number of images in rows , or the width of the images and so on .
that would be a great addition.
If we have 2 images in gallery
<div class="gg-box">
<img src="img/1.jpg">
<img src="img/2.jpg">
</div>
and then:
Hello,
Is there a way I can show complete image but at smaller scale?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.