This was used on my layout proposal for the Themes (and Extensions) page of Mozilla Firebird Help (now known as Mozilla Firefox Help, and has been officially moved to mozilla.org), few months ago around the year 2003. At that time, it was sort of rejected by David Tenser, maybe due to its radical codes or incompatible layout with his site, though the layout somehow indirectly inspired him to improve his pages.
The CSS codes of this image gallery page are rather useful for anyone to present all the images and data in one compact page, as the images' extra information is displayed as a popup. Even the HTML codes are semantically clean, using the list module.
HTML codes:
<ul id="gallery">
<li><a href="path/to/image.png" type="image/png"><img src="path/to/thumbnail.png" alt="alternate text for thumbnail" /></a>
<ul>
<li><strong>File Size</strong>: ??Kb</li>
<li><strong>Image Size</strong>: ??px</li>
<li><strong>Description</strong>: description of the image</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li><a ...><img ... /></a>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>...</li>
<li>...</li>
</ul>
<!-- clear from the floats -->
<div class="clear"> </div> [**]
CSS codes:
ul#gallery, #gallery ul{
/*Remove all spacings and bullets*/
list-style-type: none;
margin: 0;
padding: 0;
}
ul#gallery>li{
float: left;
padding: 10px;
margin: 10px;
width: auto;
height: auto;
border: 1px solid transparent;
}
ul#gallery>li ul{
padding: .8em;
margin-top: 50px; /*may be adjusted according to the dimension size of the thumbnail images*/ [*]
border: 1px solid #000;
background-color: #fff;
color: #000;
font-size: 90%;
max-width: 40%; /*prevent the popups from being too wide*/
display: none;
position: absolute;
}
ul#gallery>li ul li{
margin-top: 2px; /*some spacing between the image data*/
}
ul#gallery>li:hover{
/*of course, the colors are customizable*/
color: #369;
background-color: transparent;
border-color: #369;
}
ul#gallery>li:hover ul{
display: block;
list-style-type: none;
}
ul#gallery ul:before{
/*display the 'Image Information' at the top of the popups*/
content: "Image Information";
font-size: 130%;
font-weight: bold;
border-bottom: 1px solid #999;
display: block;
}
ul#gallery ul:after{
/*display the '(click to view the larger version of this image)' at the bottom of the popups*/
content: "(click to view the larger version of this image)";
font-size: 90%;
text-align: right;
border-top: 1px solid #999;
display: block;
margin-top: 1em;
}
ul#gallery img{
/*width and height may be adjusted according to the dimension size of the thumbnail images*/
width: 48px;
height: 48px;
display: block;
}
img,a img{
/*Remove borders from images*/
border: 0;
}
div.clear{
/*clear the floats*/
clear: both;
} [**]
ul#gallery:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}
The only down side of this CSS-based image gallery is that all thumbnail images need to have the same width and height in pixels. If you want to display thumbnails with multiple dimensions, you'll need to modify the CSS codes a bit.
You'll need to add a specific width and height values according to the global thumbnail dimensions. If all the thumbnails have a maximum height of 100px and maximum width of 200px, modify the values of the width
and height
properties.
ul#gallery>li{
float: left;
padding: 10px;
margin: 10px;
width: 200px;
height: 100px;
border: 1px solid transparent;
}
After that, modify the value of the margin-top
property to move the popup lower down the image.
ul#gallery>li ul{
padding: .8em;
margin-top: 80px;
border: 1px solid #000;
background-color: #fff;
color: #000;
font-size: 90%;
max-width: 40%;
display: none;
position: absolute;
}
Then, remove the width
and height
properties from the img
element. Also add the margin
property with the value of auto
to align the image in the center.
ul#gallery img{
display: block;
margin: auto;
}
As the width
and height
CSS properties have been removed, you'll need to add the width
and height
HTML attributes to the img
tag.
<ul id="gallery">
<li><a ...><img ... width="??" height="??" /></a>
...
</li>
...
That's all folks. Have fun.
Relevant resource: Reformat the Table 2
* The margin-top
property has been deleted due to the rendering tested on Mozilla Firebird 0.6.1, compared to the previous 0.6 build. Both builds render the top margin differently. So, I'm not sure which is the valid one.
** The clearing element is removed because it is now an old fashioned way to clear floats. The 21st century style can be found at CSScreator.com.