Menu
Hi all–
I’m an experienced VB database devloper but a javascript novice. I’m having trouble with a script; the idea is for a user to click on an image in a thumbnail strip — contained in an iframe — and for the larger corresponding image to appear in the main window. I’ll post the script below. The problem is that the images are not all the same size, so I had to specify the size — this is causing the images to resize to the new iage size before the image is loaded. This is only happening in Windows browsers. I’m thinking the solution may be to preload the images, but that would require a sizable up-front investment. Maybe someone has an idea??
main page:
<script language=”JavaScript”>
var lg_image = new Array()
lg_image[0] = “Images/Editorial/large/fish_lg.jpg”
lg_image[1] = “Images/Editorial/large/cabo_pots_lg.jpg”
lg_image[2] = “Images/Editorial/large/bike_venezuela_lg.jpg”
lg_image[3] = “Images/Editorial/large/corn_napkin_lg.jpg”
lg_image[4] = “Images/Editorial/large/fruit_lg.jpg”
lg_image[5] = “Images/Editorial/large/eggs_lg.jpg”
lg_image[6] = “Images/Editorial/large/mexico_girls_lg.jpg”
lg_image[7] = “Images/Editorial/large/cozumel_lg.jpg”
lg_image[8] = “Images/Editorial/large/pears_lg.jpg”
lg_image[9] = “Images/Editorial/large/mexico_knife_lg.jpg”
lg_image[10] = “Images/Editorial/large/river_lg.jpg”
lg_image[11] = “Images/Editorial/large/mexico_pier_lg.jpg”
lg_image[12] = “Images/Editorial/large/sky_chairs_lg.jpg”
lg_image[13] = “Images/Editorial/large/peppers_lg.jpg”
lg_image[14] = “Images/Editorial/large/surfer1_lg.jpg”
lg_image[15] = “Images/Editorial/large/bagpiper_lg.jpg”
lg_image[16] = “Images/Editorial/large/surfers_lg.jpg”
lg_image[17] = “Images/Editorial/large/sj_jazz_lg.jpg”
var lg_image_width = new Array()
lg_image_width[0] = “400”
lg_image_width[1] = “232”
lg_image_width[2] = “400”
lg_image_width[3] = “232”
lg_image_width[4] = “400”
lg_image_width[5] = “232”
lg_image_width[6] = “455”
lg_image_width[7] = “232”
lg_image_width[8] = “325”
lg_image_width[9] = “232”
lg_image_width[10] = “400”
lg_image_width[11] = “232”
lg_image_width[12] = “400”
lg_image_width[13] = “325”
lg_image_width[14] = “400”
lg_image_width[15] = “325”
lg_image_width[16] = “400”
lg_image_width[17] = “400”
var lg_image_height = new Array()
lg_image_height[0] = “247”
lg_image_height[1] = “325”
lg_image_height[2] = “325”
lg_image_height[3] = “325”
lg_image_height[4] = “286”
lg_image_height[5] = “325”
lg_image_height[6] = “286”
lg_image_height[7] = “325”
lg_image_height[8] = “325”
lg_image_height[9] = “325”
lg_image_height[10] = “286”
lg_image_height[11] = “325”
lg_image_height[12] = “325”
lg_image_height[13] = “325”
lg_image_height[14] = “286”
lg_image_height[15] = “400”
lg_image_height[16] = “286”
lg_image_height[17] = “286”
// This defines what to do when an image is clicked on
function image_click(clicks)
{
if(clicks==0){document.images[‘large’].src=lg_image[0];document.images[‘large’].width=lg_image_width[0];document.images[‘large’].height=lg_image_height[0];}
if(clicks==1){document.images[‘large’].src=lg_image[1];document.images[‘large’].width=lg_image_width[1];document.images[‘large’].height=lg_image_height[1]}
if(clicks==2){document.images[‘large’].src=lg_image[2];document.images[‘large’].width=lg_image_width[2];document.images[‘large’].height=lg_image_height[2]}
if(clicks==3){document.images[‘large’].src=lg_image[3];document.images[‘large’].width=lg_image_width[3];document.images[‘large’].height=lg_image_height[3]}
if(clicks==4){document.images[‘large’].src=lg_image[4];document.images[‘large’].width=lg_image_width[4];document.images[‘large’].height=lg_image_height[4]}
if(clicks==5){document.images[‘large’].src=lg_image[5];document.images[‘large’].width=lg_image_width[5];document.images[‘large’].height=lg_image_height[5]}
if(clicks==6){document.images[‘large’].src=lg_image[6];document.images[‘large’].width=lg_image_width[6];document.images[‘large’].height=lg_image_height[6]}
if(clicks==7){document.images[‘large’].src=lg_image[7];document.images[‘large’].width=lg_image_width[7];document.images[‘large’].height=lg_image_height[7]}
if(clicks==8){document.images[‘large’].src=lg_image[8];document.images[‘large’].width=lg_image_width[8];document.images[‘large’].height=lg_image_height[8]}
if(clicks==9){document.images[‘large’].src=lg_image[9];document.images[‘large’].width=lg_image_width[9];document.images[‘large’].height=lg_image_height[9]}
if(clicks==10){document.images[‘large’].src=lg_image[10];document.images[‘large’].width=lg_image_width[10];document.images[‘large’].height=lg_image_height[10]}
if(clicks==11){document.images[‘large’].src=lg_image[11];document.images[‘large’].width=lg_image_width[11];document.images[‘large’].height=lg_image_height[11]}
if(clicks==12){document.images[‘large’].src=lg_image[12];document.images[‘large’].width=lg_image_width[12];document.images[‘large’].height=lg_image_height[12]}
if(clicks==13){document.images[‘large’].src=lg_image[13];document.images[‘large’].width=lg_image_width[13];document.images[‘large’].height=lg_image_height[13]}
if(clicks==14){document.images[‘large’].src=lg_image[14];document.images[‘large’].width=lg_image_width[14];document.images[‘large’].height=lg_image_height[14]}
if(clicks==15){document.images[‘large’].src=lg_image[15];document.images[‘large’].width=lg_image_width[15];document.images[‘large’].height=lg_image_height[15]}
if(clicks==16){document.images[‘large’].src=lg_image[16];document.images[‘large’].width=lg_image_width[16];document.images[‘large’].height=lg_image_height[16]}
if(clicks==17){document.images[‘large’].src=lg_image[17];document.images[‘large’].width=lg_image_width[17];document.images[‘large’].height=lg_image_height[17]}
}
// –>
</script>
iframe code:
<td width=”75″ height=”55″ align=”center” valign=”middle”><img src=”Images/Editorial/small/fish_sm.jpg” id=”1″ class=”thumbSelected”
onClick=”window.parent.image_click(0);setclass(‘1’, ‘thumbSelected’);” width=”86″ height=”53″></td>
Thanks in advance.
Chris