jQuery Slider Style Image Viewer Plugin - Picture Box

File Size: 203KB
Views Total: 2547
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Slider Style Image Viewer Plugin - Picture Box

Picture Box is a powerful yet easy to use jQuery plugin that allows you to pan a zoomed image using your mouse in an image slider interface.


  • Arrows keys navigation
  • ESC key to switch to fullscreen mode
  • ` key to switch to zoom-in mode
  • Supports of image thumbnails

How to use it:

1. Include the latest version of jQuery javascript library on your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Include jQuery Picture Box plugin after jQuery

<link rel="stylesheet" href="dist/picturebox.css" media="screen">
<script src="src/picturebox.js"></script>

3. Create the html. Using data-* attributes to customize the image viewer

<div class="picture-box" id="picture-box" data-animation="500" data-number="2">
<div class="viewport"></div>
<div class="pictures">
<li data-thumb="images/s1.jpg" data-src="1.jpg"></li>
<li data-thumb="images/s2.jpg" data-src="2.jpg"></li>
<li data-thumb="images/s3.jpg" data-src="3.jpg"></li>
<li data-thumb="images/s4.jpg" data-src="4.jpg"></li>
<li data-thumb="images/s5.jpg" data-src="5.jpg"></li>
<li data-thumb="images/s6.jpg" data-src="6.jpg"></li>
<div class="toolbar"> <a class="prev" href="#picture-box" data-slide="prev"></a> <a class="next" href="#picture-box" data-slide="next"></a> <a class="zoom" href="#picture-box" data-zoom="in"></a> </div>

Change log:

v0.1.2 (2013-10-08)

  • bugfix for IE, FF, Opera

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