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.

Features:

• 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">
<ol>
<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>
</ol>
</div>
<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>
</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.