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>
<SCRIPT>
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="";
_CONTENT+="<HTML>n";
_CONTENT+="<head>n";
_CONTENT+="<"+"SCRIPT>n";
_CONTENT+="function specialInit()n";
_CONTENT+="{n";
_CONTENT+="if (document.all || document.layers)n";
_CONTENT+="window.resizeTo(document.images[0].width + 50,document.images[0].height + 180);n";
_CONTENT+="}n";
_CONTENT+="</"+"SCRIPT>n";
_CONTENT+="</head>n";
_CONTENT+="<BODY onLoad='specialInit();'>n";
_CONTENT+="<"+"SCRIPT>n";
_CONTENT+="document.write('<center>');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";
_CONTENT+="document.write('</center>')n";
_CONTENT+="</"+"SCRIPT>n";
_CONTENT+="</BODY>n";
_CONTENT+="</HTML>n";

  var _parms = 'directories=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,resizable=yes';
 var _windowName = "PicViewer";
  if(_PAGE)
  {
    fileName = 'http://www.js-examples.com/?' + escape(imageSrc) + '&' + escape(imageTitle);
    myWindowHandle = window.open(fileName,_windowName,_parms);
  }
  else
  {
    myWindowHandle=window.open("",_windowName,_parms);
    myWindowHandle.document.open();
    myWindowHandle.document.write(_CONTENT);
    myWindowHandle.document.close();
  }
  myWindowHandle.focus();
}
</script>

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('http://www.js-x.com/js/pic3.gif','Color Ball')" height=10 src="http://www.js-x.com/js/pic3.gif" 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.
<HTML>
<head>
function specialInit()
{
    if (document.all || document.layers)
      window.resizeTo(document.images[0].width + 50,document.images[0].height + 180);
}
</head>
<BODY onLoad='specialInit();'>
<SCRIPT>
var passed     = location.search ? unescape(location.search.substring(1)) + '&' : '';
var imageSrc   = passed ? passed.substring(0,passed.indexOf('&')) : 'http://js-x.com/js/pic4.gif';
passed         = passed.substring(passed.indexOf('&')+1);
var imageTitle = passed ? passed.substring(0,passed.indexOf('&')) : 'Default Title';
document.write('<center>');
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>");
document.write('</center>')
</SCRIPT>
</BODY>
</HTML>
-->

Times Viewed: 6

Leave a Reply

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