CJ Image Video Previewer 1.0.2

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.

The plugin has a few options you can pass to it. You can set the delay amount and determine if you want to show the "image loading" progress bar. I'm currently in the middle of re-writing my blog site, so I'm not going to bother posting detailed instructions just yet. Just take a look at the demo source. I've provided three different examples that should help you figure things out. If not, give me a shout out below. Enjoy!

7 responses to "CJ Image Video Previewer 1.0.2"

Doug
Doug says:
This version has been tested with jQuery 1.4.
gooddesignusa
I couldn't d/l the plugin. Tried making an account and eventually I was able to. When I log in though it seems like i'm not. Anyways the demos dont work. It says I dont have access.


wouldn't let me post this b/c it said the email was taken by my account. So not being able to log in is confirmed.
Doug
Doug responds:
@gooddesignusa - Just to double check, your trying to download/view demo from the links on this page and not from another website, correct?

If you are, could you let me know what browser and version you are using?

EDIT: If you registered, you should have received an e-mail to confirm your account. If your not getting the e-mail, make sure you are not blocking e-mails from cjboco.com. Your registration info will automatically be purged after an hour, so you can try again.

EDIT2: There was an issue with the login. A very nice typo that has since been fixed. You should be able to login now.
gooddesignusa
I'm able to log in now. I now see my name and a logout button in the top left.

When clicking on the demo link on this page ( http://www.cjboco.com/projects/cj-image-video-previewer/1.0.2/demo/demo1.cfm )

I get a page that reads "sorry you are attempting to access a file or image from an unauthorized location"

I doubt this is a browser thing, seems like a permission thing.
Doug
Doug responds:
@gooddesignusa - If you paste that link into the browser's location bar, you will see that error. If you click on the "demo" button from this page you should see the demo.

This is to prevent other websites from linking directly to the download and demo pages. I want them to link to the project page instead.

If you are clicking on the button and seeing that error, let me know what browser/os you are using and I can run some test. I've run this through the latest versions of FireFox, IE7, IE8 (Win) and Safari, FireFox (Mac) and I'm not having this problem.
gooddesignusa
@Doug - Firefox 3.6.2 on mac os x 10.4. Works fine in safari though :)
Doug
Doug responds:
@gooddesignusa - Hmmmm.... my Firefox 3.6.2 is working. What plug-ins do you have installed with your Firefox. If you don't mind helping me on this. ;)
DrunkBowling
Great work! Are there any plans to make this work with IE8 or any tricks I can implement to do so?

Thanks!
DrunkBowling
Oh, also, is it possible to have the images remain animated rather than only during mouseovers?
Doug
Doug responds:
@DrunkBowling - If it's not working in IE8 (Which I believe I tested it in) then it might have something to do with the way I'm pre-loading the images. This was a problem with a few other scripts I had. I'll take a look.

As for the animating instead of just on mouseover, it's possible, but it's not something I would add to the main branch of the script. It goes against the basic function of what this is. (ie. supposed to mimic typical video previews).

To change it, all you would need to do is change the "$(sys.elem).hover()" portion of the init() function with something like...

sys.state = true;
setUpImageQue();

* Replace the entire .hover() call, not just the single line.

Let me know if you have problems.
DrunkBowling
@Doug - Thanks for the reply.. Unfortunately, I'm still unable to get it to autoplay. I'd try fiddling with it some more..

At first I thought maybe they weren't working due to something I did on my page but I tested your demo in IE8 on multiple computer's and they still wouldn't play..

Keep up the great work on this! =)
Doug
Doug responds:
@DrunkBowling - Ok, I just tried it in IE8 and it is failing. I'm also getting a weird error in Safari which I'm having a hard time tracking down.

The plus side, is I'm adding your autoPlay option to the main branch. The down side is that I'm right in the middle of a big project and I'm not sure when I'm going to have time to clean this up. I think it needs a complete re-write.

If anyone has the time to figure out what's going on, be sure to let me know. Sorry for the hassle.
sathia
sathia says:
no luck yet with explorer 8?
Doug
Doug responds:
@sathia - I have it on my list of things to do, but unfortunately my list is very large at this point. :-)
Doug
Doug says:
Fixed the problem with IE8 and I have also added an autoPlay option. Please check out version 1.1.0

Comments are closed.