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!
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:
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:
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
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.
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.
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
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.
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.
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.
The above list is a basic collection of the properties supported. This library has a lot more to offer. To get started you need to install React 16.0.0 or later.
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.
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.
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
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.
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).
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:
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.
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.
martijn broeders
founder/ strategic creative at shineyrock web design & consultancy
e-mail:
.(JavaScript must be enabled to view this email address)
phone:
434 210 0245
2
-1
waly Good blog post. I absolutely love this…