Need Help with Image Replacement Script
I am trying to make a Picture Gallery Page. On the left is a 5 x 7 set of thumbnail pictures and on the right is room for a full size image. By clicking on one of the thumbnails, I want the full size version to get placed into the right area. I am having some problems with what to code as my script.
The page is laid out as follows:
- <table border="5" width="1000px" cellspacing="5" cellpadding="5" rules="all" align="center" frame="border">
- <tr>
- <td width="100px">
- <a class='thumb' href="#"><img src="thumbs/t1.jpg" alt="" />
- </a></td>
- <td width="100px">
- <a class='thumb' href="#"><img src="thumbs/t2.jpg" alt="" />
- </a></td>
- <td width="100px">
- <a class='thumb' href="#"><img src="thumbs/t3.jpg" alt="" />
- </a></td>
- <td width="100px">
- <a class='thumb' href="#"><img src="t4.jpg" alt="" />
- </a></td>
- <td width="100px">
- <a class='thumb' href="#"><img src="thumbs/t5.jpg" alt="" />
- </a></td>
- <td rowspan="7" width="500px">
- <img src="images/p1.jpg" alt="" id="image" width="500" />
- </td>
- </tr>
- 6 more sets of <tr>....</tr>
- </table>
and the script that I trying to get right is:
- $(document).ready(function() {
- $(".thumb").click() {
- var field = $(this).find("img");
- var image = $("#image");
- $src=field.attr("src");
- $jpg=split($src,6);
- $src="images"+$jpg;
- image.attr("src",$src);
- }); // end click
- }); // end ready
I am obviously doing something wrong with the select or something. The intent is to identify the thumbnail being clicked on, get its src and change the thumb/x.jpg to images/x.jpg and use that as the src of of the id="image" img tag).