Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Image Video Previewer 1.1

A JQuery Plug-In to Display A Series of Image Frames, Like A Video Previewer

Project Description

CJ Image Video Previewer is meant to mimic the video preview boxes you see on many Video sites. It displays a block that contains an image thumbnail and when the user moves their cursor of the box, it dynamically loads and then displays a group of images in sequence. Kind of like a flip-book. This is an excellent way to provide an preview of the video, without the user actually downloading the video file.

Example Setup
$("#Videos #preview_02").cjImageVideoPreviewer({
 // provide an array of your thumbnail images
 "images": [
   'assets/images/superman_the_mechanical_monsters_000120.jpg',
   'assets/images/superman_the_mechanical_monsters_000150.jpg',
   'assets/images/superman_the_mechanical_monsters_000210.jpg',
   'assets/images/superman_the_mechanical_monsters_000240.jpg',
   'assets/images/superman_the_mechanical_monsters_000270.jpg',
   'assets/images/superman_the_mechanical_monsters_000300.jpg',
   'assets/images/superman_the_mechanical_monsters_000330.jpg'
 ],
 "delay": 100,           // obviously this is a crazy fast amount
 "showProgress": false   // turn off the progress bar
});

Arguments

The plugin has a few options you can pass to it. You can set the delay amount, determine if you want to show the "image loading" progress bar and set it to autoPlay.

ArgumentDescriptionTypeDefault
imagesAn array of the thumbnail images to use. Ideally these should all be the same size as the original image. (Required)array[]
delayThe speed in which to display your images. (This argument is optional)integer450
autoPlayDetermines if the image will cycle though the images via a mouseover or should play on load. (This argument is optional)booleanfalse
showProgressDetermines if a progress bar is displayed on first load. (This argument is optional)booleanfalse

Release Notes

This version adds an autoPlay option and also fixes a simple bug that prevented playback in IE8. (I was using $(window).mousemove instead of $("document").mousemove to capture the mouse coordinates. Big thank to DrunkBowling for pointing this out.