Fullscreen Photo Gallery with Thumbnail Navigation - ma5-gallery

File Size: 3.21 MB
Views Total: 8092
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fullscreen Photo Gallery with Thumbnail Navigation - ma5-gallery

ma5-gallery is a simple-to-use jQuery plugin used to create a fullscreen responsive photo gallery with a thumbnail navigation.


  • Single mode: enlarge your image in a fullscreen popup box.
  • Gallery mode: display grouped images in a fullscreen gallery lightbox.
  • ESC or click anywhere on blank area to close the gallery.
  • CSS3 based transition effects.
  • Allows to navigate between images with keyboard arrows.

How to use it:

1. Upload your thumbnails & full sized image (1.jpg, 1-thumbnail.jpg, 2.jpg, 2-thumbnail.jpg, ...) into the image folder.

2. Include the ma5gallery.css in the head section of the document.

<link href="stylesheets/ma5gallery.css" rel="stylesheet">

3. Insert the thumbnails into a container.

<div class="ma5-gallery">
    <img src="images/1-thumbnail.jpg" alt="">
    <img src="images/2-thumbnail.jpg" alt="">
    <img src="images/3-thumbnail.jpg" alt="">
    <img src="images/4-thumbnail.jpg" alt="">
    <img src="images/5-thumbnail.jpg" alt="">
    <img src="images/6-thumbnail.jpg" alt="">

4. Include jQuery library and the jQuery ma5-gallery plugin in the footer.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="javascripts/ma5gallery.js"></script>

5. Call the function on the thumbnails to initialize the photo gallery.

$('figure img').ma5gallery({

Change logs:

v2.0.0 (2015-11-22)

  • fullscreen and movie player features


  • Add option for customize path to full image


  • Add figcaption


  • Add previous next control at full image


  • Add preload option


This awesome jQuery plugin is developed by ma-5. For more Advanced Usages, please check the demo page or visit the official website.