A simple and light Grid Gallery
https://jestov.com/grid-gallery/
- Add a link to the css file in your
<head>:
<link rel="stylesheet" type="text/css" href="css/grid-gallery.css"/>
// Or for the minified file, add this:
<link rel="stylesheet" type="text/css" href="css/grid-gallery.min.css"/>- On your
<body>tag add:
<div class="gg-container">
<div class="gg-box">
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
</div>- Before your closing
<body>tag add:
<script type="text/javascript" src="js/grid-gallery.js"></script>
// Or for the minified file, add this:
<script type="text/javascript" src="js/grid-gallery.min.js"></script>Can have multiple galleries:
<div class="gg-container">
<div class="gg-box"> <!-- first gallery --->
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
<div class="gg-box"> <!-- second gallery -->
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
</div>| Option | Type | Default | Description | options |
|---|---|---|---|---|
| selector | string | null | Element to which the settings are applied to customize the options of a specific gallery | ".class", "#id" |
| darkMode | boolean | false | Enable a dark theme for the gallery | true |
| layout | string | "vertical" | Adapts the layout of the gallery box | "horizontal", "square" |
| gapLength | number | 2 | Modify the thickness in pixels of the gaps between images | |
| rowHeight | number | 200 | Modify the height of images | |
| columnWidth | number | 220 | Customize the width of images |
<div class="gg-container">
<div class="gg-box"> <!-- This gallery takes it the default values -->
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
<div class="gg-box" id="square-dark">
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
<div class="gg-box" id="horizontal-dark">
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
</div>After the main JS file, add:
gridGallery({
selector: "#square-dark",
darkMode: true,
layout: "square",
gapLength: 4,
rowHeight: 180,
columnWidth: 200
});
gridGallery({
selector: "#horizontal-dark",
darkMode: true,
layout: "horizontal",
gapLength: 10,
rowHeight: 150,
columnWidth: 190
});<div class="gg-container">
<div class="gg-box square-gallery">
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
<div class="gg-box square-gallery">
<img src="img/your-image-1.jpg">
<img src="img/your-image-2.jpg">
<img src="img/your-image-n.jpg">
</div>
</div>After the main JS file, add:
gridGallery({
selector: ".square-gallery",
layout: "square",
gapLength: 1,
columnWidth: 200
});All images from Unsplash
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent