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.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

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.

Full-screen Photo Gallery with jQuery
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>


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

Calling the Script

$('figure img').ma5gallery({

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

Related post:  Top 10 Web design books to help you with your projects


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

DEMO Download Fullscreen Gallery

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.