problem displaying large images with thumbnails


C

Cloud Burst

Hi Everyone.

I have some images with thumbnails that I want to display.

The site uses very simple frames.

The images are larger than the screen.

Using Internet Explorer, the full size images open up in a new
window and automatically resize themselves to fit the screen.
This is good. This is what I want.

Using Opera or Netscape, the images open up in the frame in
which they were opened AND they don't resize -- so they are
larger than the window frame and force you to scroll to see
the entire image. This is not what I want. Even if the
image doesn't open up in its own window, I'd still like the
image to scale to fit the screen -- preferably as large as
possible while still fitting.

My client does their testing on a Mac, and their behavior is
identical to my experience with Opera and Netscape.

Here is the code:

<A HREF="mf11.jpg" TARGET="_blank">
<IMG SRC="th_mf11.jpg" WIDTH=133 HEIGHT=200 ALT="Click for fullsize"></A>

Can someone offer a solution? I'd prefer pure HTML. If that
is not possible then I'd consider a JavaScript solution.

Thanks.

CB
 
Ad

Advertisements

S

Steve R.

Cloud Burst wrote in message ...
Using Internet Explorer, the full size images open up in a new
window and automatically resize themselves to fit the screen.
This is good. This is what I want.

....so why don't you size your large images at say, no more than 750 pixels
wide or 550 pixels height in the first place ? so that *most* users can see
a good quality image. The benefit will be relatively quick loading for
dial-up users.

If they then want an even bigger file for whatever purposes you create
another link from the big picture to an even bigger image, so they can
click again and see (or save) you even larger image.
 
A

Augustus

Cloud Burst said:
Hi Everyone.

I have some images with thumbnails that I want to display.

The site uses very simple frames.

The images are larger than the screen.

Using Internet Explorer, the full size images open up in a new
window and automatically resize themselves to fit the screen.
This is good. This is what I want.

This is a feature built into IE6
If you click on TOOLS >> INTERNET OPTIONS and then the ADVANCED tab and go
down to "Multimedia" you'll see the option "Enable Automatic Image Resizing"

If you clear that checkbox, then the images will stop resizing automatically
 
C

Cloud Burst

Cloud Burst wrote in message ...

...so why don't you size your large images at say, no more than 750 pixels
wide or 550 pixels height in the first place ? so that *most* users can see
a good quality image. The benefit will be relatively quick loading for
dial-up users.

....because I don't know the resolution of the user's screen. I was
hoping to use something like HEIGHT="100%" (because all the images
are taller than they are wide) but that didn't work.

I'll wait a bit longer to see if there are any other responses.
If they then want an even bigger file for whatever purposes you create
another link from the big picture to an even bigger image, so they can
click again and see (or save) you even larger image.

Right.

Thanks!

CB
 
S

Steve R.

Cloud Burst wrote in message ...
because I don't know the resolution of the user's screen. I was
hoping to use something like HEIGHT="100%" (because all the images
are taller than they are wide) but that didn't work.

Here's a URL where I saw the idea used, although the *large* image is still
too big for 800x600, it then enlarges even further by clicking on it in
turn. If you size your first enlargement, as I said no more than 750 pixels
wide by 550 height it should work fine on most browsers.

Click on the first image to see what I mean, then click on the second one
to get an even bigger one.

http://www.trevorgeorge.pwp.blueyonder.co.uk/bigtrail.htm
 
C

chris

Cloud Burst said:
...because I don't know the resolution of the user's screen. I was
hoping to use something like HEIGHT="100%" (because all the images
are taller than they are wide) but that didn't work.

I'll wait a bit longer to see if there are any other responses.


Right.

Thanks!

CB

I would suggest you do the easy way that most people would do and that was
already explained here (resize them to 750 or something).
Otherwise you need quite a lot scripting. You can do it with JavaScript, but
thats complicated and not the best solution. Would be easier with a server
side script language like php. I dont know how much you are into those
languages but its not very easy for a beginner which I think you are.
However I guess there are already some free scripts out there which can
handle your task. Try a google search. I know there is a free javascript
which resizes the displayed image to the screen resolution but unfortunately
i cant remember where Ive seen it. Sorry.

chris---
 
Ad

Advertisements

C

Cloud Burst

What I did:

(1) Create intermediate sized images at 1200 pixels in height. This
is at least as large as most screens, but the image files are only
about 1/3 as large as the originals.

(2) Create new html files containing these 1200 pixel high images and
display them at HEIGHT="95%" (the other 5% is space reserved for the
"Click image to view full size" text at the top.) This results in a
slight reduction in size even in screens with a very high resolution.
This avoids hardcoding a pixel size to view, which I don't like.

(3) Display the full jpg's only if the user clicks on the intermediate
sized images in (2) above. At this point, the user may have to scroll
around, depending on their browser settings.

One final issue: *If* the user has "Enable automatic image resizing"
turned ON in IE, the full-size image will be resized by the browser
and displayed only as large as the window that opens. Is there a way
(in HTML) to force the image to NOT be resized in this case?

Thanks for the help.

CB
 
B

brucie

I have some images with thumbnails that I want to display.
http://balls.bruciesusenetshit.info/
http://butterflies.bruciesusenetshit.info/

The site uses very simple frames.

icky poo
http://html-faq.com/htmlframes/?framesareevil
http://homepage.ntlworld.com/l_vajzovic/tom/web/frames.html
http://www.karlcore.com/articles/article.php?id=2
http://david.us-lot.org/www/frames/
The images are larger than the screen.

thats a potential problem no matter what size the images are
the full size images open up in a new window

icky poo
http://diveintoaccessibility.org/day_16_not_opening_new_windows.html
the images open up in the frame

icky poo
ALT="Click for fullsize"></A>

icky poo
http://ppewww.ph.gla.ac.uk/~flavell/alt/alt-text.html
Can someone offer a solution?

use several different sizes, allow the visitor to select the size they
want.
 
Ad

Advertisements

G

Gary Mc

Cloud said:
What I did:

(1) Create intermediate sized images at 1200 pixels in height. This
is at least as large as most screens, but the image files are only
about 1/3 as large as the originals.
1200px high = "intermediate"?
(2) Create new html files containing these 1200 pixel high images and
display them at HEIGHT="95%" (the other 5% is space reserved for the
"Click image to view full size" text at the top.) This results in a
slight reduction in size even in screens with a very high resolution.
This avoids hardcoding a pixel size to view, which I don't like.
Why not use a smaller "intermediate" size that will be quicker to
download and viewable without resizing on a larger number of browsers?
(3) Display the full jpg's only if the user clicks on the intermediate
sized images in (2) above. At this point, the user may have to scroll
around, depending on their browser settings.
If they've gone for the hi-res versions, they're will have gotten a fair
idea of the image detail from your intermediate view and they're
probably intending to download them anyway - so I wouldn't worry about
scrolling issues.

One last point - consider scrapping the frames altogether. They're not
essential and often very unhelpful. Using a single-document design also
frees up more space for the intermediate images to be displayed and with
some thoughtful navigation design, all your images will be just as easy
to get to.

GM.
 

Top