DruckversionVorschaubilder mit dem Lightbox-Effekt vergrößern
Vollständiges Beispiel
Zum Abschluss sehen Sie ein vollständiges Beispiel für den Einsatz des Lightbox-Plug-ins:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lightbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 80% sans-serif;
background-color: #fff;
margin: 20px;
color: #000;
}
h1 {
font-size: 1.4em;
margin-bottom: 10px;
}
p {
margin-bottom: 40px;
}
#container {
width: 660px;
margin: auto;
}
a img {
border: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
$(function(){
$('#meinegalerie a').lightBox({
txtImage: 'Bild',
txtOf: 'von ',
overlayOpacity: 0.7,
fixedNavigation: true
});
});
</script>
</head>
<body>
<div id="container">
<div id="meinegalerie">
<a href="bilder/bild1.jpg" title="Boot"><img src="bilder/bild1_k.jpg" alt="Boot" ></a>
<a href="bilder/bild2.jpg" title="Leuchtturm"> <img src="bilder/bild2_k.jpg" alt="Leuchtturm" ></a>
<a href="bilder/bild3.jpg" title="Regenbogen" ><img src="bilder/bild3_k.jpg" alt="Regenbogen" ></a>
<a href="bilder/bild4.jpg" title="Brücke" ><img src="bilder/bild4_k.jpg" alt="Brücke" ></a>
</div>
</div>
</body>
</html>Das Beispiel haben wir für Sie auch zum Anschauen
vorbereitet.
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