Pure JavaScript / CSS Powered Photo Gallery Popup – zoomwall.js

Category: Gallery , Javascript | November 1, 2019
Author: ericleong
Views Total: 4,028
Official Page: Go to website
Last Update: November 1, 2019
License: MIT

Preview:

Pure JavaScript / CSS Powered Photo Gallery Popup – zoomwall.js

Description:

zoomwall.js is a JavaScript library for creating a neat, compact thumbnail grid which expands into a fullscreen gallery lightbox as you click on a thumbnail image.

How to use it:

Import the required zoomwall.css stylesheet in the head section.

<link rel="stylesheet" href="zoomwall.css">

Import the zoomwall.js script into your document, before the closing body tag.

<script src="zoomwall.js"></script>

Add thumbnails with data-highres attribute pointing to the high resolution photos into your document.

<img src="thumb-1" data-highres="highres-1.jpg">
<img src="thumb-2" data-highres="highres-2.jpg">
<img src="thumb-3" data-highres="highres-3.jpg">
<img src="thumb-4" data-highres="highres-4.jpg">
  ...

Initialize the photo gallery.

window.onload = function() {
  zoomwall.create(document.getElementById('zoomwall'), true);
};

Changelog:

11/01/2019

  • v1.1.1

You Might Be Interested In:


One thought on “Pure JavaScript / CSS Powered Photo Gallery Popup – zoomwall.js

  1. Shawn

    Sorry, I’m a total noob. Where does the “initialize photo gallery” code go exactly? The HTML? The CSS? Thanks!

    Reply

Leave a Reply