Mobile-friendly Image Viewer With Rich Captions - jQuery CaptionBox

File Size: 2.6 MB
Views Total: 2989
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile-friendly Image Viewer With Rich Captions - jQuery CaptionBox

CaptionBox is a simple, responsive, mobile-friendly jQuery image viewer/gallery plugin that has the ability to present your photos in a navigatable lightbox popup with rich captions and exif information.

How to use it:

1. Insert jQuery library together with the jQuery CaptionBox plugin's stylesheet and JavaScript into the html page.

<link href="css/captionbox.css" rel="stylesheet">
<script src="//"></script>
<script src="js/captionbox.js"></script>

2. Load the exif-js JavaScript library if you'd like to display the image's exif information.

<script src="js/exif.js"></script>

3. Insert the thumbnails, original images and their corresponding captions into the page.

  <a class="captionBoxImage" href="1.jpg">
    <img title="Incoming night" src="1_thumb.jpg">
    <figcaption class="customCaption">
      <p class="img_name">Image Name 1</p>
      <p>Caption 1</p>

  <a class="captionBoxImage" href="2.jpg">
    <img title="Incoming night" src="2_thumb.jpg">
    <figcaption class="customCaption">
      <p class="img_name">Image Name 2</p>
      <p>Caption 2</p>

  <a class="captionBoxImage" href="3.jpg">
    <img title="Incoming night" src="3_thumb.jpg">
    <figcaption class="customCaption">
      <p class="img_name">Image Name 3</p>
      <p>Caption 3</p>

4. Create a container element for the image viewer.

<div id="captionBox"></div>

5. Enable the plugin with default settings.


6. Possible options to customize the image viewer.

  // image selector
  imageSelector: '.captionBoxImage',

  // Enables URL alteration so that link to each captionBox image exists
  alterUrlFlag: true,

  // String added to your URL if URL alteration is enabled. 
  // Use letters and URL safe characters, do not use numbers as it will add a numeric identifier of each image automatically. 
  // URL of each image will than look like 'img1', 'img2' and so on.
  alterUrlString: 'img',

  // Shows exif information
  showExif: true,

  // Breakpoint
  mobileWidth: 900,

  // Enable swipe to navigate
  swipeNav: true,

  // Disable right click
  disableRightClick: false,

  // Makes your window scroll to thumbnail of the last image viewed after closing CaptionBox window
  scrollBack: true


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