How to Create Full-screen Photo Gallery with jQuery

A straightforward jQuery plugin for a full-screen photo gallery with handy thumbnail navigation.

Today’s plugin provides a great solution for developers and designers if they want to incorporate a full-screen gallery in their web projects.

The plugin is called MA5-Gallery by its author and it gives a few options for presenting images. The first one is a simple gallery with thumbnail navigation, the second provides a way to include captions under the images in the gallery and the third solution relies on lightbox features.

Two great features make MA5-Gallery a great choice for visual websites: the simplicity of adding it to any web project and also the fact that the plugin is very light so it works great on websites that require a lot of visual content. It is worth mentioning that the gallery is responsive and build with HTML5 and CSS3.

Image may be NSFW.
Clik here to view.
Have a look below to see how you can use this plugin and make sure you check the demo to see how it works.

Start with the necessary files

Add these lines in the head tags in your document

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
<link href="./stylesheets/ma5gallery.css" media="screen, projection" rel="stylesheet" type="text/css">

Add these lines right before the closing body tag in your document

<script src="./javascripts/jquery-2.1.1.min.js"></script>
<script src="./javascripts/ma5gallery.js"></script>

Create the HTML Structure

Single Mode

<!-- html body -->
<figure><img src="name-thumbnail.jpg" alt=""></figure>
<figure><img src="name-thumbnail.jpg" alt=""></figure>

Gallery Mode

<!-- html body -->
<div class="ma5-gallery">
 <figure><img src="name-thumbnail.jpg" alt=""></figure>
 <figure><img src="name-thumbnail.jpg" alt=""></figure>
</div>

Figcaption

<!-- html body -->
<figure>
 <img src="name-thumbnail.jpg" alt="">
 <figcaption>Title</figcaption>
</figure>

Calling the Script

$('figure img').ma5gallery({
 preload:true
 });

preload : true|false (Default false) Download all images to the browser.

Images

Bear in mind that both thumnails and full size images should be placed in the same folder and should be called imagename-thumbnail.jpg and imagename.jpg