Thumbnails

[Graeme]

Helo All,

 

I would like to use a gallery on a web site so that when you click on a thumbnail a larger image opens. I have some code (lightbox) but how do I size the thumbnails.

 

The images I have are in different sizes and orientation, so if I re-size them they come out different. I would like to use 200 x 200 thumbnails but the portrait ones are different to the landscape ones. Should I crop them into the required size but that means I would only be able to have part of the larger image on view in the thumbnail?

 

If this is the best way then I could do this but I just wanted to check.

 

Best wishes

Graeme

[PicnicTutorials]

All depends what you want. I usually prefer semetry, so coping them works for me. Although, once I had a similar problem. I worked it out by giving each thumb a container (the container width and height catering to the largest thumb), and centering each image in each container. Or just crop them and make it easy on your self...

[Graeme]

Thank you for that. I'm not sure what to do. I have the code for the containers for the thumbnails, can I ask what extra code you used?

 

Thank you,

 

Best wishes

Graeme

[PicnicTutorials]

Sure. Wrap each thumb in a div, float each div left, give the div a width equal to the widest thumb image, and text-align center on the div. And apply vertical-align bottom to the images. That should do it...

[PicnicTutorials]

Of course, that's assuming you want all the thumbs to appear semetrical. If no, then just resize them all and let them fall where they may.

[Graeme]

Hello Eric & All,

 

Thank you for youe help with this.

 

The code below is for the containers for the thumbnails but I would like to add the extra code we talked about for the thumbnails to sappera all square instead of different orientation.

 

Am I right in thinking that with the ne code added only part of the larger image appears or does it re-size to suit?

 

img {

border: 0}

 

img.left-img{ /* Float any image to the LEFT and give it some margin */

font-size:1em;

float:left;

border: 6px solid #fff;

margin-bottom:1.8em;

margin-right:1.8em;

margin-top:0.3em;

}

img.camp-img{ /* Float any image to the LEFT and give it some margin */

font-size:1em;

float:left;

border: 6px solid #fff;

margin-bottom:1.6em;

margin-right:1.6em;

margin-top:0.1em;

}

img.right-img{ /* Float any image to the RIGHT and give it some margin */

font-size:1em;

float:right;

border: 6px solid #fff;

margin-bottom:1.8em;

margin-left:1.8em;

margin-top:0.3em;

}

 

Best wishes

Graeme

[PicnicTutorials]

Ok, lets assume your largest (widest) image is width:150px. And the image container is a , and the entire photo gallery container is called #gallery.

 

#gallery {

position:relative;

width:500px;

overflow:hidden;

}

#gallery b {

float:left;

width:150px;

text-align:center;

margin:5px;

display:inline;

}

#gallery img {

vertical-align:bottom;

border:0;

}

 

HTML...

 

That should get you started. If you float the img you will loose the text-align center.