All Projects → ericleong → Zoomwall.js

ericleong / Zoomwall.js

Licence: mit
A content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.

Programming Languages

184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Zoomwall.js

React Grid Gallery
Justified image gallery component for React
Stars: ✭ 571 (+124.8%)
Mutual labels:  photos, gallery, lightbox
Light, dependency free, responsive gallery script
Stars: ✭ 27 (-89.37%)
Mutual labels:  photos, gallery, lightbox
a modern photo / video gallery and lightbox [JS library]
Stars: ✭ 488 (+92.13%)
Mutual labels:  photos, gallery, lightbox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Stars: ✭ 7,261 (+2758.66%)
Mutual labels:  gallery, lightbox
Android 3rd party library to make implementing galleries more easier
Stars: ✭ 160 (-37.01%)
Mutual labels:  library, gallery
"Image Album" — or "Photo Album" if you like that better — View( Controller) for all crazy iOS developers out there...
Stars: ✭ 199 (-21.65%)
Mutual labels:  library, gallery
📸 Instagram-like image picker & filters for iOS
Stars: ✭ 3,661 (+1341.34%)
Mutual labels:  library, gallery
Simple image viewer component for React
Stars: ✭ 44 (-82.68%)
Mutual labels:  gallery, lightbox
MOVED TO GITLAB! --- A Web 2.0 Photo Gallery Done Right via Static JSON, Dynamic Javascript and a bit of php for sharing
Stars: ✭ 12 (-95.28%)
Mutual labels:  photos, gallery
Very basic gallery grid based on gatsby-image
Stars: ✭ 116 (-54.33%)
Mutual labels:  gallery, lightbox
Dead simple solution to add a photo gallery to a Jekyll site.
Stars: ✭ 47 (-81.5%)
Mutual labels:  photos, gallery
🌌 A slick, yet tiny lightbox gallery for Vue.js
Stars: ✭ 93 (-63.39%)
Mutual labels:  gallery, lightbox
An easy to use Image Viewer that is inspired by Facebook
Stars: ✭ 1,071 (+321.65%)
Mutual labels:  library, gallery
A small customizable library useful to handle an gallery image pick action built-in your app. 🌄🌠
Stars: ✭ 629 (+147.64%)
Mutual labels:  library, gallery
"Fx Fotos" is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like "box", "Dfinity", "Filecoin" and "Crust".
Stars: ✭ 620 (+144.09%)
Mutual labels:  photos, gallery
An initial implementation of a "showcase" view( controller) for iOS apps... Visualizes images, videos and PDF files beautifully! (by @pittleorg) [meta: image, photo, video, document, pdf, album, gallery, showcase, gallery, iOS, iPhone, iPad, component, library, viewer]
Stars: ✭ 395 (+55.51%)
Mutual labels:  library, gallery
A complete guide on exiting Google, Amazon or any proprietary service Photos storage with all the features you would want.
Stars: ✭ 143 (-43.7%)
Mutual labels:  photos, gallery
🏞 A Gatsby Theme for adding a gallery to your site.
Stars: ✭ 40 (-84.25%)
Mutual labels:  photos, gallery
Self hosted alternative to Google Photos
Stars: ✭ 2,587 (+918.5%)
Mutual labels:  photos, gallery
The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web
Stars: ✭ 324 (+27.56%)
Mutual labels:  library, gallery

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 for a demo.


For those using npm

$ npm install zoomwall.js



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">
    srcset="01_lowres.jpg 200w, 01_highres.jpg 800w"
    sizes="(max-width: 1200px) 200px, 800px"
    srcset="02_lowres.jpg 200w, 02_highres.jpg 800w"
    sizes="(max-width: 1200px) 200px, 800px"

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" />


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 () {

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).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].