?
Solved

Auto Image resizing

Posted on 2003-02-20
6
Medium Priority
?
302 Views
Last Modified: 2008-03-17
I hope I am in the right forum for this as it seems that a javascript would be the solution..

I have an older web template that generate HTML pages that contain images. The old template was designed for 800x600 resolution. In this day and age that is too small.

I modeified the template to generate two seperate galleries based on screen resolution. It is currently a manual process where the use must select either 800x600 or 1024x768 resolution as they enter the site.

This solves the problem, but the draw back is obviously I must maintain two galleries of images, one for 800x600 display and the other for the 1024x768. Not only is this a pain in the butt, but it also eats Hard drive space.

What I would like to know, is if there is anyway to dynamically resize the image based on the user's screen resolution. What I have in mind is to only provide the highest image resolution hoping their exists a technique to resize the imagine down on lower resolution screens.

Another issue is that the images are all different sizes with different aspects. If they were all the same aspect, I could used the Width and Height contraints to regulate picture size.

So basically, is there a miacle that exists, to determine the browser window size and then maximize the image on the available space while retaining aspect ratios?

Geeez, don't want much do I?  <Sheepish grin> Definitely an expert question.
0
Comment
Question by:jhochstuhl
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
6 Comments
 
LVL 12

Accepted Solution

by:
ahosang earned 800 total points
ID: 7990163
Yes write each out with the larger size(that would be ideal for 1024x768), and have an onload like:

<img src="img.gif" width="100" height="100" onload="if (screen.width<1020) {resize(this);}">

Then the resize function is defined in the <head> thusly:
<script>
function resize(im) {
  im.height*=0.78;
  im.width*=0.78;
}
</script>

Doesn't work in obsolete browsers.
0
 
LVL 12

Expert Comment

by:ahosang
ID: 7990223
The method above does the resizing when the images load.
 To write out differing width, height attributes in the actual HTML(and make it work in obsolete browsers as well), it's a bit more:

<script>
isSmall=(screen.width<1020);
</script>

Then in each image place you have to conditionally write each one:
<script>
if (isSmall) {
  document.write("<img src='img.gif' width='78' height='78'>");
} else {
  document.write("<img src='img.gif' width='100' height='100'>")
}
</script>
Of course you could have the images pre-defined in an array to make your conditional writing simpler.
0
 

Author Comment

by:jhochstuhl
ID: 7996839
-Chuckle-

Listen ahosang, really appreciate the response, and it looks good to me, but I am a javascript beginner. Might have to get a little more basic here for me.

For one thing, how do we know what the size size is? And isn't avilable browser width/height a different matter then screen resolution.

Not-withstanding that, so I would write my page like:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Version" CONTENT="8.0.4308">
<META NAME="Date" CONTENT="2/18/03">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=2,Transition=6)">

Add to Head:

<script>
function resize(im) {
 im.height*=0.78;
 im.width*=0.78;
}
</script>

</HEAD>

<BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080" BACKGROUND="Image10.jpg">

<P ALIGN="CENTER"><CENTER><TABLE CELLSPACING=0 BORDER=0 WIDTH=593>
<TR>
<TD VALIGN="MIDDLE" HEIGHT=445>
<P ALIGN="CENTER">

Instead of:

<IMG SRC="TestImage.jpg">

Use:

<img src="img.gif" width="100" height="100" onload="if (screen.width<1020) {resize(this);}">

</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Is this correct? I see where it does the reduction, but how does it know what screen it is working with?

Joe
0
 
LVL 12

Expert Comment

by:ahosang
ID: 7998300
Forget browser space. It is screen resolution you're concerned with right? That's what you said.
This part:
if (screen.width<1024) {//do whatever
tests if the horizontal component of screen res. is lower than 1024
And this part in the second comment:
var isSmall=(screen.width<1020);
makes a boolean value for isSmall which is true if the condition in the parentheses is true.
I just wondered - were you filling in width and height attributes for your images in the 1024x768 page? I assumed you were. These are the values to give them in my first solution. If you were NOT filling in any values, then how did you get the thing to work across the two screen sizes?
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10082587
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area:
RECOMMENDATION:

 - [Points to ahosang Grade A]

Please leave any comments here within the next seven days.
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************

jAy
EE Cleanup Volunteer
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question