Graeme Posted November 10, 2009 Report Share Posted November 10, 2009 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted November 10, 2009 Report Share Posted November 10, 2009 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... Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 10, 2009 Author Report Share Posted November 10, 2009 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted November 10, 2009 Report Share Posted November 10, 2009 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... Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted November 10, 2009 Report Share Posted November 10, 2009 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. Quote Link to comment Share on other sites More sharing options...
Graeme Posted November 11, 2009 Author Report Share Posted November 11, 2009 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted November 11, 2009 Report Share Posted November 11, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.