Google Play-Style Image Viewer With jQuery - plusview

Plusview is a jQuery plugin that converts an UL based image wall into a Google Play App Screenshots Style image slider/slideshow/gallery when you clicking an image.

How to use it:

1. Import the latest jQuery javascript library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Import jQuery plusview's stylesheet and script files after jQuery library.

<script src="plusview.js"></script>
<link href="plusview.css" rel="stylesheet" type="text/css" />

3. Create a set of images on the page.

<div id="demo" class="plusview">
<ul>
<li> <a href="images/large/0.jpg" data-type="image"> <img src="images/small/0.jpg" border="0"/></a></li>
<li> <a href="images/large/1.jpg" data-type="image"> <img src="images/small/1.jpg" border="0"/></a></li>
<li> <a href="images/large/2.jpg" data-type="image"> <img src="images/small/2.jpg" border="0"/></a></li>
<li> <a href="images/large/3.jpg" data-type="image"> <img src="images/small/3.jpg" border="0"/></a></li>
<li> <a href="images/large/4.jpg" data-type="image"> <img src="images/small/4.jpg" border="0"/></a></li>
</ul>
</div>

4. Call the plugin with default options.

<script>
$(function() {
$('#demo').plusview();
});
</script>

5. Available options.

<script>
$(function() {
$('#demo').plusview({
height: 300, // the height to grow to when shown
show: 'slideDown', // change the jquery method to use to show the view
hide: 'slideUp', // change the jquery method to use to hide the view
showItem: null, // index of item to show upon initialization
duration: null, // when in large view, automatically go to next item after the given duration
wrap: false, // makes next/prev wrap around forever
scrollIntoView: true, // scrolls main element into view when switching to large view
buttonHeight: 50
});
});
</script>

Change log:

v1.0.2 (2013-01-08)

• added onChange and documented api

---

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