Top 10 Galleries In Pure JavaScript & CSS (2019 Update)

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

Here is a list of the 10 Best Galleries implement 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 July 12 2019

1. Gallerly.js

gallerly.js

Demo Download

Gallerly.js is a pure JavaScript photo gallery that lets you create a thumbnail grid with an expanding large image preview as you seen on Google Image Search.


2. CSSBox

CSSBox

Demo Download

A minimal, responsive image gallery lightbox where the user is able to navigate between full sized images in a fullscreen lightbox popup. Built using CSS / CSS3 and plain html markup.


3. flexbin.css

flexbin.css

Demo Download

flexbin.css is 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.


4. Pure CSS Photo Gallery with Image Lightbox Support

Pure CSS Photo Gallery with Image Lightbox Support

Demo Download

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.


5. Material Responsive Photo Gallery

Material Photo Gallery

Demo Download

Material Photo Gallery is a Vanilla JavaScript plugin that helps you generate a nice, responsive thumbnail grid as you seen on Google Image Search. Once you click on a thumbnail, the zoomed image will displayed in a fullscreen lightbox gallery with left / right arrows which enable you to navigate through all photos.


6. Simple Tab Gallery

Demo Download

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.


7. Scattered Polaroid Gallery

scattered-polaroid-gallery-pure-javascript-css3

Demo Download

A simple JavaScrpt and CSS/CSS3 based Polaroid Gallery that automatically moves the selected photo into the middle of the screen while shuffling the others. Also provides a navigation which allows you to navigate between photos with next / prev buttons.


8. Pure JavaScript Fullscreen Image Gallery With Thumbnail Navigation

pure-javascript-fullscreen-image-gallery-thumbnail-navigation

Demo Download

A responsive, fullscreen image gallery/viewer with a thumbnail navigation, build using pure JavaScript and CSS. Your users are able to switch between images by click on the next/prev links and/or thumbnail images.


9. Responsive Photo Gallery with Pure JavaScript

Responsive Photo Gallery with Pure JavaScript

Demo Download

A pure JavaScript gallery that helps you showcase your images with thumbnails and arrows navigation. Fully responsive and mobile touch friendly.


10. FlexImages

FlexImages

Demo Download

FlexImages is 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.


See also:

Top 10 JavaScript & CSS Gallery Lightbox Libraries