TAKE YOUR FAVOURITE IMAGES AND PRESENT THEM IN AN ONLINE GALLERY WITH LITTLE MORE THAN AN UNORDERED LIST AND A LITTLE CSS
Click here to download all the source files for this tutorial http://www.webdesignermag.co.uk/?page_id=85
THERE ARE MANY ways to code an online image gallery, with many using JavaScript and/or PHP. However, a great alternative is to introduce pure CSS. An all-CSS image gallery gives great compatibility across platforms and is pretty much guaranteed to work as you want. Alternatively, if you are like us, we just love using CSS to get a job done. The premise of the CSS image gallery to be created involves getting an unordered list of images styled into a professionallooking photo gallery. As you might expect, images are a major influence, and for this tutorial we have resized all the images to give a uniform look and feel. In addition, each image is assigned a thumbnail that instantly offers up its big brother the precise moment the cursor makes its way over the thumbnail. The beauty of creating an image gallery with CSS is that it is open to all sorts of modifications. Rearrange the thumbnails, resize the container, style up text and borders and customise image positions with a few quick and simple code changes.
01 Resize images
A CSS image gallery, as you might expect, contains predominately images. Before heading into any coding, the images to be used for the gallery need to be brought together in a single location. Create a folder on the desktop and transfer the desired image to the folder. For the purpose of this tutorial, we are going to resize each image in two forms: one for the main image and a thumbnail version. Open your image editor of choice and resize the image to create the two versions just mentioned. Rename the thumbnail with the same name as the main image but with the addition of ‘tn’ to differentiate between the two images. To present the images in a uniform manner, it is preferable to resize all main images and thumbnails to the same dimensions. A good size for the thumbnails is 80 x 80 or 90 x 90 pixels. This retains enough of the original image for users to view. The main images are going to be presented in the portrait format with a width of 450 pixels and a height of 350 pixels. The dimensions for all images are open to interpretation, but it is a good idea to decide beforehand and stick with original measurements.
02 New document
Now head to the File menu and create a new document (New>HTML>None>Create). Make sure that the DocType is XHTML 1.0 Transitional. The first issue is to style up the body tag ready for any text that is to be used within the image gallery. Head to the Modify menu, select Page Properties and define the Page font. Preferably, choose either Georgia, Verdana or Arial for consistency and support. Now select a font size, ie 14 pixels. The pixel option is perfectly okay, but being a fixed size it does not offer the flexibility or the accessibility of the ems measurement. We have chosen to stick with the pixel option, as there is only to be one text style. Now choose a colour. This should be a good contrast to the background, ie black on white.
03 Container tag
The images, main and thumbnails are to be contained within a div tag. To create a new div tag, go to Insert>Layout Objects>Div Tag. Now press New CSS Style, change the Selector Type to Advanced, name the tag, ie ‘#container’, and Define in: This document only. Now select the Box category and define the Width and Height for the container. At this stage, the measurements do not have to be entirely accurate as they can be adjusted later. However, they should be as close as possible, eg, if the main image is 450 x 350 and the thumbnails (which are going to be placed to the left or right) are 90 x 90, the container should be around 550 pixels wide by 450 pixels high. Other elements such as padding, borders, background colours, etc, will be added at a later date.
04 Unordered list
It is now time to add the images that reside in the image gallery. These are to be presented inside an unordered list, which will be styled up later in the tutorial. The opening and closing unordered list tags,
Now add the opening and closing tags
for a list item, ie the main image and any accompanying text. This will reside inside the ul tags and contain the information relating to the location of the image. For better accessibility, add an alt tag and title tag to ensure that the tooltip appears in all browsers. Arrange the tags and code for better reading, eg,
This is where the accompanying text for the image is to be placed
Now repeat the list tags for each image to be included in the gallery, eg,
This is where the accompanying text for the image is to be placed
This is where the accompanying text for the image is to be placed
05 Create gallery class
To complete each list item, the unordered list needs to be turned into an unordered list of links. This will then allow for the use of the :hover pseudo class in Internet Explorer. Alongside the hover class, there is extra code that is needed to identify each individual image. This should be unique to the image, eg, imagea. The following code needs to be added to each list item:
The first part tells the browser that the following code is a link. The next part, gallery and photoa, refers to the gallery class, and the unique identifier for the image and href=”#” is the hyperlink. Just by adding this code, you’re effectively creating the thumbnail image link to the main image. The same code should be applied to all list items, with the unique identifier (eg, photoa) changed to match the current image, eg, photob, photoc, etc. So a typical list item should now look like the following:
This is where the accompanying text for the image is to be placed
Note the closing link tag. This is positioned to include the image and test as the link.
Finally, to group together the image and text, the span tag is applied as follows:
This is where the accompanying text for the image is to be placed
06 Remove bullets
The HTML unordered list is now finished with, and it is time to start styling the various
elements. We have already styled the text in the body tag, so the next step is to remove
any list bullets and indentation. Add the following code in-between the style tags in the
head of the page to achieve this:
#container ul {
padding:0;
margin:0;
list-style-type:none;
}
07 Hiding images
In its current form, the page displays all the images and text. The reason for this is that the images need to be displayed to allow them to preload. However, they need to be invisible on the page so they only appear on rollover. This is done by placing them in a container that is 1 x 1 pixels. This has the effect of only displaying the top left pixel of each image. Add the following code:
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}
Overflow hides the rest of the image outside the 1 x 1 container, and background determines the colour. Save the page and preview in your chosen browser. The page should now effectively be blank apart from a very small dot in the top left corner.
This is where the accompanying text for the image is to be placed
Now repeat the list tags for each image to be included in the gallery, eg,
This is where the accompanying text for the image is to be placed
This is where the accompanying text for the image is to be placed.
08 Add thumbnails
It’s now time to start adding the thumbnail images. To do this, set them as the background image of the link surrounding the list image. The first piece of code to add is the following:
#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;
}
This determines how the link is displayed. Now comes the interesting part. Each image defined in the HTML unordered list needs to be defined in the style tags. Add the following code for each image (remembering to change the unique identifier, ie photoa, photob, photoc and image location):
#container a.photoa {
background:url(use/unionjackth.jpg);
height:80px;
width:80px;
}
09 Organise thumbnails
Now that the thumbnails have been put into place, it is time to organise them into the order. This is simply a matter of some more simple CSS. Add the following code, but note that the width and height can be adjusted to suit the size of the thumbnails:
#container ul {
width:180px;
height:340px;
}
#container li {
float:left;
}
Changing the width in #container ul will determine how many thumbnails are displayed in a row. For example, our thumbnails are 80 x 80 pixels. So to create a row with a single thumbnail, we would reduce the width to 90 pixels. The current width, 180px, displays two thumbnails in a row. Remember to adjust the height to match the thumbnails. The #container li code floats any content in a list to the left.
10 Create hover
We are now close to getting the basis of the image gallery working. Add the code:
#container a.gallery:hover span {
position:absolute;
width:450px;
height:350px;
top:10px;
left:170px;
color:#000;
background:#fff;
}
This code will make sure that when the mouse cursor is placed over a thumbnail, the main image will appear. However, various elements will need to modified to suit requirements. Width and height should be the same dimensions as the main image. Top and left position the main image; top defines how many pixels from the top of the window, while left determines how far from the left side of the window the main image is positioned. Adjust both until you get the desired effect.
11 Finishing touches
There are several tweaks that can be made to give the image gallery its final polished output. Currently, the thumbnails do not have a hover attribute attached to them and the border is black. To create the hover effect, add the following
#container a.gallery:hover { border:1px solid #fff;}
This will add a hover effect with a white border. To change the initial border, go to #container a.gallery, #container a.gallery:visited and change the border colour to the desired option. We have chosen #CCCCCC. Now head to #container a.gallery:hover and change the colour to #333333. Now head to #container a.gallery:hover span {position:absolute; width:454px; height:375px; top:10px; left:100px; color: #000; background: #EEEEEE;}. Adjust the height to include the text and adjust the width to include the border. Modify the colour to change the text colour and modify background to change the background colour in the text.
No comments:
Post a Comment