Simply-Basic.com

Script Tutorial: CSS Image Gallery

This entry was posted on Feb 09 2008

Typically, I’m not a huge image gallery fan. However, when they’re presented right they can truly show off one’s photo album in an artistic way. There are plenty of scripts out there that that use javascript or ajax to create spectacular image gallery effects. CSS Image Gallery from Dynamic Drive, however, uses purely CSS to achieve similar effects. What’s the big deal? By using only CSS, the image gallery is much more versatile in its usage and isn’t effected by users who beef up the security of their browser by disabling javascript. Even more, the gallery looks darn good, too.

CSS Image Gallery

Tutorial presented by Simply-Basic.com
Coded by Dynamic Drive
URL/Demo: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

This code lets you create a gallery of thumbnailed images that displays the full size image when moused over. Check out the demo here.

Installation

First lets set up the CSS code for the image menu. You can include this in between the <head> tags of your page, in your current CSS file, or in it’s own CSS file (as long as it’s properly linked to in the header of your html document).

Code:

<style type="text/css">
 
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
 
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
 
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
 
.thumbnail:hover{
background-color: transparent;
}
 
.thumbnail:hover img{
border: 1px solid blue;
}
 
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
 
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
 
</style>

Now let’s look at this CSS and see what it’s doing. First, .gallerycontainer determines how the enlarged image is displayed. The default value is to overlay the image on top of whatever text or data is around it. However, if you want a space dedicated to the enlarged image (so there won’t be any overlay), add a height attribute here that corresponds to the height of your largest image. For example, if your largest image was 300px tall, you would add height: 305px; to the class. Next, the class .thumbnail img creates a solid white border around the image. Without this there would be noticeable shifting when the thumbnails are moused over because .thumbnail:hover img adds a blue border on mouseover.

There are a few other things you may want to change. .thumbnail span controls the CSS for the enlarged image. Here you can change the background color that appears as well as the border type and color. Notice that the enlarged images are merely moved off the screen by 1000px (in the left direction). Thus all of the images actually load when the page loads. They are just not visible on the screen until the mouse is moved over the thumbnail. Also, by altering the left: attribute in .thumbnail:hover span, you can alter the position where enlarged images appear horizontally.

Usage

Setting up the images is quite simple. Below is the sample HTML directly from Dynamic Drive:

Code:

<div class="gallerycontainer">
 
<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>
 
<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
 
<br />
 
<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 
 
<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>
 
<br />
 
<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>
 
<br />
 
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>
 
</div>

Now let’s see what’s going on here. First, begin your image thumbnails by using <div class="gallerycontainer">. Then we can set up our thumbnails. Copy one of the example links in the above code. All of the links for the thumbnails will be formatted as follows: <a class="thumbnail" href="#thumb">....... The image link should be formatted as in the example. The first img src="... should link to the thumbnail image. To ensure the gallery looks smooth, make all the thumbnails with the same dimensions. After you’ve closed your img link with /> comes a span class. This span and img link will point to the full size image.

You can add a caption to your image by adding a line break after the larger image link, but before you close the <span> tags. Then at the end of that whole thing, close your link tag. You can keep adding thumbnails this way. When you are ready for a new line for the thumbnail images, just add a line break <br />. You can even add images this way to text links by replacing the img link before the opening <span> with text, as shown in the bottom of the sample code, above.

Conclusion

This is a very easy, usable way of having an image gallery on your website. Since it’s all done in CSS, there are no problems with disabled javascript. One down side is that since all of the images are loaded with the first load of the page, large image galleries can slow down quite a bit. This of course depends on the size of the images, but medium to small galleries would get the best use from this.

This is a great piece of code. I didn’t write it, but your welcome to leave suggestions here or at the Dynamic Drive website.

Useful Articles

code, CSS, images

Tutorial/How-To, Useful Tools

7 Responses to “Script Tutorial: CSS Image Gallery”

By Bubbila on Mar 20, 2008 | Reply

Sweet tutorial, just what I have been looking for.
By Bubbila on Mar 29, 2008 | Reply

Sweet resource, just what I have been looking for.
By Peter McCartney on Jun 30, 2008 | Reply

Hi! I’m doing that very same thing now. In my case I want to specify a gallerycontainer name, as I have two articles that require different gallerycontainer names. What would be the best way to do this, please.
By david on Oct 17, 2008 | Reply

is it possible to make this work on myspace??
By John Kolbert (author) on Oct 23, 2008 | Reply

@david:
Sorry for the delayed response. I actually don’t use myspace at all. If you have access to the CSS design of your page, I don’t see why not, though social networking sites are notoriously picky about what they allow.