DruckversionGalleria für schöne Bildergalerien
Großes Finale - das vollständige Beispiel
Und zum Schluss sehen Sie noch einmal den Gesamtcode des modifizierten Beispiels.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Galleria</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="galleria.css" rel="stylesheet" type="text/css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 80% sans-serif;
background-color: #fff;
margin: 20px;
color: #000;
}
#container {
width: 660px;
margin: auto;
position: relative;
margin-top: 2em;
overflow: hidden;
}
/* Formatierung der Bildbeschriftungen */
.caption {
color: #888;
position: absolute;
top: 280px; /* Bezugspunkt ist #container */
left: 420px; /* Bezugspunkt ist #container */
width: 200px;
}
/* Element mit den Vorschaubildern */
.gallery_demo {
width: 240px; /* Breite */
float: left;
}
/* Formatierung der einzelnen Vorschaubilder - Größe, Rahmen etc. */
.gallery_demo li {
width: 70px;
height: 70px;
border: 3px double #eee;
margin: 0 2px 2px 0;
background-color: #eee;
overflow: hidden;
float: left;
}
/* Hervorhebung beim Hovern über ein Vorschaubild */
.gallery_demo li.hover {
border-color: #bbb;
}
/* Hervorhebung des aktuellen Vorschaubilds */
.gallery_demo li.active {
border-style: solid;
border-color: #31476c;
}
/* Container für das große Bild */
.galleria_container {
margin: 2px auto 60px auto;
height: 262px;
width: 400px;
float: right;
}
.nav {
position: absolute;
top: 180px;
left: 0;
display: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul.gallery_demo').galleria({
onImage: function(image) {
image.css('display','none').fadeIn(2000); /* Einblendeffekt für große Bilder */
$('.nav').css('display', 'block'); /* Element mit class="navi" wird angezeigt */
}
});
});
</script>
</head>
<body>
<div id="container">
<ul class="gallery_demo">
<li><img src="bilder/bild2.jpg" alt="Leuchtturm" title="Leuchtturm"></li>
<li><img src="bilder/bild3.jpg" alt="Regenbogen" title="Regenbogen"></li>
<li><img src="bilder/bild4.jpg" alt="Brücke" title="Brücke"></li>
<li><img src="bilder/bild5.jpg" alt="Steine" title="Steine"></li>
<li><img src="bilder/bild6.jpg" alt="Allee" title="Allee"></li>
<li><img src="bilder/bild7.jpg" alt="Im Wald" title="Im Wald"></li>
</ul>
<p class="nav">
<a href="#" onclick="$.galleria.prev(); return false;">zurück</a> | <a href="#" onclick="$.galleria.next(); return false;">vor</a>
</p>
</div>
</body>
</html>Auch das können Sie sich wieder im Beispiel ansehen
.
Diese Seite ist für Mitglieder von akademie.de reserviert.
Möchten Sie die Mitgliedschaft 14 Tage kostenlos testen und den Beitrag komplett lesen?
Oder möchten Sie zunächst mehr über diesen Beitrag erfahren und die Leseproben sehen?
Ich bin bereits Mitglied