Verfasst von Alice am 18.07.2009 - wurde schon 24262 mal gelesen
Lightbox Script Einbau Einbinden Galerie
Lightbox einbauenTutorials » Html/Css Tutorials » Lightbox einbauen
Verfasst von Alice am 18.07.2009 - wurde schon 24262 mal gelesen
Lightbox einbauen - Tutorial
Es wurde ein Tutorial gewuenscht, welches erklaert wie man das Lightbox Script korrekt in die eigene Seite integriert ...Nun denn, dann wollen wir mal :)
Was wird bneoetigt
- Lightbox Script =>Downloaden
- eigene Website
Step 1
Zu ersteinmal muessen wir die Zip-Datei mit einem Entpacker entpacken und anschliessend dann die Dateien auf unsren Webspace laden, danach vergewissern wird uns, dass wir auch alle benoetigen Dateien der Lightbox, korrekt auf unseren Webspace geladen haben.
Alles korrekt und da wo es hin soll?
Prima, dann machen wir uns nun an den Einbau des Scriptes ...
Step 2
Der nachfolgende Code muessen wir in den head-Bereich, also zwischen <head> und </head> unserer Website platzieren
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Bitte darauf achten, dass die Pfadangaben u.U. angepasst werden muessen
step3
Als naechste muessen wir die CSS-Datei der Lightbox einbinden, das machen wir mit folgendem Code
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Auch hier bitte darauf achten, dass der Pfad stimmt
step4
Die Lightbox kann auf 2 Arten angewendet werden, die erste Moeglichkeit ist, die Lightbox nur fuer ein einziges Bild zu verwenden
Beispiel:
<a href="images/image-1.jpg" rel="lightbox" title="Bildbeschreibung">image #1</a>
Hierbei ist das rel Attribut dafuer verantwortlich, dass die Lightbox erkennt, dass sie hier zum Einsazt kommen soll, ohne dieses Attribut funktioniert es nicht. Mittels title Attribut koennen wir unserem Bild eine Beschreibung zuweisen, dies ist optional.
Eine weitere Moeglichkeit waere das Lightbox Script als Galerie zu nutzen, so dass man zwischen mehreren Bildern hin und her blaettern kann.
Beispiel:
<a href="images/image-1.jpg" rel="lightbox[GALERIENAME]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[GALERIENAME]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[GALERIENAME]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[GALERIENAME]">image #4</a>
<a href="images/image-2.jpg" rel="lightbox[GALERIENAME]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[GALERIENAME]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[GALERIENAME]">image #4</a>
Die Galerie-Funktion kommt hier zu Stande, weil wir das rel Attribut noch durch den Zusatz [GALERIENAME] ergaenzt haben. [GALERIENAME] GALERIENAME kann durch jedes beliebige Wort ersetzt werden, es muss darauf geachtet werden, dass jedes Bild, dass zu ein und der selben Galerie gehoeren soll, immer bei [GALERIENAME] das selbe Wort stehen hat.
Man kann auf einer Seite mehrere Bildergalerien erstellen, hierzu muss einfach fuer jede Galerie ein eigener Galeriename angegeben werden.
Beispiel:
<a href="images/image-1.jpg" rel="lightbox[galerie1]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[galerie1]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[galerie1]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[galerie1]">image #4</a>
<br /><br />
<a href="images/image-1.jpg" rel="lightbox[galerie2]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[galerie2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[galerie2]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[galerie2]">image #4</a>
<a href="images/image-2.jpg" rel="lightbox[galerie1]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[galerie1]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[galerie1]">image #4</a>
<br /><br />
<a href="images/image-1.jpg" rel="lightbox[galerie2]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[galerie2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[galerie2]">image #3</a>
<a href="images/image-4.jpg" rel="lightbox[galerie2]">image #4</a>
So das war dann auch schon der ganze Spuck, sollten Fragen auftauchen, dann ab damit in die Kommentare ...
Kommentar schreibenHinterlasse einen Kommentar
Du musst angemeldet sein, um einen Kommentar zu hinterlassen...
Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...
