This easy to follow inline Javascript is a great way to create click-to-enlarge image galleries. Or to display several pictures without loading your Web page full of images.
Besides the main image, you will want to create a second image to represent the main image. This can either be a graphic, or a thumbnail of the original image as we have done in the example below. You can also use tables to help format the positioning of the main image and thumbnails. If using this technique for a click-to-enlarge gallery, it works best to have all the photos the same size so the copy under the photos does not jump.
<table border="0" cellspacing="0" cellpadding="0" style="border:
1px solid #dddddd; margin-left: auto; margin-right: auto;">
<tr>
<td colspan="4" style="padding: 12px;"><img src="swap_1_large.png" width="200" height="225" alt="Image
Swap Sample" name="swap" style="border: 1px solid #dddddd;
padding: 16px;" /></td>
</tr>
<tr>
<td colspan="4"><div style="font-size: 11px; text-align:
center; padding: 0px 0px 12px 0px;">« CLICK TO ENLARGE »</div></td>
</tr>
<tr>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_1_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_1_large.png’;" /></div></td>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_2_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_2_large.png’;" /></div></td>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_3_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_3_large.png’;" /></div></td>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_4_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_4_large.png’;" /></div></td>
</tr>
</table>
1px solid #dddddd; margin-left: auto; margin-right: auto;">
<tr>
<td colspan="4" style="padding: 12px;"><img src="swap_1_large.png" width="200" height="225" alt="Image
Swap Sample" name="swap" style="border: 1px solid #dddddd;
padding: 16px;" /></td>
</tr>
<tr>
<td colspan="4"><div style="font-size: 11px; text-align:
center; padding: 0px 0px 12px 0px;">« CLICK TO ENLARGE »</div></td>
</tr>
<tr>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_1_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_1_large.png’;" /></div></td>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_2_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_2_large.png’;" /></div></td>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_3_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_3_large.png’;" /></div></td>
<td><div style="width: 50px; margin: 0px auto 12px auto;"><img
src="swap_4_large.png" width="50" height="56" alt="Thumbnail" onclick="document.swap.src=’swap_4_large.png’;" /></div></td>
</tr>
</table>
 |
|||
|
« CLICK TO ENLARGE »
|
|||
|
|
 |
 |
 |
