image thumbnail viewer II (set image sizes, default image)

[ramtanion]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: I would like for this script to use a large default image in the 'loadarea' div when the page is loaded (the first thumb). I would also like to know how to set the max-width and height of the large image when it's thumb is moused over.

Please help. Did a search for this but couldn't find it. Thanks.

Justin

[slyredfox]

Hey, I'm not a .js programmer - so, there may be a better way to do this. But, for what it's worth...

To set a default image I created a style (this way I can change the default image in the future) and added the style to the div tag...

<div id="loadarea" style="width:340px; height: 220px" class="Slideshow">

The style adds a background image...

.Slideshow {
background: url(IMAGES/Image1.jpg) no-repeat;
}

It seems to work. (For what it's worth ;-)

[jscheuer1]

That will work out nicely, especially if you are using:

hideimgmouseout: true, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

and you want it to return to your default image onmouseout.

However, if the above is set to false and you want a more robust default content, simply put it in the loadarea division:

<div id="loadarea" style="width: 600px"><a href="some.htm"><img src="default.jpg" border="0" alt="Default Image" title="Whatever"></a><br>Some default Caption</div>

Once someone activates a larger image via click or mouseover, the above content will be overwritten.

Now, about a max size for the larger images. These are entirely under your control via an image editing program. In other words, just resize your images to be the size that you want them to be.

Many image editing programs allow for batch processing of images to 'fit in a box', or you can do this one image at a time in almost any image editing software.

The bottom line here is that you want to avoid using the browser to resize your images for you. That leads to both extra bandwidth and processor overhead, not to mention load time, transfer bytes, and disk space consumed by your page.

[ramtanion]

SOLUTION: thanks john, the default image worked.

PROBLEM: the reason I need to set width/height limits in the javascript is because they are hyperlinked from image upload sites and I don't have control over the originals.

any ideas on that?

[jscheuer1]

the reason I need to set width/height limits in the javascript is because they are hyperlinked from image upload sites and I don't have control over the originals.

any ideas on that?

Well, it is still a bad idea. If there is any way to get the servers on those upload sites to resize the images or to refuse images that are beyond the allowed dimensions, that would be the way to go. Either of these are possible but are beyond the realm of both this script and javascript in general. However, it does require sufficient access to the servers. You might not have that.

If it must be done by the browser though, virtually all current version (this includes IE 7 but not IE 6) browsers will allow for this type of styling (goes in the head before the script call):

<style type="text/css">
#loadarea img {
max-width:600px;
max-height:350px;
}
</style>

where loadarea is the id of the element that will hold the larger image. This id is also used as the rev attribute of the link in this script or as the first part of the rev attribute, if the image is linked.

Now, I did some testing locally and this worked out for IE 6 (goes right after the above style):

<!--[if IE]>
<script type="text/javascript">
function ie6getdims(img, mw, mh){
var w=img.width, h=img.height, rw='auto', rh='auto';
if(w>mw){
rw=mw+'px';
rh='auto';
img.style.width=rw;
img.style.height=rh;
h=img.height;
}
if(h>mh){
rw='auto';
rh=mh+'px';
}
img.style.width=rw;
img.style.height=rh;
}
</script>
<style type="text/css">
* html #loadarea img {
width:expression(ie6getdims(this, 600, 350));
}
</style>
<![endif]-->

However, it depends upon the browser knowing the actual height and width of the image. This is virtually instantaneous with local images, but IE in general, and IE 6 is no exception, is one of the best browsers at getting this information from an image early in the image loading process. Add to that the fact that using the expression technique in style will usually cause the operation to be repeated over and over, and there is a good chance that this will also work out well live. If it doesn't, don't use it - you can still set the width for IE 6 only:

<style type="text/css">
* html #loadarea img {
width:600px;
}
</style>

In the above example, all images will then be 600px wide and their height will scale proportionally to that.

Added later: I have now actually tested this IE 6 method with a remotely hosted image, and it worked fine.

[vestagirl]

Is there something that needs to be done to set the size for IE7, I tried the IE6 fix that you provided but IE 7 just ignores it and shows the full size of the image instead of the size specified.

[vestagirl]

For those who need it, the following will work for IE7

<!--[if IE]>
<style type="text/css">
#loadarea img {
width: expression(this.width > 300 ? 300: true);
}
</style>
<![endif]-->

That is where "loadarea" is your id for your div and 300 is your max width

[jscheuer1]

max-width and max-height work in IE 7, so if your conditional is set properly, no extra code for IE 7 is required. Ex:

<style type="text/css">
style for all browsers except for IE 6 and lesser IE versions to IE 5
</style>
<!--[if lte IE 6]>
<style type="text/css">
style for IE 5 through and including 6
</style>
<![endif]-->