dkdenz' CSS-Spielwiese
Dirk Klar - Mediendesign - Webdesign - Lübeck

Hilfreiche Anwendungsbeispiele für den Einsatz von CSS

• #01Kennzeichnung aktiver Seiten mit CSS
• #02Dynamische, verzögerungsfreie Verweis-Grafiken mit CSS
• #03Kennzeichnung externer Verweise mit CSS
• #04Horizontale Linien mit CSS gestalten
• jQuerySlideshow + Lightbox
• Impressum

Das jQuery Cycle Plugin mit dem jQuery lightBox Plugin vereint

Zwei großartige jQuery Plugins problemlos kombinieren.
Um das zu bewerkstelligen, lädt man sich die dafür benötigten Plugin-Dateien auf den Seiten der Hersteller herunter:

jQuery Cycle Plugin, jQuery lightBox Plugin

Wie die einzelnen Einstellungen der Plugins aussehen, kann man auf den gut dokumentierten Plugin-Seiten nachsehen.

Hier geht es darum, wie man die beiden Plugins kombiniert.

Ein Blick in den Quelltext, wie man das Ganze einbaut, am Beispiel dieser Seite.

Referenzierungen im Head:

<script type="text/javascript"↵
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fade/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="fade/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="fade/jquery.lightbox-0.5.css" media="screen" />
	

Funktionsaufrufe im Head:

<script type="text/javascript">
$(document).ready(function() {
	$('.slideshow').cycle({
		fx: 'fade',
		pause: 4
	});
}),
$(function() {
	$('a.lightbox').lightBox();
	});
</script>
	

(X)HTML im Body:

<div class="slideshow" style="width:300px;margin:30px auto;">
	<a href="fade/01_large.jpg" title="text" class="lightbox">↵
  <img src="fade/01_small.jpg" width="298" height="180" alt="text" /></a>
	<a href="fade/02_large.jpg" title="text" class="lightbox">↵
  <img src="fade/02_small.jpg" width="298" height="180" alt="text" /></a>
	<a href="fade/03_large.jpg" title="text" class="lightbox">↵
  <img src="fade/03_small.jpg" width="298" height="180" alt="text" /></a>
	<a href="fade/04_large.jpg" title="text" class="lightbox">↵
  <img src="fade/04_small.jpg" width="298" height="180" alt="text" /></a>
	<a href="fade/05_large.jpg" title="text" class="lightbox">↵
  <img src="fade/05_small.jpg" width="298" height="180" alt="text" /></a>
</div>

Das Ganze sieht dann so aus:

(Bilder von de.wikipedia.org)

Valides XHTML 1.0 Strict Valides CSS

Ubuntu Validome-Forum JSWelt-Forum Bookmarklets Twitter

Impressum
Herausgeber und verantwortlich für den Inhalt dieser Website:
Dirk Klar
Wachthauskoppel 34
23566 Lübeck
04 51 / 7 07 19 04
email@dkmd.de