I have noticed a lot of client-side script blocking lately, which is something of an issue for us web designers and developers. To make matters worse, IE doesn’t fully support the basic pseudo classes, hover, active, and focus making our lives harder than they need to be. Let me now stop complaining about IE, and begin this awesome tutorial which I think is ideal on these dark days of script blocking. Even I myself block scripting from most sites, using nifty firefox addon no-script.
Lets start by creating a small div which will hold the thumbnail. Its nice to use thumbnails for web galleries. For the sake of accessibility, we will use a CSS background image for the thumbnail’s graphic, while we use a real HTML image when the thumbnail is activated, as we want to avoid having two images should the client not support CSS, or have it disabled.
Inside of that div or anchor we then place an IMG tag which holds the larger image. You could even add a caption if you wanted inside a paragraph tag, furthermore we can hide and show the caption using the same technique we will use on the images.
So this leaves us with the structure that is a div/anchor tag which is the thumbnail, and which within it, holds the elements you want to show once its clicked. I advise you use the anchor tag instead of the div, if the content that is inside is nothing but natively inline tags. Anchors have better CSS support for what we are about to do in IE6.
Place all the above structure inside a div that will hold the entire gallery and give this new parent div a class. For the purpose of this demo I will give it the class “Tutorial”
I will also use the anchor tag method rather than the cleaner div method as it works in IE6. If that is not a concern, using divs will be cleaner code.
- HTML Sample
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<div class="Tutorial">
<a onclick="return=false" class="thumbnailA" href="javascript:void(0)">
<img src="/wp-content/uploads/2010/03/WeddingSketch1.jpg">
</a> <!-- end Image1"-->
<a onclick="return=false" class="thumbnailB" href="javascript:void(0)">
<img src="/wp-content/uploads/2010/03/WeddingSketch2.jpg">
</a> <!-- end CssGallery"-->
</div> <!-- end Image2"-->
As you can see i added some javascript there as well. If you use an anchor, you want to make sure the browser does not follow the link, otherwise it will go somewhere else or to the top of the page. Using a div instead of the anchor tag prevents this issue, but as mentioned before, it is more limited in IE6 as IE6 supports pseudo classes ONLY on anchor tags.
- The CSS
-
Since the large image is inside of something much smaller, it breaks the laws of physics. Seriously however, what you need to do, is extract it from the thumbnail by positioning it absolute, while the greater Div which we called “Tutorial” is positioned relative to ensure all the images pop up in the same place. Positioning the image absolute is awesome as it looks like its outside of the thumbnail, yet, still allowing us to use nested logic on css.
Once you have figured out where the larger images will show its time to create the CSS responsible for showing and hiding the image. To create this functionality we will be using the pseudo classes hover, active, and focus. IE6 can do hovers to a certain extent, but the newer versions of IE and the other browsers are quiet capable. IE6 is an ignored browser by new web designers, but its a huge market, therefore one which cannot be ignored. We can fix IE6 with javascript, while the modern browsers enjoy an interactive gallery even without it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37div.Tutorial {
position:relative;
/*ensures consistent placement of images*/
/*also set the size of area for gallery here*/}
div .Tutorial a {
display:block;
/*since im using an anchor I need to convert it
to a block type element so I can set the size of
the thumbnail as well as other properties*/
/*widht, height and properties for all thumbnails
should be set here*/
}
div.Tutorial a#ThumbnailA {
background-image:url(Path/Of/ThumbnailA.jpg);
}
div.Tutorial a#ThumbnailB {
background-image:url(Path/Of/ThumbnailB.jpg);
}
div.Tutorial a img {
display:none;
position:absolute;
top:0px;
right:0px;
/*Positioning depends on how you wanna
lay it out of course*/}
div.Tutorial a:hover img,
div.Tutorial a:focus img,
div.Tutorial a:active img {
display:block;
/* you may not need all three pseudo classes
The hover class for example maybe annoying /*}
Comments RSS and TrackBack Identifier URI ?
16 responsesDo you want to comment?
Trackbacks