Forum Moderators: open

Message Too Old, No Replies

400 Thumbnails to Link

There must be a way to shorten code here

         

bumpaw

1:07 pm on Jul 6, 2004 (gmt 0)

10+ Year Member



I have 400 thumbnails linking to their larger version with:

<a href="javascript:;"onClick="window.open('images/dog_large.jpg', 'animals', config='height=600,width=600,top=25')"> <img src="images/dog_small.jpg" alt=
"dog_small.jpg (149264 bytes)" width="194" height="146" ></a>

It seems like there ought to be a way avoid having this 400 times and use a function.

ajkimoto

2:53 pm on Jul 6, 2004 (gmt 0)

10+ Year Member



bumpaw,

I wasn't sure if you were talking about having to write the anchor tag 400 times or the window.open 400 times. If you meant the latter, something like this should work assuming that all the thumbnails end in '_small.jpg' and all the large images end in '_large.jpg':

<script type="text/javascript">
<!--
//obj is the calling link
//win is the window name
//h is the window height
//w is the window width
function showLarge(obj,win,h,w){
//get src of thumbnail image
var smallSrc=obj.firstChild.src
//swap out _small with _large
var bigSrc=smallSrc.replace('_small','_large')
//open the window
window.open(bigSrc, win, config='height='+h+',width='+w+',top=25')
}
//-->
</script>
</head>

<body>
<a href="javascript:void(0)" onclick="showLarge(this,'animals',600,600)"><img src="images/dog_small.jpg" alt=
"dog_small.jpg (149264 bytes)" width="194" height="146" ></a>

If your large images will always fit in a 600x600 window, you could omit the h and w parameters.

Also, if you want only one popup window as opposed to one for 'animals' one for 'category2', etc. you can omit the win parameter and just use a constant for the window name.

Hope this helps,

ajkimoto

bumpaw

11:41 am on Jul 10, 2004 (gmt 0)

10+ Year Member



assuming that all the thumbnails end in '_small.jpg' and all the large images end in '_large.jpg':

Unfortunately this is not the case. The large images don't end in '_large.jpg'. Thanks for your help, but I guess we will leave it like it is.

Rambo Tribble

1:46 pm on Jul 10, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It should be possible to store the URL's in either a two-dimensional array (probably less prone to error, with the volume of data you have) or a pair of parallel arrays (simpler conceptually). Then you could selectively load the URL's as needed through a simple function.

Marcia

2:56 pm on Jul 10, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try looking for a Perl thumbnail graphics script. There are some out there that do it automatically server-side. I once tried one a couple of years ago and it was a total no-brainer to use.