Es stellt sich heraus, dass es durchaus möglich ist, eine einfache CSS-Galerie ohne Javascript zu erstellen. In diesem Artikel werden wir Ihnen zeigen, wie Sie das nur mit HTML und CSS machen können.
Wie wir wissen, besteht die Galerie aus 2 Blöcken von Bildern. Das erste enthält kleine Bilder (Thumbnails), das andere große Bilder. Wenn Sie eine einfache Galerie erstellen möchten, müssen Sie nur eindeutige Anker definieren (Bild1, Bild2, Bild3, Bild4, Bild5).
Der Code muss wie folgt aussehen:
<div id="gallery">
<ul id="navigation">
<li>
<a href="#picture1">
<img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
</a>
</li>
<li>
<a href="#picture2">
<img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
</a>
</li>
<li>
<a href="#picture3">
<img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
</a>
</li>
<li>
<a href="#picture4">
<img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
</a>
</li>
</ul>
<div id="full-picture">
<div>
<a name="picture1"></a>
<img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
</div>
<div>
<a name="picture2"></a>
<img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
</div>
<div>
<a name="picture3"></a>
<img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
</div>
<div>
<a name="picture4"></a>
<img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
</div>
</div>
</div>
Sie können eine CSS-Galerie ganz einfach mit nur CSS erstellen, indem Sie diesen Schritten folgen:
In diesem letzten Schritt, wenn Sie auf ein kleines Bild klicken, wird es zu dem entsprechenden großen Bild im Block der großen Bilder gescrollt.
Der Code wird so aussehen:
#gallery {
width: 600px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
border: 2px solid #003C72;
}
#navigation {
list-style: none;
padding: 0;
margin: 0;
display:flex;
justify-content: space-between;
}
#navigation li {
padding: 0;
margin: 0;
margin:5px 0 20px;
}
#navigation li a img {
display: block;
border: none;
}
#navigation li a {
display: block;
}
#full-picture {
width: 600px;
height: 375px;
overflow: hidden;
float: left;}
#full-picture img{
width:100%;
}
Jetzt ist unsere Galerie erstellt! Lassen Sie uns den vollständigen Code anzeigen:
<!DOCTYPE html>
<html>
<title>Der Titel des Dokuments</title>
<head>
<style>
#gallery {
width: 600px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
border: 2px solid #003C72;
}
#navigation {
list-style: none;
padding: 0;
margin: 0;
display:flex;
justify-content: space-between;
}
#navigation li {
padding: 0;
margin: 0;
margin:5px 0 20px;
}
#navigation li a img {
display: block;
border: none;
}
#navigation li a {
display: block;
}
#full-picture {
width: 600px;
height: 375px;
overflow: hidden;
float: left;}
#full-picture img{
width:100%;
}
</style>
</head>
<body>
<div id="gallery">
<ul id="navigation">
<li>
<a href="#picture1">
<img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
</a>
</li>
<li>
<a href="#picture2">
<img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
</a>
</li>
<li>
<a href="#picture3">
<img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
</a>
</li>
<li>
<a href="#picture4">
<img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
</a>
</li>
</ul>
<div id="full-picture">
<div>
<a name="picture1"></a>
<img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
</div>
<div>
<a name="picture2"></a>
<img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
</div>
<div>
<a name="picture3"></a>
<img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
</div>
<div>
<a name="picture4"></a>
<img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
</div>
</div>
</div>
</body>
</html>