38 Excellent Free Image Galleries—JavaScript, React, PHP, or CSS

Here are some of our favourite free image galleries that you can quickly plug into a design. They've been built with everything from JavaScript to PHP to jQuery and more... A shout-out to all the developers involved in sharing their work with the community!

• JavaScript Galleries
• jQuery Galleries
• React Galleries
• PHP Galleries
• CSS-Based Galleries

Free JavaScript Galleries

Images play a very important role in the design and development of any website. When you want to showcase a collection of products to a user, you need to ensure that the gallery is lightweight and reliable. Fortunately, you have a bunch of free and open-source Javascript galleries to choose from. 

Here are the top 7 JavaScript galleries for you to choose from.

1. Swiper

Swiper is one of the finest sliders in town with hardware accelerated transitions. The slider works well in many platforms: native apps, web applications and mobile websites. Swiper is a fully-featured platform which can be used to build slides for Android, and iOS applications.

Top features of Swiper are:

• 1:1 touch movement
• mutation observer
• full RTL support
• multiple transitions like parallax, transition and more
• virtual slides
• flexbox layout with complete control over navigation

Swiper is open source, and completely free (MIT Licensed). Here is a simple demo, to help you understand the integration, and simplicity of Swiper. 

2. Galleria

Galleria is a free image gallery framework for JavaScript. The overall process of creating image galleries for web and mobile devices becomes simpler with Galleria. Important features of Galleria are:

• open source (MIT license)
• easy to use without a lot of extensive coding knowledge
• integrate the gallery with just few lines of code
• carefully designed to be responsive in various screens, and environments
• supports native movements and hardware-optimised animations 

3. LightGallery

LightGallery is a newly-built image gallery for JavaScript. It promises both quality, and high performance. The gallery works well on all modern browsers (including Internet Explorer 10). You can easily attach, and detach modules like zoom and thumbnails in your LightGallery. 

Some features to note in LightGallery are:

• SCSS variables
• plugins
• flexible markup
• 100+ options for customising the gallery without code
• supports a wide range of images, including webP and responsive images
• supports all types of HTML5 video formats, including webM, MP4 and even Ogg
• allows users to embed external websites, Google Maps and even PDF files

Here are is a demo to help you understand LightGallery. 

4. PhotoSwipe

Quite recently, PhotoSwipe released version 5. The newest version comes with improved code quality, and is completely written in ES6. PhotoSwipe does not block page rendering—it supports dynamic import. Here are few features to look for in PhotoSwipe:

• all touch gestures are fluid
• animations are high performance 
• does not require any external assets
• open images in zoomed state 

Here is a demo showcasing PhotoSwipe.

5. NanoGallery2

Next in line would be NanoGallery2. This is one of those special galleries with chosen features. For instance, the gallery comes with four different layout options. You can configure the gallery to be in grid, justified, mosaic and cascading layout. Other features in NanoGallery2 are:

• standard gestures are completely supported
• supports lightbox touch actions
• simple, lightweight animations

Here is a demo showcasing NanoGallery2

6. Highslide JS

Highslide JS  is a gallery, media and image viewer created using JavaScript. There are many reasons to choose this library as your next gallery viewer:

• quick and elegant-looking
• no problems with popup blockers
• free support for both non-commercial and commercial users 
• source code that you can tweak

7. Justified Gallery

Justified Gallery is all about building a high-quality justified gallery of images. It is a simple JavaScript-based library.

One of the most commonly faced problems with a collection of images is how they are arranged. The primary goal of Justified Gallery is to solve this problem. It is even used by 500px for displaying images. Features that make the Justified Gallery special are:

• uses an advanced algorithm to make sure that the images are never cropped
• infinite scrolling
• ready for any screen resolution, and device
• remove, add, randomise, sort and filter images
• makes use of existing lightboxes like swipebox, and colorbox
• optional captions

Here is a demo using Justified Gallery.

8. blueimp

The blueimp is an all-in-one solution for creating responsive image galleries. The library offers a carousel and a simple lightbox. You can use this gallery with images and videos. Features that make blueimp special are:

• freedom to customize the behaviour, and appearance of the gallery
• add classes to style various elements in the gallery
• callbacks for events like slide load and slide change. 

Here is a demo of the blueimp gallery.

9. FancyZoom

Fancy Zoom is a bit of JavaScript that allows you to zoom in on photos without requiring a second download of the image.

Here is a demo on FancyZoom.

Free jQuery Gallery Plugins

One of the reasons why developers admire jQuery is because it shortens development time. Building an image gallery can be an expensive task, mainly because it deals with expensive resources. This makes it essential to have a solution that reduces time, improves performance and supports seamless animations when showcasing images. jQuery-based image galleries can offer this!

Here are seven of the best jQuery-based image galleries for you. 

1. AviaSlider

AviaSlider is an easy to use, and flexible plugin created using jQuery. When compared with many other libraries, the AviaSlider comes with unique transitions. The library is carefully designed and built to ensure that no clumsy animations are showcased to viewers. Also, the slider begins to work only when all the images are successfully loaded. 

2. Sideways

If you are looking for a gallery which can be used to showcase a photography portfolio, Sideways might be the right choice for you.

3. Visual LightBox

Visual LightBox is a free wizard application for creating image galleries. You don't need to write any code. You can just drag and drop pictures to create a gallery. Apart from it's drag and drop interface, here are few other impressive features of Visual LightBox:

• 31 language interface
• iOS- and Android-ready
• works smoothly on all device screens and browser resolutions
• a GUI wizard to help with the whole gallery
• works on all browsers, including IE6

The wizard offers a dozen templates, which can be used to build portfolio websites, adventure blogs and even professional image galleries for travel agencies.

4. prettyPhoto

prettyPhoto is a jQuery-based lightbox. It supports images, and can also be used to show videos. This makes prettyPhoto a full-blown solution for media galleries. prettyPhoto gallery can be setup easily. It runs on a script that works fine in IE6, as well. Also, the galleries offer APIs which can be triggered almost from anywhere. 

You will find a working demo of prettyPhoto here.

5. Unite Gallery

Unite Gallery is a new member in the list of modern image galleries that use jQuery. This is a gallery designed with plenty of customisation options. In fact, it allows users to build their very own themes. The image galleries comes with these perks:

• supports nine different skins
• comprehensive documentation
• supports third-party platforms like Joomla, OpenCart, Drupal and WordPress

Here is a demo showcasing Unite Gallery.

6. Polaroid Gallery

Polaroid Gallery is one of the most unique and interesting jQuery plugins for building image galleries. As suggested by its name, this gallery brings out a vintage theme. It helps users take their Polaroid snapshots to the next level. What makes this gallery special would be the flat and responsive design. You can also make use of its shuffle transition, to flip and show images. Those who want to build their travel blogs with many polaroid image galleries, will find this plugin extremely useful.

Here is a demo to help you experiment with Polaroid Gallery.

7. Wow Slider

Last in our list of jQuery-based image sliders is Wow Slider. This is a perfect solution for those who are not interested in coding. The slider comes with a simple drag-and-drop interface. And it'sdefinitely one of the lightest image galleries around. Apart from these primary features, Wow Slider is famous because it:

• is SEO-friendly
• supports touch swipe navigation
• works across browsers and offers up to 25 unique transitions

8. Slimbox 2.0

Slimbox is a tiny, standards-compliant, fully customisable lightbox image viewer built upon jQuery. This is a famous clone of Lightbox 2, which was scripted by Lokesh Dhakar. 

Here is a demo for Slimbox 2.0

React 

1. pro-gallery

The pro-gallery is a popular library used in React. The gallery is both beautiful, and extremely fast. It is ranked as one of the best galleries for web, with more than 8000 weekly downloads. The gallery supports a wide range of features. An interesting feature of this gallery is a unique pre-render mode which allows users to load the container in responsive mode, even when the actual size of the container is unknown.

Some other features of the gallery are:

• lazy loading of images
• fully customisable
• infinite scrolling
• supports HTML, videos, and images

Here is a demo of pro-gallery in action:

To get started with the gallery, you need to install:

npm i -S pro-gallery

2. react-image-gallery

As suggested by its name, react-image-gallery is a library that creates carousels and galleries in React. The library allows users to build galleries that respond to mobile swipe gestures. It supports thumbnail gestures, and custom rendering of slides. This image gallery has tons of customizable options. Here are a few props, to begin with.

npm install react-image-gallery

Also, don't forget to install these styles. 

# SCSS
@import "~react-image-gallery/styles/scss/image-gallery.scss";

# CSS
@import "~react-image-gallery/styles/css/image-gallery.css";

Here is a demo to show how you can use react-image-gallery.

3. react-responsive-carousel

react-responsive-carousel is a lightweight library that comes with fully customisable carousel components. When it comes to customisation, this library allows use to create a custom thumb, arrow, indicator, animation handler and even a status.

Like all the other libraries, react-responsive-carousel is also responsive. It works well on mobile devices, and comes with swipe to slide options.

A unique feature offered by the react-responsive-carousel is server-side rendering capabilities. Another interesting feature is the ability to insert external controls in your carousel. From images, to text to videos you can include anything in your carousel. 

To get started you need to install the library in your project.

yarn add react-responsive-carousel

Here is a demo to help you use this library.

4. react-multi-carousel

react-multi-carousel is definitely one of the lightest carousels in town. It is as small as 2kb. The carousel supports server side rendering, along with:

• infinite scrolling mode and dot mode
• build custom animations
• with autoplay mode and autoplay interval settings
• keyboard-controlled sliding, mouse drag sliding, and swipe-to-slide
• accessibility support

To get started, you just need to install the library.

$ npm install react-multi-carousel --save

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

Here is a demo to help you get started with react-multi-carousel. 

5. react-bnb-gallery

react-bnb-gallery is inspired by Airbnb's image gallery. It is a simple photo gallery which can be used in your React project. The gallery is accessible-ready, and super friendly to use. 

To get started, you need to install the gallery.

# If you are using npm
npm install --save react-bnb-gallery

# If you prefer yarn
yarn add react-bnb-gallery

Here is a demo to showcase the react-bnb-gallery.

6. react-owl-carousel

react-owl-carousel is a little different from the other galleries discussed in this section. To get started, you need to inject the gallery into window.jquery. For example, you can choose to inject the library into Webpack. Or, you can use the HTML script tag to inject the jquery. 

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),
],

The carousel allows users to make use of the following methods, to control the overall behaviour of the widget: next(speed), prev(speed), to(position, speed), create(), destroy(), stop() and play(timeout, speed).

Here is a demo to showcase react-owl-carousel.

 7. react-grid-gallery

react-grid-gallery is carefully built to work on all browsers, including IE 11 and newer. The inspiration for this library comes from the widely used Google Photos. The gallery is extremely responsive and picks its width based on the elements in the slide. This means, the width is decided even before the actual gallery loads.

To get started, you need to install the following:

npm install --save react-grid-gallery

Here is a demo to help you use this gallery.

PHP Image Galleries

1. Coppermine

Coppermine is a web picture gallery written in PHP using ImageMagick or GD with a backend done in MySQL. This library is absolutely free. Features of Coppermine are:

• arrange the images in albums, and categories
• pictures are stored in a database
• use FTP or a web interface to upload the image 
• searching within description, title, and caption 
• user management controls like groups and private galleries

2. Gallery

Gallery is an open source gallery which works seamlessly in PHP 7+. Gallery allows you to blend photo management into your website easily. Whether you are running a large community or a personal site, this library will serve your need. Here are few impressive features of Gallery:

• store metadata for every file
• drag-and-drop images and watermarks
• in-place editing of both metadata and images
• bulk edits 
• users and groups

3. TinyWebGallery

TinyWebGallery is a free gallery built for PHP. This gallery does not expect you to have a database. In fact, it uses XML files to build the gallery. Features of TinyWebGallery are:

• navigation using AJAX
• admin dashboard to manage users, upload images and customize
• three different types of slideshows

4. Shutter

Shutter is absolutely free to download. This library needs PHP, and MySQL. What makes Shutter special is the unlimited number of albums, with numerous photos. This library has an endless list of benefits.

• Easy installation: if the files have the right permissions, you can complete installation with just few clicks of a button. In fact, the library offers web-based configuration. 
• Create and handle unlimited photo albums. Photos can be grouped, and individual tags can be assigned to them. Guests to comment on the albums, as well.
• Live RSS feed for albums. 

5. Plogger

Many developers consider Plogger as an open source gallery for the next generation. The tool is not loaded with complicated configurations. Instead, it is very simple. Unique features that set Plogger apart are:

• remote access to the galleries
• JavaScript slideshow for image albums
• support for internationalization and all character sets
• download and upload images in bulk
• automatic thumbnail generation

6. 4Images

4Images is a PHP- and MySQL-based solution for displaying images on the web. To begin with, the administrator configures the images in their dashboard.

What makes this library special is its huge community. Fixes, and features are pushed into this library frequently.

You will be able to manage both videos, and images. Resources can be uploaded through FTP, an admin panel, or through a web browser. As soon as the resource is uploaded, you will be able to see the generation of thumbnails.

 Important elements to lookout for in this library are:

• images and videos can be protected against hotlinking
• support for making backups
• unlimited categories and subcategories 

7. ZenPhoto

ZenPhoto is absolutely free, but extremely powerful. It is often used for building multiple websites. This PHP image gallery script is capable of supporting video, audio and image files. You can even setup a blog, along with custom pages using ZenPhoto. This library is useful for musicians, artists, and film makers—it is a great tool for building portfolios. 

It is easy to upload content from the back-end. Multiple files can be uploaded, instantly. Once uploaded, the CMS provides frontend tools for editing. Multiple file types are supported by ZenPhoto. In includes formats ranging across video, audio and image filetypes. 

ZenPhoto is a great platform for theming, and re-using templates in your gallery. The gallery comes with statistics to help developers understand its usability and SEO friendliness. 

CSS Based Galleries

1. CSSPlay

CSSPlay is built purely on CSS. It is a multipage gallery, which is simple and slick. 

2. Hoverbox

Hoverbox is a lightweight CSS-based image gallery.

3. Dynamic Drive CSS Image Gallery

Instead of using JavaScript, the Dynamic Drive CSS Image Gallery is completely powered by CSS.

4. Hexagon Gallery

This is an impressive CSS based gallery created by Gabriela Johnson. As suggested by its name, Hexagon Gallery places images in hexagon image holders. The creator has given attention to every small detail in the gallery. For example, hovering and clicking on the images creates a glowing effect. Likewise, there are shadows for every image in the hexagon holder. 

Here is a working demo of the Hexagon Gallery.

5. Mobirise CSS Image Gallery

Those who are interested in building a gallery using the M4 Themes, would find the Mobirise CSS Image Gallery useful. Every item in the gallery is a clickable menu item. Unlike other galleries where clicking enlarges the image. Here, the image turns into a menu. Visitors have the freedom to decide, and narrow down on the number of items to be shown in the menu. 

Conclusion

As you build your application, hope this collection makes your life simpler! These are some of the most efficient, and well maintained galleries. Also, the galleries have plenty of documentation to help you build.