Image resize to screen resolution if image is bigger than screen resolution

Started by Aaron10, September 07, 2011, 11:44:57 AM

Previous topic - Next topic

Aaron10

Sorry for the stupid topic title didn't really know what to put but basically I'm wanting something similar to imagevenue.com's image resize, if an image is bigger than your screen resolution (for example you have 1280X720 screen, but the image is 1920X1080, it'll resize it to fit your screen with the same aspect ratio so it doesn't look stretched or anything, then if you click the image it will go to original size, click it again back to your screen resolution etc.)

Example:

Beware of clicking the following link if you dislike pr0n.

http://img155.imagevenue.com/img.php?image=409951508_the_dark_knight_7_123_91lo.jpg

(If your screen resolution is big you probably won't see it).

So what's the simplest way to do this?

kat

I edited your post, for obvious reasons...

This resizing, what is it for? Attachments? IMG tags? Something else?

Aaron10

lol yeah the image is very hardcore XD

Its for a basic HTML page like that one not on the forums, I'm building a gallery site.

EDIT: Oh wait I thought you were joking, I didn't know they had adult ads on there my bad.

kat

Oh, the image, itself, was fine.

It was the ads and stuff.

I quite enjoyed them, myself, but... ;)

Aaron10

Hey guys, I know this is a major bump but tonight I finally figured out how to do it but there's 4 small problems. It all works fine but in the W3C validator I get these:

Line 62, Column 29: character "(" not allowed in attribute specification list
  if (actualWidth<tableWidth()) {



Line 62, Column 29: element "tableWidth" undefined
  if (actualWidth<tableWidth()) {

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).



Line 68, Column 9: end tag for "tableWidth" omitted, but OMITTAG NO was specified
</script>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".



Line 62, Column 18: start tag was here
  if (actualWidth<tableWidth()) {


This is all within the head, here's the orignal code:

<script type="text/javascript">
function tableWidth()
{return windowWidth()-100;}
function windowWidth() {
if (navigator.appName=="Netscape")
return window.innerWidth;
return document.body.offsetWidth;
}
function scaleImg() {
what = document.getElementById('thepic');
actualHeight=what.height;
actualWidth=what.width;
if (  fitsInWindow() )
return;
if(what.width==tableWidth())
{
what.width=actualWidth;
what.height=actualHeight;
}
else
{
what.style.cursor = "pointer";
what.width=tableWidth();
what.height = (actualHeight/actualWidth) * what.width;
}
}
function showonclick()
{
what = document.getElementById('thepic');
if (actualWidth == what.width)
        return scaleImg();
else if (actualWidth > what.width)
{
what.width=actualWidth;
what.height=actualHeight;
}
}
function liveResize() {
what = document.getElementById('thepic');
actualHeight=what.height; actualWidth=what.width;
if (fitsInWindow())return;
if (what.width!=actualWidth) {
what.width=tableWidth();what.height = (actualHeight/actualWidth) * what.width;
}
}
function setImgWidth(){
if (fitsInWindow())return;
document.getElementById('thepic').width=tableWidth();
}
function fitsInWindow() {
   what = document.getElementById('thepic');
   var  actualWidth= what.width;
  if (actualWidth<tableWidth()) {
   return true;
  } else {
  return false;
  }
  }
</script>


The only way to fix this is CDATA tags so was wondering if anyone knew any other way?


Aaron10


kat




Advertisement: