* box-sizing: border-box; body margin: 0;*box-sizing:border-box;bodymargin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;
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 Photo 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 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 on many platforms: native apps, web applications, and mobile websites. Swiper is a full-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’s a simple demo to help you understand the integration and the simplicity of Swiper.
See the Pen
Using Swiper by DDev (@divyaddev)
on CodePen.
2. Galleria
Galleria is a free image gallery framework for JavaScript. The overall process of creating website 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 a few lines of code
- carefully designed to be responsive on various screens and environments
- supports native movements and hardware-optimised animations
See the Pen
Using Galleria by DDev (@divyaddev)
on CodePen.
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’s a demo to help you understand LightGallery.
See the Pen
Using Lightgallery by DDev (@divyaddev)
on CodePen.
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 a 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.
See the Pen
Using Photoswipe by DDev (@divyaddev)
on CodePen.
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 a grid, justified, mosaic, or 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:
See the Pen
Using NanoGallery2 by DDev (@divyaddev)
on CodePen.
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 common 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.
See the Pen
Using Justified Gallery by DDev (@divyaddev)
on CodePen.
8. blueimp
The blueimp gallery is an all-in-one solution for creating responsive website 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.
See the Pen
Demo Blueimp by DDev (@divyaddev)
on CodePen.
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 of FancyZoom.
See the Pen
Untitled by DDev (@divyaddev)
on CodePen.
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’s a selection of the best jQuery-based image galleries for you.
1. AviaSlider
AviaSlider is a flexible and easy-to-use 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 its drag and drop interface, here are a 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. The prettyPhoto gallery code is easy to set up. It runs on a script that works fine in IE6, as well. Also, the galleries offer APIs which can be triggered almost from anywhere.
Check out the working demo of prettyPhoto.
See the Pen
Demo prettyPhoto by DDev (@divyaddev)
on CodePen.
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 gallery 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.
See the Pen
Sample Photos: Unite Gallery: Carousel by Sarah (@vanwars)
on CodePen.
6. Polaroid Gallery
Polaroid Gallery is one of the most 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 is 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.
See the Pen
Demo Polaroid Gallery by DDev (@divyaddev)
on CodePen.
7. Wow Slider
Next on our list of jQuery-based image sliders is Wow Slider. This is the perfect solution for those who are not interested in coding. The slider comes with a simple drag-and-drop interface, and it’s definitely 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:
See the Pen
Untitled by DDev (@divyaddev)
on CodePen.
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 the web, with more than 8,000 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 it:
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. To get started, you need to install React 16.0.0 or later.
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 you to create a custom thumb, arrow, indicator, animation handler, and even 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 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 code which can be used in your React project. The gallery is accessible 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 use 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 that 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 back end 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 needs. Here are a 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 a 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 can 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 look out 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 set up 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 front-end tools for editing. ZenPhoto supports multiple file types and formats for videos, audio, and images.
ZenPhoto is a great platform for theming and reusing 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.
See the Pen
Hexagon Gallery by Gabriela Johnson (@gabrielajohnson)
on CodePen.
5. Mobirise CSS Image Gallery
Those who are interested in building a gallery using 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 can narrow down the number of items to be shown in the menu.
Conclusion
As you build your application, I 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.
