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.
| Argument | Description | Type | Default |
|---|---|---|---|
| images | An array of the thumbnail images to use. Ideally these should all be the same size as the original image. (Required) | array | [] |
| delay | The speed in which to display your images. (This argument is optional) | integer | 450 |
| autoPlay | Determines if the image will cycle though the images via a mouseover or should play on load | boolean | false |
| showProgress | Determines if a progress bar is displayed on first load. (This argument is optional) | boolean | false |
Release Notes
The DEMO code had some errors that prevented the link example from working.