thumbnail which opens up image html

Chiz · 6 Jan 2007 at 15:13

Code:

<a href="images/work/photography/1.jpg" onclick="window.open
 (this.href, 'contents', 'menubar=0, location=0, toolbar=0, scrollbars=1, status=0, resizable=0');  return false;" target="_blank">
<img class="border5" src="images/work/photography/thumbs/1.jpg" alt=""></img></a>

So that's my code to make an image load after clicking a thumbnail of that image.

My problem is that the page that opens, opens full screen. I understand you can simply enter 'height=??, width=??,' but i have roughly 50 images, and i would find this tedious to do over and over and....

so i was wondering if there was a piece of code that can just auto-adjust the pop up window to the size of the image.

Chiz · 7 Jan 2007 at 13:37

nobody at all?

rpstewart · 7 Jan 2007 at 14:07

First create a blank html page called popup.htm containing the code below:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
 <script language='javascript'>
   var arrTemp=self.location.href.split("?");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
 </script>
<title>Full Size View</title></HEAD>
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0"
marginheight="0" leftmargin="0" marginwidth="0">
<script language='javascript'>
 document.write( "<img src='" + picUrl + "' border=0>" );
 </script>
</BODY>
</HTML>

Then in your main pages add a <script> section to the <head> tag:

Code:

<script language="Javascript"> 
   function PopupPic(sPicURL) { 
     window.open( "popup.htm?"+sPicURL,"", "resizable=1,HEIGHT=200,WIDTH=200"); 
   } 
   </script>

You can then call the popup as a link from your thumbnails:

Code:

<a href="javascript:PopupPic('image.JPG')"><img src="thumbnail.JPG"></a>

thumbnail which opens up image html

Chiz

Chiz

Chiz

Chiz

rpstewart

rpstewart