PHP Blogger

Startseite Schreib mir ne Mail! RSS Abo Webnews

Lightbox 2 (deutsch)

10. Juli 2007 um 15:49 · Gehört zu Best-Of, Framework, Javascript

Bereits im April habe ich über Lightbox 2 berichtet - Eine kleine Javascript Bibliothek, um die Zoom-Ansicht in Bildergalerien zu dynamisieren. Die Einbindung wird in diesem Artikel ebenfalls ausführlich beschrieben. Leider gibt es von Lokesh Dhakar keine deutsche Sprachvariante.

Ich habe es in meinen letzten Website-Projekten gerne eingesetzt und dafür eine deutsche Übersetzung angefertigt. Die Bibliothek ist unter der Creative Commons Lizenz verfügbar und derzeit in der Verion 2.03.3 verfügbar.

Update: Mittlerweile gibt es einen 100% Lightbox-Klon namens “Slimbox“. Er überzeugt durch die geringe Dateigröße, Performance und Stabilität. Die deutsche Version von Slimbox gibts exklusiv beim PHP Blogger: Jetzt Slimbox 1.4 auf deutsch downloaden!

Unter folgender URL kann die deutsche Version von Lightbox (2.03.3) heruntergeladen werden:
http://www.phpblogger.net/download/lightbox2_deutsch.zip

Die Änderungen/Übersetzungen umfassen folgende Dateien:

  • lightbox.css - Änderung der Größenangabe des Schliessen-Buttons
  • lightbox.js - Übersetzung “Bild X von Y”
  • closelabel.gif, nextlabel.gif und prevlabel.gif - Übersetzung der Worte
  • index.html - Übersetzung der Test-Datei und hinzufügen einer kleinen Testgalerie

Das Original-Release gibts übrigens unter http://www.huddletogether.com/projects/lightbox2/

Teile und genieße Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Nils Hitze meint dazu:

10. Juli 2007 um 20:45

Dankeschön lieber Tim. :)

Stanislav meint dazu:

12. Juli 2007 um 15:24

Also bei mir im Safari 3 auf dem MAC, sind die Umlaute in der index.html kaputt ;)

Struppi meint dazu:

13. Juli 2007 um 15:52

Da fehlt auch eine Angabe zum Zeichensatz.

(captcha sind scheisse)

timi meint dazu:

14. Juli 2007 um 15:21

Update: Die Umlaute sind nun maskiert und der Zeichensatz voreingestellt.

Matthias meint dazu:

24. Juli 2007 um 11:38

Danke für die deutsche Übersetzung! Danach hatte ich schon gesucht. :)

Simon meint dazu:

2. August 2007 um 17:10

Perfekt - vielen Dank!

selfblog » Blog Archiv » Brombeere on Lightbox meint dazu:

9. September 2007 um 14:33

[…] Dank dem phpblogger sind die Buttons in der Lightbox nun […]

Helmuts Weblog meint dazu:

10. Oktober 2007 um 00:07

Danke für die Übersetzung und Erstellung der Buttons. Habe die Dateien soeben auf http://www.ff-inzersdorf.at hochgeladen.

Marco meint dazu:

13. Dezember 2007 um 16:12

Wie muss ich das einstellen, dass die Lightbox ganz oben (nicht ca. 85 pixel unterhalt) anfängt?

timi meint dazu:

13. Dezember 2007 um 16:22

Hi Marco, Schau mal in die lightbox.js Zeile 414. Ändere Element.setTop('lightbox', lightboxTop); in Element.setTop('lightbox', 0);

deutsche lightbox - PSD-Tutorials.de - Forum meint dazu:

13. Januar 2008 um 17:57

[…] deutsche lightbox Hi, Download: PHP Blogger: Lightbox 2 (deutsch) - Ein PHP Blog auf deutsch Tut: Lightbox Einbindung - Javascript & Ajax @ tutorials.de: Forum, Tutorial, Anleitung, […]

Thomas meint dazu:

16. Januar 2008 um 22:25

Hallo zusammen,

Bin sehr zufrieden mit dem Script, doch habe ich noch eine kleine FRage.
Kann man irgendwo einstellen, dass alle Bilder mit der Höhe 400px angezeigt werden. Denn wenn alle in der Original grösse erscheinen geht der ganze Lightbox Effekt verloren.

Vielen Dank

Thomas

martin meint dazu:

25. Januar 2008 um 14:53

Hallo,

klappt super….nur bei der Einbindung von loading.gif und closelabel.gif raufe ich mir
seit Stunden den Schädel…ich kann machen was ich will, im geöffneten lightbox-Bildfenster erscheint immer ein Fragezeichen…ich kann nich mehr!
Den image-Ordner hin- und hergeschoben, in der lightbox.js pfade geändert…nichts!!!

Bin ich zu doof???

martin

timi meint dazu:

25. Januar 2008 um 20:54

Hi Martin,

hast Du dran gedacht, dass die Pfadangaben in CSS und JS unterschiedlich sind? Bei JS geht der relative Pfad vom Ordner der HTML oder PHP Datei aus - bei CSS werden die Pfade relativ zum Ordner der CSS Datei angegeben.

Martin meint dazu:

28. Januar 2008 um 16:11

Hmmm….Nö, weil :-((
Kannst Du das mal auf “Deutsch” übersetzen? Oder mal bitte ein Beispiel zeigen??? Danke.

timi meint dazu:

29. Januar 2008 um 08:44

Am besten Du liest Dir diesen Artikel mal durch, da wird alles mit Beispielen erklärt: http://www.phpblogger.net/2008/01/08/absolute-oder-relative-pfade/ Und bei der Lightbox sind ja auch Beispiele dabei…

Martin meint dazu:

29. Januar 2008 um 16:30

Na genau! DANKE!!!!!!!!!!
Jetzt klappts!!!!!!!!!

Tom meint dazu:

12. Februar 2008 um 15:14

Hallo!

Ich hab dasselbe Problem, komme jedoch mit der Hilfestellung nicht weiter.

/wp-content/plugins/mygallery/lightbox-plugin/css
/wp-content/plugins/mygallery/lightbox-plugin/images
/wp-content/plugins/mygallery/lightbox-plugin/js

So sieht der Eintrag in der JS aus:

var fileLoadingImage = “images/loading.gif”;
var fileBottomNavCloseImage = “images/closelabel.gif”;

Die gifs liegen im images ordner.
Habs auch schon mit ../images/loading.gif versucht. geht auch nicht.

Was mach ich denn noch falsch? Steh wohl komplett auf der Seife.

Danke und Gruss
Thomas

Tom meint dazu:

12. Februar 2008 um 15:15

Ach ja, die index.html liegt direkt im /lighbox-plugin

g

teK blog meint dazu:

13. Februar 2008 um 23:50

Lightbox2 vs. Slimbox…

Da ich ja eh grad meinen Blog wieder neu einrichte muss ich ma wieder von gaaaaanz vorne anfangen. Da stellt sich wie früher auch schon die Frage was ich zur eleganten Anzeige von Grafiken verwende.
Wie ich dann zum Glück auf PHP Blogger erfahren hab…

karl meint dazu:

27. Februar 2008 um 17:44

Bei mir erscheinen “Weiter” und “zurück” erst wenn man mit der Maus auf dem Bild entlang fährt.
Kann man diese Buttons nicht dauerhaft anzeigen, damit man von vornherein sieht, dass man blättern kann?

timi meint dazu:

16. März 2008 um 11:58

Hi Karl, bislang ist keine deartige Funktion vom Hersteller aus geplant…

chris meint dazu:

21. März 2008 um 14:40

das muss doch ein hover effekt sein … wenn man den dann weg macht, müsste das mit wem “weiter” und “zurück” von karl gelöst sein, oder?

timi meint dazu:

15. April 2008 um 08:08

Hi Chris, das kann sein. Ich bin lediglich der Übersetzer des Tools und möchte den Originalfunktionsumfang beibehalten - für neue Features bitte direkt den Author des Tools befragen. Sobald die Features im Original-Release sind, wird auch die Übersetzung aktualisiert…

Michael meint dazu:

16. April 2008 um 18:30

Weiß jemand, ob und wie man Google AdSense in die Lightbox einbauen kann?

timi meint dazu:

16. April 2008 um 19:54

Hi Michael, AdSense kann man nicht in die Lightbox einbauen - macht eigentlich auch gar keinen Sinn… Was hast Du denn vor?

Michael meint dazu:

16. April 2008 um 20:40

Ich würde halt gerne rechts neben den bildern oder oben drüber werbung anzeigen lassen. die galerie wird von vielen nutzern bei mir genutzt.
gibt es keine möglichkeit werbung dort einzubinden?

timi meint dazu:

17. April 2008 um 06:31

Für diesen Fall würde ich eine eigene Implementierung starten… In Lightbox wie es ist, ist eine derartige Funktion nicht vorgesehen.

Thomas Fichtner meint dazu:

23. April 2008 um 22:01

Hallo,

ist es bei der Ligthbox auch möglich eine andere Grafik als die vorhandene als Ladegrafik einzubinden?
Habe mal versucht diese zu ersetzten, wird aber nicht inder korrekten Größe dargestellt.

Ich hab mich doof gesucht um irgendwo die Größe des loading.gif festzulegen. Finde aber nichts!

Hat da jemand einen Tip?

Gruß
Thomas

timi meint dazu:

24. April 2008 um 13:48

Hi Thomas, wird die Grafik beschnitten oder kleiner skaliert?

Jiajia meint dazu:

24. April 2008 um 21:17

DANKE! Du bist meine Rettung! Ich kann irgendwie die huddletogether.com-Seite nicht öffnen und auf jeder Seite, die ich zum Thema Lightbox finde ist ein Link zu der Seite =(
LG Jiajia

Thomas Fichtner meint dazu:

24. April 2008 um 22:38

Hallo timi

die Grafik ist kleiner skaliert.

Wie gesagt, habe schon in allen scripten nach der Größenbestimmung gesucht aber nichts gefunden!
Wäre sehr schön wenn mir da einer mal unter die Schweißnassen Arme greifen könnte!

Gruß
Thomas

Thomas Fichtner meint dazu:

29. April 2008 um 10:37

Hintergrundgrafik (loading.gif) mit eigener Grafik ersetzen:

> Im Ordner images die loading.gif mit eigener Grafik ersetzen
> in der stylesheet Datei hinzufügen: #loading img {height: 66px; width: 166px}
> dort natürlich die aktuellen Werte der Höhe und Breite eintragen
> jetzt wird die neue Grafik in der aktuellen Höhe und Breite dargestellt
> getestet in IE und FF

Gruß
Thomas

timi meint dazu:

5. Mai 2008 um 15:00

Ah cool, danke für den Hinweis, Thomas…

Rupert meint dazu:

6. Mai 2008 um 12:36

hi alle zusammen.

kann mir vllt. jemand kurz nen tip geben wo ich die orginalgröße der bilder (z.b. 2048×1024) vllt auf 600×400 ändern kann. und bitte ohne die bilddatein selber zu beschneiden. vllt geht es ja auch nur eine bestimmte breite anzugeben das sich die höhe je nach format des bildes selbst korregiert!?

hat da einer was in die richtung?

gruß rupert

ps: gern auch per mail die tips, aber vllt besse hier posten falls noch wer danach sucht!?

timi meint dazu:

6. Mai 2008 um 14:22

Hi Rupert,

versuch mal mit PHP Grafiken zu skalieren:
http://www.tutorials.de/forum/php-codeschnipsel/244062-thumbnails-mit-php-erstellen-lassen.html

Ist ganz gut beschrieben und kann neben JPEGs auch andere Grafik-Formate…

Rupert meint dazu:

7. Mai 2008 um 08:01

Hallo Timi,

danke für das super script, aber leider war es nicht das was ich gesucht habe. die thumbs erstell ich so manuell mit nem thumbmaker, binde die einzelnen bilder mit nem anderen script ein das ich nicht zuviel schreiben muss.

aber das was ich such bezieht sich schon genauer auf die lightbox2. ich hab einfachc bilder die teilweise 8megapixel haben und wenn ich die dann öffner und mit lightbox ranzoom siehst man nur oben links die ecke.

daher jetzt die frage ob und wenn ja wo man in der lightbox die maximale bildgröße bei der großwiedergabe einstellen kann!?!?

gruß
rupert

timi meint dazu:

7. Mai 2008 um 08:31

Hi Rupert,

Du suchst eine Funktion um Bilder zu skalieren. Das funktioniert nur Serverseitig, also mit PHP. Welche Größe die skalierten Bilder haben ist egal. Klein skalierte Bilder (so um die 100px Breite) werden als Thumbnails bezeichnet, größere und breitere heissen einfach skalierte Bilder :)

Also mein Tipp: Nimm den Thumnailer und gib einfach eine größere Abmessung für die Bilder ein… Und schon hast Du alle Bilder in einer größe bspw. 800×600 und nicht mehr 20000000×10000000…

sushi meint dazu:

8. Mai 2008 um 22:19

in meiner bildergalerie wird im IE der schwarze hintergrund vom lightbox abgeschnitten, im firefox nicht. woran kann das liegen? wo kann man das einstellen?

grüessli sushi

RSS für Kommentare zu diesem Artikel · TrackBack URI

Schreib Deine Meinung