✔ Lightbox

[sight011]

Hallo liebe Leuts!!


Ich hab noch nie was mit dem Prog. gemacht, doch wüde ich gerne wissen, an welcher stelle ich den Quellcode ändern muss!!


ICh egh davon aus das ich die Bilder irgendwo hochlade und die url im text von lightbox eingebe und dan nden gesamten quelltext aufmiener PAge einbinde.


Seh ich das richtig


Gruß

 

[Maik]

Hi,

du musst lediglich in den Links und im src-Attribut des img-Elements den Pfad zu den jeweiligen Bildern anpassen:

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

Quasi: "Plug & Play"

 

[sight011]

Ich liebe Tutorilas, dein Support hat ja gerademal 15 min gedauert!!


Nur leider hat es mich noch nicht konkret weiter gebracht!!



also ich hab hier eine lightbox.css file. und da sind aber 3 Links drin!!


Ich wäre jetzt von 2en ausgegangen -- halt einen für das kleine und einen link für das große Bild?

hab die file mal eben auf meinen server gelegt home.arcor.de/klas0; vielleicht weißt du was ich miene wen ndu n blick reinwirfst, das wäre echt hammer mäßig

Gruß wie gesagt Danke

 

[Maik]

In der lightbox.css sind lediglich die Pfade zu den "Steuer-Bilder" der Lightbox definiert.

Im Original-Script sieht die Verzeichnisstruktur folgendermaßen aus:

• root (html-Datei)
• css
  • lightbox.css
• images
  • blank.gif
  • close.gif
  • closelabel.gif
  • image-1.jpg -> wird in die Lightbox geladen
  • loading.gif
  • next.gif
  • nextlabel.gif
  • prev.gif
  • prevlabel.gif
  • thumb-1.jpg -> Thumb für Link zum Laden des Bildes
• js
  • effects.js
  • lightbox.js
  • prototype.js
  • scriptaculous.js

Die Pfade deiner Bilder, die du in der Lightbox anzeigen willst, werden also nicht in der lightbox.css angegeben, sondern im HTML-Code - siehe obiges Zitat des Quellcodes aus der Lightbox.

 

[chmee]

Da ich es auch gerade benutzt habe, hier meine Erklärung dazu:

In Deine HTML oder php-Datei kommt in den Header:

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

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

Die Ordner js, css und images kopierst Du so in den root ordner, wo auch Deine html-Datei liegt.
Aus dem images-Ordner kannst Du die zwei Beispielbilder image-1 und thumb-1 löschen.

Der Trick ist, dass Du jedem Bilderlink das rel="lightbox" hinzufügst.

<a href="Bilder/1_grossesBild.jpg" rel="lightbox">
<img src="Bilder/1_kleinesBild.jpg" alt="" />
</a>

Wenn sie gruppiert werden sollen, fügst Du im rel noch
eine Bezeichnung hinzu, das könnte so aussehen : rel="lightbox[Familie]".


mfg chmee

 

[Maik]

Dies alles kannst du aber auch im Abschnitt "How to use" nachlesen.

 

[sight011]

... ah ok ok


ich glaube ich verstehe langsam!! -- Tut mir leid, für dich sind das bestimmt "alltägliche Dinge". Ich muss hier erstmal deine Begriffe verstehen! ;-) Wie gesagt, das ist das Erstemal, dass ich das jetzt mache!!

brauch ich dan nur diese beiden Zeilen in meinem html-code (?):

<a href="http://www.tutorials.de/forum/images/image-1.jpg" rel="lightbox"><img src="http://www.tutorials.de/forum/images/thumb-1.jpg" width="100" height="40" alt="" /></a>

<link type="text/css" rel="stylesheet" href="blabla.css">

das kann doch nich sein :suspekt:

 

[Maik]

brauch ich dan nur diese beiden Zeilen in meinem html-code (?):

<a href="http://www.tutorials.de/forum/images/image-1.jpg" rel="lightbox"><img src="http://www.tutorials.de/forum/images/thumb-1.jpg" width="100" height="40" alt="" /></a>

<link type="text/css" rel="stylesheet" href="blabla.css">

das kann doch nich sein :suspekt:

Stimmt, die o.g. Javascript-Dateien musst du natürlich auch noch ins HTML-Dokument laden, ansonsten läuft die Lightbox nicht.

 

[sight011]

ohhh sorrymaik das mach ich doch jetzt erstmal!! Ich idiot!! (ich werde esjetzt erstmal lesen)

 

[Maik]

ohhh sorrymaik das mach ich doch jetzt erstmal!! Ich idiot!! ich miente das lesen!!

Kein Problem, ich mach dir doch keine Vorwürfe