Combine an existing script with JQuery

jQuery, onclick, replace image

[AndieR]

Hello to all,

I'm not really all that good with javascript but I've been trying to learn jQuery because it does amazing things.

I have an existing script that displays an swf that in turn displays an image and I have been trying to understand how to combine that script and jquery to have a set of thumbnails on my page and have the image src replaced on the old script onclick?... Any suggestions greatly appreciated...

Thank you!
Andie

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
});
});
</script> 
 
<script type="text/javascript"> 
 var so = new SWFObject("zoom.swf", "zoomFlash", "585", "389", "7", "#FFFFFF");
 so.addVariable("image","imagetobereplaced.jpg"); 
 so.addParam("menu","false");
 so.write("zoomFlash"); 
</script>
<p class="thumbs"> 
<a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a> 
<a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a> 
<a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a> 
<a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a> 
<a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a> 
</p> 

[whoisgregg]

To clarify, do you want the user to click inside the flash object to change a regular <img> on the page?

Or for people to click a thumbnail <img> to change the flash object's image variable?

[AndieR]

Hello!

Thanks for the reply, I'd like for people to click the thumbnail <img> and change the flash object's image variable. What I'm really wondering is when you have an existing script like this how do you point to it from a JQuery call?...

Thank you!
Andie

[whoisgregg]

If you move your entire SWFObject block above your "$(document).ready(function(){" block, then the

so

variable should be available for you to reference in your jQuery function.

Then it all comes down to whether or not the SWFObject has the right hooks to change that variable "live" after it has writtten the flash object.

After moving the code around, you could try something as simple as:

[pre]$(".thumbs a").click(function(){
   var largePath = $(this).attr("href"); 
   var largeAlt = $(this).attr("title");
   $("#largeImg").attr({ src: largePath, alt: largeAlt });
   so.addVariable("image", largePath); 
});[/pre]

If that doesn't work, look at the documentation for SWFObject to see if there is a method to dynamically change a variable.

[AndieR]

Hello,

This is very helpful, I really see how you can make this kind of situations work now.

Thank you!
Andie