I need help with my jquery image array... Please!

[sun-tzu]

Ok, so I am building a website, and am trying to use jquery to get video thumbnails from YouTube and pass them into the corresponding images. I am still fairly new at jQuery and could use some help with the code.
Here it is:

$(function() {
	$(document).ready(function() {
		var length = 3; //This is the number of images I have to add a src to
		for (i=0; i<length; i++) {
		var vidSrc =  $("img#videos").attr("vid");
		$("img#videos").attr("src","http://img.youtube.com/vi/"+ vidSrc +"/2.jpg");
		}
	});
});

The HTML:

<img src="assets/images/LoadingAnimation.gif" id="videos" vid="peqf-LLPgZU" caption="" />
<img src="assets/images/LoadingAnimation.gif" id="videos" vid="T9vLoJa8vxY" caption="" />
<img src="assets/images/LoadingAnimation.gif" id="videos" vid="J3xr3i_wcwE" caption="" />

what I would like to do is take the vid attribute for each image and put it into the vidSrc variable...

the url of the page that I am working on is http://www.sarah.wattzup.com/#videos

Thanks in advance!

[vsmash]

First, you don't need to wrap document.ready in a function.
Second, the id of an element should be unique on a page regardless of jquery.
You have three images all with the same id. Use class if you want to assign css to them.

I don't know what the "/2.jpg" is all about.

$(document).ready(function() {
		var length = 3; //This is the number of images I have to add a src to
		for (i=0; i<length; i++) {
		var vidSrc =  $("#videos"+i).attr("vid");
		$("#videos"+i).attr("src","http://img.youtube.com/vi/"+ vidSrc +"/2.jpg");
		}
	});

<img src="assets/images/LoadingAnimation.gif" id="videos1" vid="peqf-LLPgZU" caption="" />
<img src="assets/images/LoadingAnimation.gif" id="videos2" vid="T9vLoJa8vxY" caption="" />
<img src="assets/images/LoadingAnimation.gif" id="videos3" vid="J3xr3i_wcwE" caption="" />

[sun-tzu]

Thanks! I knew the answer would be simple.

[sun-tzu]

Ok, another question. Now that I have that, what I want to ultimately do is make it so that when you click on the image, it will open up a lightbox with the youtube video in it. However, when I try to call a click function, it just uses the data from the last image. Take a look.

$(function() {
	var length = $("img.vidImg").length + 1;
	for (i=0; i<length; i++) {
	vidSrc = $("img#videos"+i).attr("vid");
	$("img#videos"+i).attr("src","http://img.youtube.com/vi/"+ vidSrc +"/2.jpg");
	$("img#videos"+i).click(function() {
		alert(vidSrc + " was clicked!");
	});
	}
	
});

When the alert comes up, it says "J3xr3i_wcwE was clicked!", because that was the vid attribute on the last image. It says that for all of them though. What do I need to do?

[vsmash]

maybe use jquery modal dialog from jquery ui.
Your best two references from here are:
1. Google "themeroller" - this will land you at the jquery ui download page

2. Standard syntax:
$("#somediv").html("stick html here wot contains embedded youtube vid for example.");