Options
All
  • Public
  • Public/Protected
  • All
Menu

zoomwall.js GitHub release (latest by date) npm Coverage Status Node.js CI

zoomwall.js is a content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.

Visit ericleong.github.io/zoomwall.js for a demo.

install

For those using npm

$ npm install zoomwall.js

usage

html

First, add a reference to zoomwall.css in your HTML file, like this:

<link rel="stylesheet" type="text/css" href="zoomwall.css" />

Add the zoomwall class to the container element.

responsive images

To have the browser determine when to load a high resolution image, use responsive images.

<div id="gallery" class="zoomwall">
  <img
    srcset="01_lowres.jpg 200w, 01_highres.jpg 800w"
    sizes="(max-width: 1200px) 200px, 800px"
    src="01_lowres.jpg"
  />
  <img
    srcset="02_lowres.jpg 200w, 02_highres.jpg 800w"
    sizes="(max-width: 1200px) 200px, 800px"
    src="02_lowres.jpg"
  />
</div>

high resolution image

Include high resolution photos using the data-highres attribute of each <img> tag.

<div id="gallery" class="zoomwall">
  <img src="01_lowres.jpg" data-highres="01_highres.jpg" />
  <img src="02_lowres.jpg" data-highres="02_highres.jpg" />
</div>

javascript

See documentation. Remember to import the module.

import * as zoomwall from "zoomwall.js";

Run zoomwall.create() on the container element (#gallery in this example), after they have loaded.

window.onload = function () {
  zoomwall.create(document.getElementById("gallery"));
};

Enable support for paging through photos with the left and right arrow keys by setting the second argument to true, like this: zoomwall.create(<element>, true).

Index

Functions

Functions

create

  • create(blocks: HTMLElement, enableKeys?: boolean): void
  • Create a gallery with the provided HTMLElement.

    Parameters

    • blocks: HTMLElement

      contains the images that belong to the gallery

    • Default value enableKeys: boolean = false

      enables keyboard navigation

    Returns void

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc