Auto-Size Image popups

[Total: 0    Average: 0/5]

What to make an image clickable to view it larger?

Head Code:

<title>Page with Picture - Click to show bigger</title>
var _PAGE="";
    _PAGE=""; /* Specify an actual page if you don't want to use the popup code. */

var _CONTENT=""; /* this holds the data to write if no external html file is used */

function openImageWindow(imageSrc,imageTitle)
 * if you use the name "_PAGE" for the page
 * you will have no problems at all
 * however if you change the name to something else
 * remember to change the reference to it in the following line of code
 * to reference your own filename..
 * No _PAGE specified uses the javascript code embedded on this page.

_CONTENT+="function specialInit()n";
_CONTENT+="if (document.all || document.layers)n";
_CONTENT+="window.resizeTo(document.images[0].width + 50,document.images[0].height + 180);n";
_CONTENT+="<BODY onLoad='specialInit();'>n";
_CONTENT+="document.write('<b><font color=\'#ffffff\'>');n";
_CONTENT+="document.write('<span style=\'BACKGROUND-COLOR:#0000ff\'> ');n";
_CONTENT+="document.write('"+imageTitle+"' +'  </span></font></b><HR>');n";
_CONTENT+="document.write('<IMG SRC=\'"+imageSrc+"\'>');n";
_CONTENT+="document.write('<HR><P><P><P><FORM><INPUT TYPE=button VALUE=Close onClick=window.close()></FORM>');n";

  var _parms = 'directories=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,resizable=yes';
 var _windowName = "PicViewer";
    fileName = '' + escape(imageSrc) + '&' + escape(imageTitle);
    myWindowHandle =,_windowName,_parms);

Body Code:

<!--here you can reference any image you like in any file you like.
you could even use it under abutton etc... My self i use it in a shopping cart to popup
a large image of a thumbnail..
Click on this very small image -- it will popup a bigger window and show the image with the title of the image.
<IMG onclick="openImageWindow('','Color Ball')" height=10 src="" width=10 border=0>

  -- This entire HTML block can be used as an external file.
  -- Be sure to make the _PAGE variable point to this file.
function specialInit()
    if (document.all || document.layers)
      window.resizeTo(document.images[0].width + 50,document.images[0].height + 180);
<BODY onLoad='specialInit();'>
var passed     = ? unescape( + '&' : '';
var imageSrc   = passed ? passed.substring(0,passed.indexOf('&')) : '';
passed         = passed.substring(passed.indexOf('&')+1);
var imageTitle = passed ? passed.substring(0,passed.indexOf('&')) : 'Default Title';
document.write('<b><font color='#ffffff'>');
document.write('<span style='BACKGROUND-COLOR:#0000ff'>&nbsp;');
document.write(imageTitle +' &nbsp;</span></font></b><HR>');
document.write('<IMG SRC='' + imageSrc + ''>');
document.write("<HR><P><P><P><FORM><INPUT TYPE='button' VALUE='Close' " + "onClick='window.close()'></FORM>");

Times Viewed: 6

Leave a Reply

Your email address will not be published. Required fields are marked *