iPhoto Album Like Image Preview Plugin For jQuery - frameScrub

frameScrub is a jQuery plugin for creating an image slideshow which allows to shuffle images when you mouse over from left to right (or right to left). Similar to the Apple iPhoto album that allows you to preview images by moving cursor around.

How to use it:

1. Load the jQuery library and the jQuery frameScrub plugin in the Html document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/frameScrub.js"></script>

2. Insert an group of image in a container element.

<div id="demo" style="width:960px; margin:50px auto;height:300px;border:1px solid #666;overflow:hidden;">
<img src="http://lorempixel.com/960/300/sports" title="Title 1">
<img src="http://lorempixel.com/960/300/fashion" title="Title 2">
<img src="http://lorempixel.com/960/300/abstract" title="Title 3">
<img src="http://lorempixel.com/960/300/city" title="Title 4">
<img src="http://lorempixel.com/960/300/people" title="Title 5">
<img src="http://lorempixel.com/960/300/food" title="Title 6">
</div>

3. Enable the plugin with one JS call.

$("#demo").frameScrub();

4. Available options.

• defaultImage - Takes the 'id' attribute of an image. On page load and mouseOut, the defaultImage will be what is displayed inside the frameScrub.
• verticalAlignment - This will align the images vertically inside the frameScrub container. Align to the top, middle, or bottom. The default is top.
• showTitles: - If you'd like to show titles of your images, you can do that. Just pass in the "ID" of the element you want to house the titles. Make sure your images have titles on them.
• frameWidth: - If you want to specify a width for your images, pass in this option. If you don't, the images will stretch to fit the container. Either way, the height will be calculated to preserve the image's aspect ratio. Also, if you don't pass any width, the frameScrub is responsive to widths.

Change log:

2014-08-09

• Fixing bug when swtiching images and with window resize events

2014-07-05

• Fixing Firefox jitter

---

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