I'm currently using the jQueary Image Replacement gallery on a site that I'm working on. The problem is now the client also wants to add video to the image area along with JPGs. I'm not sure how to do this, because I don't know how to write Javascript. The following is the jQueary scripts. Is there a way to add video functionality? Thank for any help.

 

 

First append an empty <em> to H2.

 

When a link within the <p class=thumbs> is clicked:

- store its href attribute into a variable "largePath"

- store its title attribute into a variable "largeAlt"

- replace the <img id="largeImg"> scr attribute with the variable "largePath" and replace the alt attribute with the variable "largeAlt"

- Set the em content (within the h2) with the variable largeAlt (plus the brackets)

 

 

$(document).ready(function(){

 

$("h2").append('<em></em>')

 

$(".thumbs a").click(function(){

 

var largePath = $(this).attr("href");

var largeAlt = $(this).attr("title");

 

$("#largeImg").attr({ src: largePath, alt: largeAlt });

 

$("h2 em").html(" (" + largeAlt + ")"); return false;

});

 

});

Put the image into a div with an ID and then have it change the content of the div depending on what they click. Like clicking on an image thumbnail would clear the DIV and put the image in and clicking on a video thumbnail would clear the DIV and embed the video. Shouldn't be too hard.

Hi Henaro, Thank you very much for your response. Unfortunately I'm still a little confused. below is a list of the HTML and Javascript. The javascript replaces the larger image by sourcing the (href) of the thumbnail and it replaces the (img id=). How would I change this to have it replace the IMG area with a video/SWF file.

 

Thanks Again, I really do appreciate your help.

 

 

<!--this is where the large images appear-->

 

<img id="largeImg" src="images/_portfolio/_unionGas/ugSite.jpg" /></div>

 

 

 

<!--this is where the thumb nails go-->

 

<p class="thumbs">

<a href="images/_portfolio/_unionGas/ugSite.jpg" title="Website"><img src="images/_portfolio/_unionGas/ugSite_sml.jpg" /></a>

 

 

<!--the javascript-->

 

$(document).ready(function(){

 

$("h2").append('<em></em>')

 

$(".thumbs a").click(function(){

 

var largePath = $(this).attr("href");

var largeAlt = $(this).attr("title");

 

$("#largeImg").attr({ src: largePath, alt: largeAlt });

 

$("h2 em").html(" (" + largeAlt + ")"); return false;

});

 

});

I'm not very familiar with jQuery, but this is how I would do it:

<!--this is where the large images appear-->
<div id="large">
<img id="largeImg" src="images/_portfolio/_unionGas/ugSite.jpg" />
</div>



<!--this is where the thumb nails go-->

<p class="thumbs">
<a href="#" onclick="r_content(2, 'images/_portfolio/_unionGas/ugSite.jpg')" title="Website"><img src="images/_portfolio/_unionGas/ugSite_sml.jpg" /></a>

 

You could make a function, r_content(n, c). If n ==1 it would be video and c would consist of the video ID (like, say a youtube ID that you can easily call back and render). Elseif n == 2 and c would be the link to the image. You could use jQuerys empty() and append operations to minipulate the ID "large".

 

Have a look here:

 

http://docs.jquery.com/DOM/Manipulation

 

That's how I would do it, but I'm sure there are more efficient ways.