There are several techniques for laying out the image gallery (using list-items, simple IMG tags or using links when you create a “clickable” gallery). If you use any of available techniques, you should get the same or almost same effects. And everything works nice as long as you stick with the thumbnails of the same size. But from my experience when working with different people with different computer skill, you can expect almost anything. First of all, they won’t upload the photos of the same size, so everything you worked on falls apart — floats, sizes, aligns.
If you use some kind of CMS or your own news script, you can the solution explained in this article. I will show you how to create an image gallery that doesn’t falls apart when different sizes of images are loaded and with no images being distorted.
What are we supposed to do?
We are assuming that our clients have unequal computer skills. They know how to upload a photo, but they don’t like the idea of using a program to prepare it for the web (i.e. make the pictures of same dimensions). So what should we do? If we want to create an image gallery using one of standard techniques, the gallery will fall apart on the picture that is higher than the rest.
I came up with an idea to create an image gallery that will crop the images, so if the image is larger than specified proportions, the overlay won’t be visible. This way, we will create an image gallery that rocks with all the modern and nice things we all use these days :)
The theory
We will create two DIVs that will “contain” the image inside it. This is the code we will be using:
You could use only one DIV if you just want to “crop” the image, but I used two instead, so I could create a border around the image that will be 1px outside the image. I used the link so you could link the image with some external big image of your own. You could use just the two DIVs and an image if you’d like — that’s up to you. Let’s style this gallery, shall we?
Styling the images
First of the two DIVs you have for any of your images should have a class. We gave ours class="image". This way you can control the behavior of image gallery and any of the images in it. So, you should decide which width and height you want to use in your gallery. I used the size of 80px for this, so I gave it this width and height. I also gave it a border of 1px. Since I want my images to be apart one from another 10px I used margins (right and bottom) of that value. We also used float:left so our images are aligned to the left. Don’t forget to use position:relative. Without it, we cannot remove the border from the image.
.image {
width:80px;
height:80px;
border:1px solid #CCC;
float:left;
margin-right:10px;
margin-bottom:10px;
position:relative;
}
OK. And now is time for a little CSS Magic. We added second DIV to “crop” the images. We will do that by using overflow:hidden at this point — everything outside this DIV won’t be visible. We gave this DIV a smaller width and height (i.e. 1px right and 1px left = 2px) because we wanted to “remove” the border from the image for 1px. If we didn’t want to remove a border, or we just wanted to use plain and simple border or no border at all, than we could put the overflow:hidden to the first DIV instead.
Now, as we wanted to move the border away from the image, we positioned this second DIV absolutely. This is possible because we positioned the first DIV relatively.
.image div {
width:78px;
height:78px;
overflow:hidden;
position:absolute;
top:1px;
left:1px;
}
For the last part, we removed the border from the image itself with (obviously) .image img { border:none; }.
The example
Eventual problems
As far as I tested this image gallery on different settings, it works fine, but there is something you should take care of. If you are using some kind of PHP resize script that resizes the image on the fly, you should arrange that both X and Y axis of the image doesn’t exceed the size of the actual “cropped” thumb, or you will finish with the white space on the bottom or in the right of the picture.
If you have any questions or suggestions, don’t hesitate to make a comment.
Leave a Reply