Nov 15
There are many ways to create an online image gallery. There are applications you can buy, or PHP, or Java galleries. However, CSS is a great and cheap way of doing this, and you know it will work across all browsers.
I will be using Dreamweaver CS3 in this tutorial.
Seeing as we’re using CSS, making all your images a standard size will help greatly. So think beforehand about how big you would like your images, both the thumbnails and the large image. I will personally be using a thumbnail of 90x90px, and a large size of about 500x375px.
- First, create a folder with all your images ready, both large and small. Edit your images to the correct sizes, and make your thumbnails with the same name, but have something like tn on the end, or an identifying mark.
- Next create a new HTML document, and make sure its XHTML 1.0 Transitional. New>HTML>None>Create, then choose your font and size, preferably something like Georgia as its nice and clear, and 14px font. You can do this by going to Modify>Page Properties
- The images both large and small are to be contained in a Div tag within the Body. Go to Insert>Layout Objects>Div Tag. Then click New CSS Style, choose Advanced then give it a name of something like: #container and Define in: This Document Only. Next select the Box Category, and define the size of about 600x475px.
- The images are going to go into a Unordered List. So the container should look like
<div id=”container”><ul></ul></div>.
Next we need to start our lists. So open your <li></li> and close it. Your code should look like:
<div id=”container”><ul>
<li><img src=”images/canyon.jpg” alt=”Canyon” tile=”Canyon” /><br />
This will be your text for the image should be placed.
</li></ul></div>
Repeat the list tags to include all images in your gallery, eg:
<li><img src=”images/canyon.jpg” alt=”Canyon” tile=”Canyon” /><br />
This will be your text for the image should be placed.
</li>
<li><img src=”images/moon.jpg” alt=”Moon” tile=”Moon” /><br />
This will be your text for the image should be placed.
</li> - Next we need to make the images into links, with a unique class tag, eg photoa, photob and so on. To do this, place: <a class=”gallery photos” href=”#”> so your code should look like:
<li><a class=”gallery photoa” href=”#”>
<img src=”images/canyon.jpg” alt=”Canyon” tile=”Canyon” /><br />
This will be your text for the image should be placed.
</a></li>.
Finally we will need to link the Text and Images together, to do this we use a <span> tag, eg:
<li><a class=”gallery photoa” href=”#”><span>
<img src=”images/canyon.jpg” alt=”Canyon” tile=”Canyon” /><br />
This will be your text for the image should be placed.
</span></a></li> - Now is a good time to remove bullets and indentation. Add this code in-between the style tags in your header:
#container ul {
padding: 0;
margin: 0;
list-style-type: none;
} - At it’s present form all the images display, this is needed so that they pre-load. However they need to be hidden so that they only appear on roll over. This is done by placing them in a container that is 1x1px. This will only display the top left pixel of each image. Add the following code to your style tag:
#container a.gallery span {
position: absolute;
width: 1px;
height: 1px;
top: 5px;
left: 5px;
overflow: hidden;
background: #fff;
}
The Page should effectively be blank now, except for a small dot on the top left. - It’s time to start adding the thumbnail images. Add the following code to you style tag again:
#container a.gallery, #container a.gallery:visited {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
margin: 1px 2px 1px 2px;
text-align: left;
cursor: default;
}
Now all images need to be defined in the style tags to display the thumbnails, to do this add:
#container a.photoa {
background: url(images/canyon-tn.jpg);
height: 90px;
width: 90px;
} - Now that the thumbs have been put in place its time to organise them. Simply add:
#container ul {
width: 100px;
height: 380px;
}
#container li {
float: left;
}
The width and height here should be changed depending on the amount of thumbnails that you wish to display. I have 4 and displaying 1 after the other down the side, so i have 100px width, if i incresed it to 200px it would display 2 lists running down the side. The height i have used is to fit in the 4 running down. - Next add another bit of CSS into the style tags:
#container a.gallery:hover span {
position: absolute;
width: 500px;
height: 375px;
top: 10px;
left: 170px;
color: #000;
background: #fff;
}
This code will apear when the mouse is placed over a thumbnail, then the main image will apear. Width and height should be the same dimensions as the main image. Top and left define how many pixels away from the top and left of the page it sits, adjust these till you are happy. - Finally add a border to the thumbnails when you hover over them, simplay add:
#container a.gallery:hover {
border: 1px solid #fff;
}
Hope you enjoyed, and here are the source files… Source
