Information
This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are 'pre-loaded'.This method can be used either vertically, as shown, or horizontally. 1
#gallery {
2 padding:0;
3 margin:0;
4 list-style-type:none;
5 overflow:hidden;
6 320px;
7 height:425px;
8 border:1px solid #888;
9 background:#fff url(windows/win_back.gif);
10 }
11 #gallery li {
12 float:left;
13 }
14 #gallery li a {
15 display:block;
16 height:30px;
17 320px;
18 float:left;
19 text-decoration:none;
20 border-bottom:1px solid #fff;
21 cursor:default;
22 }
23 #gallery li a img {
24 320px;
25 height:30px;
26 border:0;
27 }
28 #gallery li a:hover {
29 background:#eee;
30 height:239px;
31 }
32 #gallery li a:hover img {
33 height:239px;
34 }
1 XHTML
2
3 <ul id="gallery">
4 <li><a href="#nogo">
5 <img src="windows/win7.jpg" alt="#1" title="#1" /></a></li>
6 <li><a href="#nogo">
7 <img src="windows/win8.jpg" alt="#2" title="#2" /></a></li>
8 <li><a href="#nogo">
9 <img src="windows/win9.jpg" alt="#3" title="#3" /></a></li>
10 <li><a href="#nogo">
11 <img src="windows/win10.jpg" alt="#4" title="#4" /></a></li>
12 <li><a href="#nogo">
13 <img src="windows/win11.jpg" alt="#5" title="#5" /></a></li>
14 <li><a href="#nogo">
15 <img src="windows/win12.jpg" alt="#6" title="#6" /></a></li>
16 <li><a href="#nogo">
17 <img src="windows/win13.jpg" alt="#7" title="#7" /></a></li>
18 </ul>