Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: Lightbox JS v2.0 einbinden.



Ranking: +8   Kommentare: 19   |   Bewertung: Keine Berechtigung!  

Vorwort


Hallo,

mit diesem Tutorial möchte ich kurz auf deutsch erklären, wie man das Lightbox JavaScript v2.0 für seine Webseite nutzen kann.

Schritt 1


Abb.1
Abb.1
Lightbox JS v2.0 ist ein einfaches Javascript das benutzt wird, um Bilder auf der aktuellen Seite zu überlagern und schön darzustellen.

Es ist einfach zu Installieren und funktioniert mit allen modernen Browser.

Was in Version 2.0 neu ist:

- Bilder-Sets: in Verbindung stehende Bilder gruppieren und durch sie mit Mühelose steuern.
- Effekte: Fliesende übergänge.

Schritt 2


Abb.2
Abb.2
Als erstes ladet Ihr euch das Javascript hier runter:

http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip

Schritt 3


Abb.3
Abb.3
Nun kopiert Ihr in diesen Code in euren Header:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Zusätzlich müßt Ihr noch die CSS-Datei von Lightbox JS v2.0 in eurer Seite laden.
Das geht am einfachsten indem Ihr einfach diesen Code mit in euren Header kopiert:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Schritt 4


Abb.4
Abb.4
Um Lightbox JS v2.0 nun zu nutzen, müßt Ihr bei den Bildern, die Ihr mit dem Effekt nutzen wollt, das Attribut rel="lightbox", in den Link der Bilder, einfügen.

Hier ein Beispiel:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Um die Funktion der Bilder-Sets zu nutzen, ändert Ihr das Attribut einfach in rel="lightbox[roadtrip]". Damit kann jedes Bild, auf der geladen Seite, mit diesem Attribut angeschaut werden, ohne Lightbox JS v2.0 schließen zu müssen.

Hier ein Beispiel:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Es gibt kein Limit wieviele Bilder Ihr für diese Sets nutzt.

Schritt 5


Abb.5
Abb.5
So Lightbox JS v2.0 sollte es nun bei euch auf der Webseite funktionieren.

Es kann jetzt noch zu Fehlern in der Anzeige von den Bildern vom Lightbox JS v2.0 selber kommen. Um diese zu beheben müßt Ihr einfach in der CSS-Datei die Pfade der Bilder anpassen!

blank.gif findet Ihr in Zeile 48.
prevlabel.gif und nextlabel.gif findet Ihr jeweils in Zeile 53 und 54.

Viel Spaß mit dem ganzem.

MfG
elNinO


Veröffentlicht von: elNinO
Veröffentlicht am: 6 Jan. 2007
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: 2.0 Java Lightbox


Themenverwandte Tutorials


Kommentar(e) (19)


rosipanksi sagt:

Dieser Beitrag wurde leider gelöscht!

Zuletzt bearbeitet am: 21 Jun. 2009 16:56:29

21 Jun. 2009 16:54:05 •


chrizn sagt:

Sehr schönes Tutorials,danke

1 Jun. 2009 11:17:51 • Antworten


andriy sagt:

les das tutorial

14 Jan. 2009 21:03:56 • Antworten


fima sagt:

Hallo,

kann mir jemand dabei helfen wie lightbox einbaut??? BITTE!

Es wäre wirklich eine sehr große Hilfe.

26 Nov. 2008 08:54:51 • Antworten


werny sagt:

Hallo,

ich habe eine Galerie mit Lighbox erstellt.
Alles schön und gut.

image #1
image #2
image #3

Nur schaut das bei mir so aus. Ich habe einen Button (galerie.jpg)
und ich möchte daß die gesamte Serie beim klicken auf den Button startet.
Also keine einzelnen Thumbnails mit den jeweiligen Links.
Wie kann ich das umsetzen?

Danke.

LG,
Werner

27 Aug. 2008 11:54:24 • Antworten


Solis Ortus sagt:

Die lightbox ist toll! Und das Tutorial gut erklärt. :)
Aber aufpassen, mit der neuen Version 2.04 gab es eine kleine Änderung:

Code:


<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>



@immergreen: Klaro, von weiteren Attributen wie "class" oder "style" zeigt sich die lightbox völlig unbeeindruckt.

@x0x0x1: Wie ist die Frage gemeint? Mehr als Javascript wird vom Browser nicht benötigt. PHP oder sonstwas ebenfalls nicht.

Zuletzt bearbeitet am: 4 Jun. 2008 23:22:51

4 Jun. 2008 23:20:55 • Antworten


deleted_1267831731 sagt:

Funktioniert die Lightbox erst wenn man sie hochgeladen ist?

4 May. 2008 18:23:38 • Antworten


Gorben85 sagt:

Nettes und einfaches tut.
Wuste bis heute nicht ganz wie ich die richtig einbinden musste. :)
Das Tut hat mir sehr geholfen. Daumen hoch XD

5 Mar. 2008 08:21:26 • Antworten


immergreen sagt:

kann ich dem link trotzdem eine class zuweisen (ich moechte einen hovercssbutton machen, und wenn man auf den klickt oeffnet sich das gewuenschte bild)?

25 Jan. 2008 14:33:50 • Antworten


MasterP sagt:

ich habe mit lightbox 2.0 noch ein Darstellungsproblem mit dem IE7, der füllt das Schwarz nicht bis ganz zum Rand aus :(

14 Dec. 2007 23:57:58 • Antworten



Anfang

<<

1

2>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder