Hi all

 

I'm trying to achieve what should be an incredibly simple effect, but without success. I have various thumbnails of YouTube videos in a gallery, and I'd like to mouse over each one and have it "animate" or crossfade between various frames of the video. YouTube provides 3 preview images for each video, and so ideally the user would see a small "slideshow" of all 3 images when he mouses over the static thumbnail.

 

A working sample of what I'd like can be seen on the website (Sorry. Link removed), although I would ideally have a "crossfade" effect between each image. So far I've tried Jquery as well as plain Javascript, which would work fine if either language had anything that resembled a "delay" or "pause" function.

 

This really should be incredibly simple, since it's really just 2 steps repeated over and over:

1. Change src attribute of img element

2. Pause for a few seconds

 

Here is the Jquery I've been working with so far. Thank you for any suggestions or help

 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".thumbs img").hover(

function(){
	// Displays image 2 on mouseover, then "pauses" with fadeTo, then image 3.
	$(this).attr("src", "http://i1.ytimg.com/vi/p9Eomp-zT0s/2.jpg")
	.fadeTo("slow",1)
	.attr("src", "http://i1.ytimg.com/vi/p9Eomp-zT0s/3.jpg")
},
function(){
	// Back to image 1 on mouseout
	$(this).attr("src", "http://i1.ytimg.com/vi/p9Eomp-zT0s/1.jpg");
}
);
});
</script>
<div class="thumbs">
<img src="http://i1.ytimg.com/vi/p9Eomp-zT0s/1.jpg"/>
</div>

Hey again - I was experimenting and have this tiny bit of code. It works and "cycles" the images each time the user mouses over - but all it needs to do now is repeat itself automatically every few seconds. I've tried to do this via the setInterval() method but it has not worked.

 

Can someone please try this code out in an HTML file and impart some wisdom? Thanks!

 

<script type="text/javascript">
function change(id){
if (id.src.match("/1.jpg")) { id.src = id.src.replace("/1.jpg","/2.jpg"); return false; }
if (id.src.match("/2.jpg")) { id.src = id.src.replace("/2.jpg","/3.jpg"); return false; }
if (id.src.match("/3.jpg")) { id.src = id.src.replace("/3.jpg","/1.jpg"); return false; }
}
</script>

<img onmouseover="setInterval(change(this),200)" src="http://i1.ytimg.com/vi/p9Eomp-zT0s/1.jpg" />

warning - This is a porn site - warning

Hi there.

Using setInterval and setTimeout can sometimes be a bit tricky because they always reference the window object.

If you use a nested function inside the change() function and then reference that with setInterval, it will work.

So your code above would look like this:

function change(id){
clearInterval(changetimer);
function swap () {
 if (id.src.match("/1.jpg")) { id.src = id.src.replace("/1.jpg","/2.jpg"); return false; }
 if (id.src.match("/2.jpg")) { id.src = id.src.replace("/2.jpg","/3.jpg"); return false; }
 if (id.src.match("/3.jpg")) { id.src = id.src.replace("/3.jpg","/1.jpg"); return false; }
 }
changetimer = setInterval(swap,1000);
}

The first line is needed to clear any existing setIntervals.

I would also separate all of the javascript from the html.

For example, if you wanted all of the images on the page to change onmouseover, you would do something like this:

window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].onmouseover = function(evt) {change(this);};
images[i].onmouseout = function(evt) {clearInterval(changetimer);};
}
}

That would leave you with clean markup like this:

<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />

So putting that javascript together would look like this:

<script type="text/javascript">
var changetimer;

function change(id){
clearInterval(changetimer);
function swap () {
 if (id.src.match("/1.jpg")) { id.src = id.src.replace("/1.jpg","/2.jpg"); return false; }
 if (id.src.match("/2.jpg")) { id.src = id.src.replace("/2.jpg","/3.jpg"); return false; }
 if (id.src.match("/3.jpg")) { id.src = id.src.replace("/3.jpg","/1.jpg"); return false; }
 }
changetimer = setInterval(swap,1000);
}

window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].onmouseover = function(evt) {change(this);};
images[i].onmouseout = function(evt) {clearInterval(changetimer);};
}
}
</script>

Hope that helps

Thank you so much, ElanMan. That really helped.