Looking for code to display larger image when thumbnail is clicked.

[jscheuer1]

A good thing to do from time to time as you work on something like that is to view the page in the browser. Use the browser's 'view source' to make sure you're outputting valid code.

[cheesusricec]

Probably the easiest to work with. Works well and has many options.

http://gettopup.com/

[Binary Bridge]

I really like the simplicity of this!

One thing, can we set the size of the enlarged image to a maximum. I have several images that are different sizes and would like to add more without having to resize before adding to the site.

I have tried using max-size on the 'loadarea' div but to no avail

Many Thanks

[jscheuer1]

max-size is not a valid css property. You can use max-width and/or max-height.

[Binary Bridge]

Yes sorry don't know what I was thinking of!

I have tried max-height and max-width on an image in the 'loadarea' div as well as in the div itself but when I hover over the thumbnail it uses the image size. This is what I have tried:
==========css
.loadarea {
height:330px;
width:450px;
background:grey;
}
.thumb {
position:relative;
float:left;
height:60px;
max-height: 300px;
max-width: 100%;
}
==================html

<div class="loadarea" id="loadarea"><img class="full" src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg"> </div>

<a class="thumb" href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">
<img src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" class="thumb"></a>

==================================
Is there something I am missing?

Many thanks

[jscheuer1]

Nothing in the style you show affects images in the loadarea. Use:

.loadarea img {
	max-width: 425px;
	max-height: 300px;
}

or:

#loadarea img {
	max-width: 425px;
	max-height: 300px;
}