Entries Tagged 'JavaScript' ↓

Javascript Popup Image Window

November 19th, 2006 — JavaScript, Web Development

This script opens a window using the image dimensions as the control. When you do not want to jeopardize convention and need a Click to enlarge Button, use this code.

<script>
<!--
function imagePopUp(img) {
html = "<html><head><title>Enlarged Image</title>" +  "</head><body style="margin: 0px 0; text-align:center; ">" +  "<IMG src='" + img + "'    BORDER=0 NAME=image " +  "onload='window.resizeTo(document.image.width,(document.image.height*1.3))'>;" +  "</body></html>";
popup=window.open('','image','toolbar=0,location=0,  directories=0,menuBar=0, scrollbars=0,resizable=1');
popup.document.open();
popup.document.write(html);
popup.document.focus();
popup.document.close();
};  
//-->
</script>

To call the script use a simple link.

<a href="javascript:imagePopUp('../images/yourimage.gif')">Click to enlarge</a>

This script is modified code found @ www.rgagnon.com

8 Comments

JavaScript Image Resizing Control Script

November 10th, 2006 — JavaScript, Web Development

Yahoo Stores can only take you so far. A client of mine uploads images of a product, if that image is too large it destroys the structure of the site. To fix this I would have to manually download all the images, resize them and re-upload them to Yahoo, or use JavaScript.

<script language="javascript" type="text/javascript">
<!--
function resize_images()
{
for (i = 0; i < document.images.length; i++)
{
while ( !document.images[i].complete )
{
break;
}
if ( document.images[i].width > 185 )
{
document.images[i].width = 185;
}
}
}
-->
</script>

It resizes all images. To avoid this one can edit the JavaScript to avoid images with a particular name, and/or use css background and text/image replacement techniques.
Since the script is controlled by the for statement loop, you can avoid resizing some images. Example: for (i = 0; i < document.images.length; i++) i = 0 is the image you start to resize, if this were 1 you would skip the first image. (say your first image was a header and didnt want to resize it) Where you findthe second 185 in the script is the minimum width an image must be for it to be resized. The second 185 controls the new width of your images. The last thing you must do is call the function in the body tag.

<body onLoad="resize_images();" >

This script creates a popping effect, which can be annoying, but ultimately it prevents a broken structure. Say the least it's a great temporary fix. I found javascript like this in Mike Lothar's PHPBB Theme Nosebleed v1.09

No Comments

Next Entries →