...

View Full Version : Thumbnails



everja13
07-04-2002, 07:15 AM
ok so here's what i want to do. hope you can help... i don't know much about jscript so this may be easy or impossible. either way, if you don't want to post the basic stuff, i can figure that out myself. but if you see something that sounds difficult please tell me how. :)

i have thumbnails on my site. when someone clicks them, i want a window to pop up. i want the window to basically have no scrollbars, no toolbar, etc. i just want the actually pictures, which will vary in size, to show up in the windows. but i want there to be like half a centimeter of white space around the picture on all sides. to clearly define it and everything. and then an 'X' in the top right to close it.... don't know if that will work or if it is too much to ask but hope you understand. thanks for any help...

Gordo
07-04-2002, 10:34 AM
I use the following that I got from another major forum poster (spookster maybe?) over at the old WA forum. You can play around with it to get the desired padding around your images. I've never messed with the padding personally.

Above your </head>, put:

<script language="javascript">
<!-- Begin
function imageView(imgFile,imgTitle,imgWidth,imgHeight,winPosX,winPosY){
preview = window.open("", "","resizable=yes,toolbar=no,scrollbars=no,menubar=no,status=no,directories=no,width="+imgWidth+",height="+imgHeight+",left="+winPosX+",top="+winPosY+"");
preview.document.write('<html><head><title>'+imgTitle+' - Click to close - <\/title><\/head>'+'<body onBlur="self.focus();" marginWidth="0" marginHeight="0" topmargin="0" leftmargin="0">'+'<center>'+'<a href="javascript:self.close()">'+'<img border="0" alt="Image may take a moment to load. Click the image to close the window." src="'+imgFile+'" width="'+imgWidth+'" height="'+imgHeight+'">'+'<\/a><\/center>'+'<\/body><\/html>');
preview.document.close();
}
// End -->
</script>

Some configuration notes (color coded here):

<!--// Parameter list as follows:
Image File
Title of Image
Width of Image
Height of Image
Extra padding space to allow for text
Window Position X coordinate
Window Position Y coordinate
//-->

Where you have a thumbnail, use the following (change accordingly):

<a href="javascript:imageView('large-pic.jpg','Place New Window Title Here',600,300,0,0,0)"><img border="1" src="thumbnail-pic.jpg" alt="Click for larger image" width="100" height="50"></a>

dingbatqueen
07-04-2002, 06:50 PM
This can also be done with layers. Set your layers to hide as default and each individual one to appear upon mouse click. Make a simple graphic for the 'close window' function (or you can use text) and then set that graphic to hide the layer upon mouse click. It's pretty easy to do in Dreamweaver.

Hope this helps you - good luck!!

'ding' :thumbsup:

everja13
07-04-2002, 09:02 PM
wow thanks a lot for all the help... i'll give that a try

everja13
07-05-2002, 07:04 AM
hmm i'm having trouble now actually. i'd rather not do layers, so i was trying the javascript method posted above. i can't seem to get anything to load besides a dead page though. and i'm not sure if i'm calling the script correctly... like in the href tag. hope someone can help...

k i think i got it now... i think it just may have been a spacing problem... supposed to be javascript: function instead of java script:function... i think. :)

Gordo
07-05-2002, 09:51 AM
You are correct in that it should be one word. I pasted the code direct from my working web page, but these forums (vB Code) change a special word (like javascript) here and there. :confused: And I don't know which ones, nor how to correct it. It's some sort of Moderator secret or something...because I haven't seen any *special instruction* page, etc.

Nice catch though...on seeing the added space.

everja13
07-05-2002, 05:49 PM
one more thing on this script... what i first wanted was to eliminate the window border and titlebar. however, when trying to do this, i've come across the term 'signed script.' i was wondering how to go about making a script 'signed' since a few javascript features require this.

thanks...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum