Responsive Full Page Gallery Slideshow Plugin For jQuery - Photo Box

File Size: 333 KB
Views Total: 5157
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Full Page Gallery Slideshow Plugin For jQuery - Photo Box

Photo Box is a jQuery plugin that has the ability to display your image gallery in a responsive full page slideshow/lightbox.

Features:

  • Responsive design for desktop, tablet, mobile, etc..
  • A simple loader GIF for image loading.
  • Keyboard arrows and next/pre buttons navigation.
  • Touch devices supported.
  • CSS3 transforms supported.
  • Super simple and easy to use.

Basic Usage:

1. Include the latest version of jQuery library and jQuery Photo Box plugin's files in the html document.

<link rel="stylesheet" type="text/css" href="photobox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="photobox.js"></script>

2. Create a gallery slideshow by wrapping the images in a container element. The plugin will automatically generate the image captions at the bottom of the gallery slideshow by getting the data from the <a> tag's title attribute.

<ul class="gallery">
<li><a href="large-1.jpg" title="Image 001"><img src="thumb-1.jpg" /></a></li>
<li><a href="large-2.jpg" title="Image 002"><img src="thumb-2.jpg" /></a></li>
<li><a href="large-3.jpg" title="Image 003"><img src="thumb-3.jpg" /></a></li>
...
</ul>

3. To initialize the gallery slideshow just call the plugin with one line of Javascript.

<script type="text/javascript">
$( function() {
$( '.gallery a' ).photobox();
} );
</script>

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