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="//code.jquery.com/jquery-3.2.1.min.js"></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.

<figure>
  <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>
    </figcaption>
  </a>          
</figure>

<figure>
  <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>
    </figcaption>
  </a>          
</figure>

<figure>
  <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>
    </figcaption>
  </a>          
</figure>

4. Create a container element for the image viewer.

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

5. Enable the plugin with default settings.

$('#captionBox').CaptionBox();

6. Possible options to customize the image viewer.

$('#captionBox').CaptionBox({
  
  // 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.