PDA

View Full Version : Script to resize JPGs on webpage per frame size/or per screen resolution...


andrewaaa5
16th of July 2007 (Mon), 13:49
does anyone know of any script that can resize images (jpgs) depending on the size of browser frame, or the size of monitor resolution?

e.g. if someone has less resolution, say, on a laptop, that the images are resized accordingly... etc...

RickH
17th of July 2007 (Tue), 04:46
does anyone know of any script that can resize images (jpgs) depending on the size of browser frame, or the size of monitor resolution?

e.g. if someone has less resolution, say, on a laptop, that the images are resized accordingly... etc...

I'd recommend using the (built in) BananAlbum skin in JAlbum (http://jalbum.net/). It is free, very flexible, and does what you need. I created this (http://soccerbonkers.com) recently with it. I set the maximum size to 1024x768, but if you resize your browser window smaller, you'll see it does a pretty good job of scaling down.

tim
17th of July 2007 (Tue), 07:16
You can have the web browser do it for you, with code something like this.

<img src="whatever.jpg" width="50%" />

andrewaaa5
17th of July 2007 (Tue), 12:01
You can have the web browser do it for you, with code something like this.

<img src="whatever.jpg" width="50%" />

but is this variable? e.g. if one has a high resolution widescreen, the images should be BIG, and for the same person when viewing on a small laptop the images should be shrunk depending on the browser size??

and thanks RickH, I shall look in to that also...

cosworth
17th of July 2007 (Tue), 12:08
I have considered doing this for my site to cater to highbandwidth and WUXGA users. Make 3 sites, one for 1024, one for 1440 and another for 1920 - all with properly resized images.

Only caveat here is that some people disable java.

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768 ))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>

andrewaaa5
17th of July 2007 (Tue), 15:33
I have considered doing this for my site to cater to highbandwidth and WUXGA users. Make 3 sites, one for 1024, one for 1440 and another for 1920 - all with properly resized images.

Only caveat here is that some people disable java.

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768 ))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>

This javascript really works a treat in my tests on Mozilla in my set up, so thank to pointing me towards it. There is an issue though, on Internet Explorer it pops up with a 'warning' box that I am sure will scare off a few people :(

Also, I changed the sizing that you mentioned from this:
if ((screen.width>=1024) && (screen.height>=768 ))
to this:
if ((screen.width>=1280) && (screen.height>=1024))

The best solution just now is for me to 'sleep on it' and hopefully get a bright idea by the time I awake...

andrewaaa5
22nd of July 2007 (Sun), 08:43
Ok, so I have made some test: If anyone wants to test, or give feed back I'd be grateful:

http://www.butterpeanut.com/temp3/

if screen resolution is below 1280x1024, it should automatically redirect you to a 'lower res' page with smaller JPGs.

...what I am still annoyed about is the 'pop up' message that IE users get to 'allow blocked' content, but I guess IE just wants to play safe; understandable :)
there is also a 'splash' index page for those that have Java disabled - but that will take people to the 'hi res' page with no other options ( < bad move???)

tim
22nd of July 2007 (Sun), 19:50
I think you're going the wrong way with this. Unless it's absolutely necessary avoid active content. Why do you need to show high res images to people? Just show the low res, and provide a link to the high res image.

andrewaaa5
23rd of July 2007 (Mon), 03:55
I think you're going the wrong way with this. Unless it's absolutely necessary avoid active content. Why do you need to show high res images to people? Just show the low res, and provide a link to the high res image.

'BIG' is beautiful no??

well, actually that was a good suggestion that you made Tim... maybe oneday I will get around to implementing that...

tim
23rd of July 2007 (Mon), 04:09
www.jalbum.net - it will automatically create thumbnails, medium res images, and link to the original high res images if you tell it too. Takes no time to set up, great program.

andrewaaa5
23rd of July 2007 (Mon), 04:25
www.jalbum.net - it will automatically create thumbnails, medium res images, and link to the original high res images if you tell it too. Takes no time to set up, great program.

...looks like carp. i do not like using these 'made for the masses' album generators these days. thanks, but no thanks. although they are amazingly versatile, and fast, they take away a lot of individuality. ok, they do have their uses, and I do use them at times for quick webpage gallery creations, but try to avoid such applications (and the galleries they produce) if possible....

..sorry if this response seems harsh, it is not meant to be as harsh as it sounds...

tim
23rd of July 2007 (Mon), 05:04
JAlbum is infinitely configurable, especially if you know a little Java or shell scripting. I have a skin I wrote for my professional website. I really don't like flash galleries so I keep it simple.

andrewaaa5
23rd of July 2007 (Mon), 05:18
JAlbum is infinitely configurable, especially if you know a little Java or shell scripting. I have a skin I wrote for my professional website. I really don't like flash galleries so I keep it simple.

ok, will check when i get a spare afternoon. I've been so annoyed with 'instant' albums in the past that I have tried to avoid them.
..and I am only just getting my head around CSS and Java just now, but actually quite enjoying it :)