10 Best Galleries In Pure JavaScript & CSS (2023 Update)

A gallery lets you showcase your images, products, and any other web content in an elegant way.

Here is a list of the 10 Best Galleries implemented in Vanilla JavaScript and/or pure HTML/CSS/CSS3.

I hope you like it, and don’t forget to spread the world.

Originally Published Dec 13 2017, updated Mar 07 2023

1. Image Gallery For Mobile Devices – PhotoSwipe

A Vanilla JavaScript Image Gallery designed for both Mobile and Touch Devices. It provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

Image Gallery For Mobile Devices - PhotoSwipe

[Demo] [Download]


2. Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery

A responsive, touch-enabled, dependency-free JavaScript lightbox gallery library that enables you to present various types of media (images, videos, etc) in a fullscreen, scalable, navigatable, shareable, downloadable and CSS3 animated gallery popup.

Responsive Lightbox Gallery With Pure JavaScript And CSS3 – lightGallery

[Demo] [Download]


3. Minimalist Touch-friendly Gallery In JavaScript

A minimalist, dynamic, responsive, touch-enabled photo gallery built using pure JavaScript and CSS grid layout.

Minimalist Touch-friendly Gallery In JavaScript

Demo Download


4. zoomwall.js

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

zoomwall.js

Demo Download


5. Portfolio Generator In Pure JavaScript – Gallery.js

A pure JS based photo gallery generator which allows you to quickly create a photography portfolio page from JSON data.

Portfolio Generator In Pure JavaScript – Gallery.js

[Demo] [Download]


6. Google Images Style Thumbnail Grid with Pure JavaScript – FlexImages

A simple vanilla JavaScript library to create a responsive fluid thumbnail gallery that supports images, videos, iframes, plain text and more. Inspired by Flickr and Google Images.

Google Images Style Thumbnail Grid with Pure JavaScript – FlexImages

[Demo] [Download]


7. Responsive Justified Photo Grid Layout With Pure CSS – flexbin.css

A lightweight, flexible CSS library which lets you create responsive, neat, justified grid layout for showcasing your photos as you seen on Google Image Search and Flickr. Heavily based on CSS3 flexbox and fully customizable via SCSS.

Responsive Justified Photo Grid Layout With Pure CSS – flexbin.css

[Demo] [Download]


8. grid-gallery

A lightweight, responsive photo grid gallery with lightbox integrated that allows the user to switch between images in a popup by clicking on any thumbnail.

grid-gallery

Demo Download


9. Simple Tab Gallery

A CSS only gallery that enable the user to switch between images by clicking on the tabbed thumbnail navigation. Built using CSS3 flexbox model, transitions, transforms and html radio input tricks.

Demo Download


10. Pure CSS Photo Gallery with Image Lightbox Support

A pure CSS/CSS3 based responsive photo gallery for your portfolio website that has the ability to view the large image version in a lightbox.

Pure CSS Photo Gallery with Image Lightbox Support

Demo Download


See also:

You Might Be Interested In: