Loading...   Upload Image

Lightbox einbauenTutorials » Html/Css Tutorials » Lightbox einbauen

Verfasst von Alice am 18.07.2009 - wurde schon 21106 mal gelesen

Kategorie: Html/Css
Bewertung:
6x bewertet
Schwierigkeit: einfach
Kommentare: [ 15 ]

Tag - Schlagwort Lightbox Tag - Schlagwort Script Tag - Schlagwort Einbau Tag - Schlagwort Einbinden Tag - Schlagwort Galerie

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>


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>

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>


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 ...


Affiliates:   Gallery Yuri  •   Blue-Graphics  •   Chibi Graphics  •   Pat DG  •   The Seduction  •   Colorful Gfx  •   Design Grafixx  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider