Lightbox JS für Photoshop Web-Fotogalerie

Lightbox
Ich liebe Lightbox JS zur Darstellung von Bilder und Fotos hier im Blog. Jetzt habe ich bei photoshop Lab ein Tutorial von Tommy Maloney gefunden, welches zeigt wie man der Web-Fotogallerie von Photoshop beibringen kann eine Gallerie zu erstellen, die Lightbox JS nutzt. Beispiel gefällig.

Es sind nur kleine Eingriffe in wenigen Dateien notwendig und Anpassungen des Layouts sind auch möglich. Mit Tommy’s Erlaubnis biete ich ich hier das fertige Set für die aktuelle Lightbox Version 2.2 zum Download an.


Im Verzeichnis ~/Adobe Photoshop CS2/Vorgaben/Web-Fotogalerie gibt es für jede Web-Fotogalerie-Vorlage ein Verzeichnis. In diese Verzeichnis kopiert ihr den kompletten Ordner „Lightbox 2.2“, den ihr nach dem entpacken des Download erhaltet. Die Anpassung in der lightbox.js und Thumbnail.htm sind bereits eingebaut. In Photoshop steht nun „Lightbox 2.2“ als neue Web-Fotogalerie unter Datei > Automatisieren > Web-Fotogalerie… zur Verfügung.

Wollt ihr noch Änderungen im Layout der Fotogalerie durchführen kommt ihr um eine Anpassung der IndexPage.htm und der gallery.css nicht herum. Hilfreich kann dabei die Übersicht der Adobe Photoshop Web Gallery Tokens sein, welche die unterschiedlichen Parameter innerhalb des Photoshop-Dialogs in der HTML-Datei wiedergeben. Soll ein Token eine Formatierung über einen Style erhalten, so muss der Style in der IndexPage.htm definiert werden.

Schlagwörter: ,

25 KOMMENTARE

  1. Reen am 24.11.2006 | Permalink

    Das ich die Webgalerien anpassen kann, dass wusste ich ja. Aber das man das Lightbox Javascript einbauen kann, dass ist ja toll!
    Guter Tipp!!

  2. lea am 26.11.2006 | Permalink

    Na ich weiß schon, wem ich das mal verklickern werd :D
    Danke für den Tipp!

  3. notter am 29.12.2006 | Permalink

    hallo, ich bin seit kurzem begeisterter kopflos.eu leser.

    der eintrag mit der lightbox hat mich begeistert. ich habe die datei in den photoshop cs2 eingebunden und ein erstes album erzeugt.

    warum werden im explorer von microsoft die bilder untereinander dargestellt und beim firefox immer zwei nebeneinander ?

    http://www.rolandnotter.com/test

  4. thomas am 30.12.2006 | Permalink

    Gebe mir Mühe Dich als Stammleser nicht zu verlieren…

    Das der IE die Bilder nur in einer Spalte anzeigt, liegt wahrscheinlich daran, dass er wie so oft die Formatierung missinterpretiert.

    Die index.htm und die CSS-Datei sind sowieso nur Templates, die man der eigenen Website/den eigenen Bedürfnissen anpassen sollte.

  5. ironeden am 24.04.2007 | Permalink

    hui…

    danke erstmal für das nette downloadpaket… funzt soweit ganz toll. allerdings hab ich da dann doch nochmal ne frage:

    PS generiert mir immer nur ne index.htm mit max 15 Thumbs. Sind dann noch weitere Fotos vorhanden wird entsprechend ne index2.htm angelegt usw.

    Ansich könnt ich jetzt nen zusatzlink einbauen, doch schöner wäre es ja, wenn man alle Thumbs auf einer seite haben würde.

    Beispiel: http://taroland.de/gallery/0bis6/index.htm entsprechend ../index_2.htm

    Danke schonmal für eure Tipps,

    Gruß,

    der Iron

  6. thomas am 24.04.2007 | Permalink

    Ich kann aktuell nicht nachschauen, da ich meinen Mac nicht habe :(

    Wie ich aber sehe hast Du es ja selbst hinbekommen.

  7. Andreas am 02.07.2007 | Permalink

    Hallo! Tolle Arbeit, danke!

    Habt Ihr das IE Problem hinbekommen? (Es werden alle Thumbs untereinander gelistet…)

    Andreas

  8. thomas am 02.07.2007 | Permalink

    Der IE interpretiert eben die CSS-Angaben nicht korrekt. Packe mal in der gallery.css bei dem Klasse .thumbnail zusätzlich eine Breite rein, die der Bildbreite in etwa entspricht: width: 250px;

    Ich habe es im Beispiel auch mal eingebaut, so dass dieses jetzt auch unter IE zwei Spalten hat.

  9. Anett am 13.07.2007 | Permalink

    Wow, eine super Idee. Klasse Fotogalerie. Hab sie mir direkt mal geladen.
    Problem bei mir allerdings, dass ich die Überschrift nicht ändern kann. Bei mir steht in jeder Generierung Adobe Webgalerie.
    Wo krieg ich das geändert?

  10. thomas am 13.07.2007 | Permalink

    In dem Photoshop Dialog wählst Du unter Optionen „Banner“ aus und kannst dort dann den Titel ändern.

  11. Jörg am 15.07.2007 | Permalink

    Hallo, bei mir stellt die Lightbox immer nur 15 Thumbs dar, weshalb? Da ich an Ermangelung meine Kentnisse noch nicht dahinter gestiegen bin weshalb das so ist, kann mir hoffentlich jemand helfen. THX Jörg

  12. Tom am 27.07.2007 | Permalink

    Hi das Plugin ist super – allerdings wüsste ich gerne noch einen Trick wie ich mehr als 15Bilder auf eine Seite bekomme – bei größeren Galerien ist das sinnvoll! Cheers

  13. thomas am 27.07.2007 | Permalink

    Ich habe die HTML-Dateien angepasst und jetzt sollte es bei jedem möglich sein auch mehr al 15 Bilder auf eine Seite zu bekommen. Außerdem ist es jetzt möglich in dem Photoshop Dialog unter “Miniaturen” die Spalten- und Zeilenanzahl einzugeben. Das neue Paket steht oben unter dem Download-Link zur Verfügung

  14. Ace am 27.08.2007 | Permalink

    @ Thomas:
    Das mit den “mehr als 15 Bilder in einer index.html” funzt leider immernoch net (auch mit dem neuen Download-Paket). Wäre lieb wenn du mir da mal ein tipp geben könntest, wie das zu man das zum rennen bekommt ;)

    Danke Dir

    Greetz

    Ace

  15. thomas am 28.08.2007 | Permalink

    Dir wird geholfen!

    In der Dialogbox unter Optionen selektiere Miniaturen. Dort gibt es die Möglichkeit der Eingabe der gewünschten Spalten und Zeilen für Deine Web-Galerie. Wenn nun das Produkt aus Spalten und Zeilen nicht der gewünschten Anzahl Bilder entspricht, packt das Script die weiteren Bilder in neue HTML-Dateien.

    Beispiel: Dein Ordner beinhaltet 40 Bilder. Deine Eingaben bei Spalten 5 und bei Zeilen 3. Das Script generiert eine index.html mit 15 Bildern (5 x 3), eine index_2.html mit weiteren 15 Bildern und eine index_3.html mit 10 Bilder (eben der Rest von 40 – 15 – 15).

    Eine Verlinkung der einzelnen Seiten musst Du dann in die HTML-Dateien einbauen oder die IndexPage.htm im Lightbox 2.2-Ordner anpassen (siehe “Adobe Photoshop Web Gallery Tokens” im Beitrag).

    Oder Du stellst einfach so viele Zeilen/Spalten ein, damit alle Bilder auf/in eine Seite gepackt werden.

  16. frank am 18.09.2007 | Permalink

    Hallo,
    erstmal ein Riesenlob für Kopflos.
    Ich habe heute “lightbox für photoshop” entdeckt, gleich ausprobiert und es funktioniert problemlos.
    Nun generiert lightbox die Fotos 350 px breit und die thumbnails 75px, aber ich hätt’s doch gern größer. Nunsuch ich schon seit Stunden, wie ich das ändern kann, find aber nix.

    Wie geht’s denn richtig?

  17. thomas am 18.09.2007 | Permalink

    In der Dialogbox von Photoshop für die Webgalerie gibt es unter [Optionen] ein Drop-Down-Menü indem Du für die Größe der Bilder unter [Große Bilder] und für die Thumbnails unter [Miniaturen] die gewünschte Größe einstellen kannst.

  18. Alex am 18.09.2007 | Permalink

    Super!!!Danke…

  19. frank am 19.09.2007 | Permalink

    Auch von mir vielen Dank für die schnelle Hilfe.
    Gibt es eine Möglichkeit die Breite der Seiten auf 640 px zu begrenzen?
    Die Fotogalerie soll in ein Frameset hinein, und da möglichst keine horizontalen Scrollbalken kriegen.

  20. frank am 19.09.2007 | Permalink

    Hab’s schon selbst gefunden:
    bei gallery.css

    sorry

    frank

  21. Miriam am 30.09.2007 | Permalink

    Hi….ich finde die Bilder mit den Wasserflammen einfach super genial….kann mir jemand sagen ob es dafür irgendwo ein Tutorial gibt, würde nämlich auch sehr gerne solche Bilder basteln, habs schon selbst versucht, aber ich bekommes einfach nicht so hin…

    Würde mich über eine Antwort sehr freuen..

    lG Miriam

  22. Christoph am 03.11.2007 | Permalink

    Geil danke denn ich bin grad voll zu dumm um den ganzen html krams dort zu verstehen

    -.-**

    gruß, Christoph

  23. FELx am 24.11.2007 | Permalink

    Hab alles versucht, aber mein PS schmiert immer ab, wenn ich Lightbox 2.0 ausführen will. Weiß wer Rat?

  24. thomas am 25.11.2007 | Permalink

    Welche Version, auf welchem Betriebssystem? Ein paar mehr Infos und die Hilfe wird möglicherweise einfacher.

  25. FELx am 26.11.2007 | Permalink

    @Thomas: Sorry.

    Lightbox 2.0
    PS CS2
    Leopard

2 Trackbacks

  1. [...] in letzter Zeit einige Anfragen zur Lightbox-Photoshop-Web-Fotogalerie aufkamen habe ich mich der HTML-Dateien angenommen und diese angepasst. Jetzt ist nicht nur das [...]

  2. [...] im Internet. Hinweisen möchte ich in diesem Zusammenhang auf die Möglichkeit eine Lightbox-Webgallery mit Photoshop zu [...]

DEIN KOMMENTAR BITTE

[muss sein]
[muss sein - wird aber nicht angezeigt]