Multiple Album Photo Gallery using jQuery

Category: Gallery | August 9, 2020
Multiple Album Photo Gallery using jQuery
Author: Arun Kumar
Official Page: Go to Website
Last Update:August 9, 2020
License:MIT

The “Albumize” is a lightweight and easy to use jQuery plugin that lets you create multiple album photo gallery on a webpage. It renders a feature rich lightbox popup where users can browse album photos with next/previous buttons and thumbnails. The plugin displays the thumbnails in a mini scrollable and collapsible box to quickly switch the images.

The plugin is useful to manage collection of images in album formats on websites. Similarly, you can integrate this plugin in a photography, portfolio, and blog websites.

If you are working on a portfolio website, don’t forget to check out portfolio gallery with categories filter. For heavy content website you can implement photo gallery with thumbnails and zoom feature. Anyhow, these are also much relevant to album like photo galleries.

Additionally, the coding concept for this plugin is simple. Unfortunately, plugin doesn’t come with configuration options. So, you don’t have control to customize the working of this plugin with options. However, a general purpose album photo gallery can be rendered with the help of this plugin. Further, the albumize photo gallery can be highly customized with additional CSS.

How to Create Multiple Album Photo Gallery

The very first thing is to include plugin assets into your project in order to create album photo gallery. So, load the jQuery and Albumize JS and CSS files in the head section of your HTML page.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Albumize JS -->
<script src="js/albumize.js"></script>
<!-- Albumize CSS -->
<link href="css/albumize.css" rel="stylesheet" />

 

After that, create HTML div element with a class name “albumize” and define its title attribute. This title will be displayed on the top of image popup window. Place your album images inside hyperlinks and define their title and alt text. A basic HTML structure for an album is as follows:

<div class="albumize" title="Space"> 
   <a href="samples/d.jpg" title="Earth from Space"><img src="samples/4.jpg"></a> 
   <a href="samples/e.jpg" title="Surreal Space"><img src="samples/5.jpg"></a> 
   <a href="samples/f.jpg" title="Our Galaxy"><img src="samples/6.jpg" class="albumize-cover"></a> 
   <a href ="samples/g.jpg" title="Heavenly Space"><img src="samples/7.jpg"></a> 
</div>

Place the above HTML structure where you want to display the photos of an album. You can create multiple albums as your needs. Besides this, you can also hide an album and directly show its images in popup lightbox. To do so, create a button that will be used to trigger the album photos.

<button class="my-btn" id="show-albums-button"> My Photos </button>

At last, initialize the plugin in jQuery document ready function to activate the multiple album photo gallery. You can place this initialization code in the head or before closing of body tag. But make sure this script comes after main jQuery script file.

$(document).ready(function () {
	var sb = $('#show-albums-button');
	sb.click(function () {
		$.albumize();
	});
});

If you want to adjust the album layout or customize albumize images, use the following CSS selectors.

.albumize {
margin: 5% 0;
padding-bottom: 5%;
overflow-x: auto;
}
.albumize a img {
width: 200px;
height: 150px;
border: medium solid #333;
}
.albumize a img:hover {
border: medium solid grey;
}

You can also use CSS media queries to generate a responsive photo gallery.

That’s all! We hope you have successfully implemented this photo gallery plugin in your project. If you needs any further help, please let us know by comment below.

You May Also Like

Leave a Comment

three × 5 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.