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

Category: Gallery , Javascript | June 16, 2015
Author: ericleong
Views Total: 3,478
Official Page: Go to website
Last Update: June 16, 2015
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);
};

You Might Be Interested In:


Leave a Reply