Fotogalerie se zmenšenými obrázky a popisky

19. července 2006

•

Toto řešení ukazuje, jak s pomocí CSS vytvořit fotogalerii, ve které jsou jednotlivé obrázky umístěny ve stejně vysokých divech (kontejnerech) i s popisky. Tím je dána i výška řádků s obrázky. Kód je upraven pro správné fungování ve všech prohlížečích. Pro MSIE je použito několik samostatných úprav.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Bruno. Bližší popis najdete v článku Thumbnail Image Gallery.

CSS

body
{
font-family: Helvetica, sans-serif;
background-color: #fff;
color: #000;
text-align: center;
margin: 10px;
padding: 0;
}
.galerie
{
border: 1px solid #bbb;
padding: 15px 8px 0 8px;
background-color: #e4e4e4;
margin: 0;
}
.galerie li
{
display: -moz-inline-box;
display: inline-block;
/*\*/ vertical-align: top; /**/
margin: 0 7px 15px 7px;
border: 1px solid #bbb;
padding: 0;
}
.galerie li>div
{
/*\*/ display: table; /**/
width: 199px;
}
.galerie a
{
display: block;
text-decoration: none;
color: #000;
background-color: #f9fbff;
cursor: pointer;
}
/* IE7? \*/
.galerie>li .wrimg
{
display: table-cell;
vertical-align: middle;
width: 199px;
height: 199px;
}
/**/
.galerie img
{
border: solid 1px #fff;
vertical-align: middle;
}
.galerie a:hover
{
background-color: #e5ecff;
}
/*\*//*/
.galerie li .wrimg
{
display: block;
font-size: 1px;
}
.galerie .wrimg span
{
display: inline-block;
vertical-align: middle;
height: 199px;
width: 1px;
}
/**/
.galerie .caption
{
display: block;
padding: .3em 5px;
font-size: .9em;
line-height: 1.1;
border-top: 1px solid #bbb;
w\idth: 189px;
}
@media all and (min-width: 0px)
{
.galerie
{
border-collapse: collapse;
}
.galerie a
{
display: inline-block;
vertical-align: top;
}
.galerie
{
display: inline-block;
}
}

CSS pro IE

<!–[if IE]><style type=“text/css“>
.galerie li {
width: 201px;
w\idth: 199px;
display: inline;
}
.galerie {
height: 0;
he\ight: auto;
zoom: 1;
display: inline;
}
.galerie li .wrimg {
display: block;
}
.galerie .wrimg span {
vertical-align: middle;
height: 199px;
zoom: 1;
}
</style><![endif]–>

XHTML

<html>
<body>
<ul class=“galerie“>
<li><div><a href=“pes1.jpg“><span class=“wrimg“><span></span><img alt=“pes“ src=“pes1.jpg“ width=“165″ height=“124″ /></span><span class=“caption“>Pes</span></a></div></li>
<li><div><a href=“kocur1.jpg“><span class=“wrimg“><span></span><img alt=“kocka“ src=“kocur1.jpg“ width=“160″ height=“107″ /></span><span class=“caption“>Kočka</span></a></div></li>
<li><div><a href=“kachna1.jpg“><span class=“wrimg“><span></span><img alt=“kachna“ src=“kachna1.jpg“ width=“165″ height=“109″ /></span><span class=“caption“>Kachna</span></a></div></li>
<li><div><a href=“krava1.jpg“><span class=“wrimg“><span></span><img alt=“krava“ src=“krava1.jpg“ width=“170″ height=“127″ /></span><span class=“caption“>Kráva</span></a></div></li>
<li><div><a href=“pes1.jpg“><span class=“wrimg“><span></span><img alt=“pes“ src=“pes1.jpg“ width=“165″ height=“124″ /></span><span class=“caption“>Pes</span></a></div></li>
<li><div><a href=“kocur1.jpg“><span class=“wrimg“><span></span><img alt=“kocka“ src=“kocur1.jpg“ width=“160″ height=“107″ /></span><span class=“caption“>Kočka</span></a></div></li>
<li><div><a href=“kachna1.jpg“><span class=“wrimg“><span></span><img alt=“kachna“ src=“kachna1.jpg“ width=“165″ height=“109″ /></span><span class=“caption“>Kachna</span></a></div></li>
<li><div><a href=“krava1.jpg“><span class=“wrimg“><span></span><img alt=“krava“ src=“krava1.jpg“ width=“170″ height=“127″ /></span><span class=“caption“>Kráva</span></a></div></li>
<li><div><a href=“pes1.jpg“><span class=“wrimg“><span></span><img alt=“pes“ src=“pes1.jpg“ width=“165″ height=“124″ /></span><span class=“caption“>Pes</span></a></div></li>
<li><div><a href=“kocur1.jpg“><span class=“wrimg“><span></span><img alt=“kocka“ src=“kocur1.jpg“ width=“160″ height=“107″ /></span><span class=“caption“>Kočka</span></a></div></li>
<li><div><a href=“kachna1.jpg“><span class=“wrimg“><span></span><img alt=“kachna“ src=“kachna1.jpg“ width=“165″ height=“109″ /></span><span class=“caption“>Kachna</span></a></div></li>
<li><div><a href=“krava1.jpg“><span class=“wrimg“><span></span><img alt=“krava“ src=“krava1.jpg“ width=“170″ height=“127″ /></span><span class=“caption“>Kráva</span></a></div></li>
</ul>
</body>
</html>