James Sedoff

Email conversation

From	James Sedoff
To	Me
Subject	Resizing images off of links in frameset
Date	30 October 2005 10:44

Sorry that is such a convoluted subject line...

I have a website that is built around frames (3 frames).  I have two
(right and bottom) which have thumbnails of several pictures and I want
to be able to click on them and see a larger sized image in the main
(3rd) frame.  The problem is that without creating a separate webpage
for each, I end up getting the full image which of course is larger that
the frame itself.  My question is, is there a way to resize the image in
the frame after clicking on any given link, or will I inevitably have to
make distinctive webpages with the corrected size for each individual
picture?

Thank you for your time and thoughts, Jim

From	Me
To	James Sedoff
Subject	Re: Resizing images off of links in frameset
Date	31 October 2005 18:19

Jim,

> My question is, is there a way to resize the image in
> the frame after clicking on any given link

My recommendation:

use a server side script (for example, PHP) to display the images;
foo.php?image=1
The server side script can generate the page looking like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Image</title>
<style type="text/css">
html, body { margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="resizeImage.js"></script>
</head>
<body>
<div><img src="bar.jpg" alt="a picture of whatever"></div>
</body>
</html>

Then the resizeImage.js can resize the image to fit:

function doresize() {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
 } else if( document.documentElement &&
   ( document.documentElement.clientWidth ||
   document.documentElement.clientHeight ) ) {
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth ||
   document.body.clientHeight ) ) {
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
 }
 var imw = document.images[0].width;
 var imh = document.images[0].height;
 var thescale = 0;
 if( imh < myHeight ) { theScale = myHeight / imh; }
 if( imw < myWidth ) {
  var theScale2 = myWidth / imh;
  if( theScale2 < theScale ) { theScale = theScale2; }
 }
 if( theScale ) {
  document.images[0].width = Math.round( document.images[0].width * theScale);
  document.images[0].height = Math.round( document.images[0].height * theScale);
 }
}
window.onload = function () {
 if( !document.images[0] || !document.images[0].width ) {
  document.images[0].onload = doresize;
 } else {
  doresize();
 }
}


or something like that. whatever works for you ;)


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	James Sedoff
To	Me
Subject	Re: Resizing images off of links in frameset
Date	15 November 2005 06:31

Thanks for the code.  Sorry for responding so late, I have been
incredibly at school and just now I have had some time to work on the
website to see if it works.

Have a wonderful Thanksgiving.

Best wishes, Jim

James Sedoff

Navigation

Search

Site navigation

Email conversation