Sven Lennartz 19. April 2007

Scripts für Fotogalerien, Diashows und Bildpräsentationen

Kein Beitragsbild

Fotos lassen sich auf vielfältige Weise präsentieren. Auf einer großen Fläche, im Raster, in Diashows oder mit Vorschaubildern. Eine geschickte Präsentation wertet die Fotos auf und hilft dem Betrachter sich zurechtzufinden. Das gilt umso mehr, je mehr Abbildungen vorhanden sind. Es versteht sich von selbst, dass mehr als nur eine Lösung zur Verfügung steht. Ganz nach Geschmack und handwerklichen Fähigkeiten. Spezielle technische Voraussetzungen muss man kaum erbringen. AJAX und Javascript dominieren. Schauen wir uns doch einmal um…

AJAX Fotogalerien und Lightboxen

  • Minishowcase
    Schlanke AJAX Bildergalerie. Minishowcase kommt trotz Umfang ohne Datenbank aus.

    Screenshot

  • Pyxy-Gallery
    Eine AJAX Bildergalerie mit Lightbox in PHP und JavaScript.

    Screenshot

  • ZenPhoto
    Eine Flickr-ähnliche, kostenlose AJAX/PHP Fotogalerie.

    Screenshot

  • Couloir Resizing, Fading Slideshow Demo
    AJAX Foto Slideshow.
  • Grey Box
    Einzelbilder und Content aller Art in einem freundlichen PopUp.
  • JonDesigns SmoothGallery
    Galerien mit viel Effekt und dennoch ein leichtgewicht. Auf Basis der Mootools. Für Galerien und Präsentationen.

    Screenshot

  • Lightbox2
    Dieser Klassiker basiert auf dem Prototype Framework und der Scriptaculous Effekt Bibliothek.
  • Litebox
    Eine modifizierte, verschlankte Version der Lightbox 2.

    Screenshot

  • Multifaceted Lightbox
    Und noch eine Javascript-Lighbox.

    Screenshot

  • Slightly ThickerBox 1.7
    Eine Version von Cody Lindley’s Thickbox Sscript. Das Script generiert Links zu „Previous Image“ und „Next Image“. Und ermöglicht es Galerien zu gruppieren.

    Screenshot

  • AJAX Photo Gallery
    Erzeugt Online Bildergalerien für Inhalte aus ikGoogles Picasa.

    Screenshot

  • Slimbox
    Ein besonders schlanker Lightbox 2.0 Klon auf Basis der Mootools.

    Screenshot

  • Suckerfish HoverLightbox
    Moderne Bildgalerien mit Blick auf Usability and Accessibility.

    Screenshot

  • Suckerfish HoverLightbox Redux
    Eine verbesserte Version der HoverLightbox.
  • ThickBox 2.1.1
    AJAX-Script auf Basis einer jQuery Bibliothek.

    Screenshot

  • TripTracker
    Ein JavaScript Bildbetrachter mit Slideshow. Eine kostenpflichtige Lösung die ab 25 Dollar zu haben ist.

    Screenshot

CSS Fotogalerien

  • A Photograph Gallery
    CSS Fotogalerie von Stu Nicholls. Bei MouseOver werden die Bilder in voller Größe angezeigt. Downloads gibt es bei Stu nicht, man muss sich an den Quellcode der Demoseiten halten.

    Screenshot

  • A simple CSS Photoalbum
    Ein einfaches CSS Photoalbum. Wiederum von Stu Nicholls.

    Screenshot

  • Dynamic Drive CSS Library – CSS Image Gallery
    CSS Bildergalerie mit Thumbnail-Vorschau. Bei MouseOver werden die Thumbnails vergrößert angezeigt

    Screenshot

  • Cross Browser Multi-Page Photograph Gallery
    Eine Cross Browser Fotogalerie, basierend auf der Suckerfish HoverLightbox. Anders als diese kommt die Fotogalerie ohne JavaScript aus, sie wurde mit reinem CSS realisiert.

    Screenshot

  • CSS: Photo Showcase
    CSS Fotogalerie mit Thumbnails

    Screenshot

  • Hoverbox Image Gallery
    Die Hoverbox ist eine Bildergalerie, die ausschließlich mit CSS und XHTML erstellt wurde.

    Screenshot

  • Photo Scroll Gallery
    CSS Fotogalerie. Die Thumbnailvorschau lässt sich scrollen. Bei on hover wird das Bild in mittlerer Größe gezeigt, bei on click in voller Größe.

    Screenshot

  • Sliding Photograph Galleries
    Vertical und horizontal „Sliding“ Fotogalerien. Bei on hover wird die volle Größe der Bilder angezeigt.

    Screenshot

JS, CSS & DHTML Fotogalerien

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

42 Kommentare

  1. ich hätte gerne für meine webseite eine gallerie die so aufgebaut ist wie bei mobile also wen ich in die nähren details eingehe ist erst nur ein kleines bild da wen ich es dann anklicke werden mir alle bilder gezeig und ein großes wie geht das ?

  2. Hier ist noch eine sehr schöne Galerie mit Bild zoom funktion: http://www.ajax-zoom.com
    Das einzige manko ist man benötigt PHP und für viele Fotos ist die Galerie kostenpflichtig. Sieht aber echt interessant aus und ist mal was anderes.

  3. Hallo Leute,

    nix für ungut, aber mir hilft das hier leider nicht weiter.
    Deswegen frag ich mal so, ob mir einer helfen kann.

    Ich suche ein Programm um eine ganz schlichte Galerie für ne
    Homepage zu erstellen. Ohne Schnick schnack, ohne Thumbnails,
    weißer Hintergrund.
    Will da nur ne Bildbeschreibung drunter haben und irgendwo die Pfeile
    zum weiterklicken zum nächsten Bild. Mehr nicht.
    Mit den angebotenen Links hier finde ich nicht das richtige, bzw. ich
    habe keine Ahnung wie es funktioniert :-(
    Hab mir z.B. dieses „Imago“ oder „Simpleviewer“ runter geladen. Aber
    da gibts keine .exe Datei oder sowas. Wat muss ich denn da bitte machen?
    Also so umkomplizert wie alle behaupten finde ich das nicht. :-(

    Danke schon mal für eure Hilfe
    Alex

  4. Hallo Leute,

    grandiose Linksammlung

    beste Grüße
    Martin

  5. Interessante und Informative Webseite und man kann einiges verwenden.

  6. Eine schöne Zusammenstellung an Galerien, besonders CSS Fotogalerie mit Thumbnails gefällt. Vielen Dank.

  7. Hallo!

    Ich habe mal alle Links durchgearbeitet und finde Highslide JS ganz toll. Werde das wohl anwenden. Auch den Tipp von Steffen zu http://www.pixlie.de habe ich schon ausprobiert, sehr praktisch. Nun, viele Leute schauen sich wohl diese Seite nicht an, aber macht nichts, mit hat sie geholfen. Werde noch zu http://www.drweb.de/magazin/moderne-bildprasentation-im-web-20/
    surfen.

    Danke!

  8. Na endlich mal eine Seite im www, welche die Menschheit auch brauch!!! Geniale Zusammenstellung – hat mir wirklich geholfen –
    Deshalb DANKE

  9. Zwar sehr spät, aber heute doch noch gefunden. Super.

  10. Schöne Liste, schade das es die nicht schon früher gab. War auf der Suche nach ner einfachen und eleganten, SimpleViewer war da Top, bis auf dass es Flash war. Also hab ich selber losgelegt und das Ergebnis heisst Imago :-)

  11. das „klaue“ ich sozusagen bei mir selbst. habe ich mir aber erlaubt ;-) kein grund zur besorgnis also.

  12. Hallo Dr. Web,

    DAS nenne ich mal eine informative und spannende Zusammenstellung. Danke dafür ! Dann werde ich neben den fotoutisten auch mal versuchen meine bilder selbst so zu präsentieren. Ich bin gespannt auf die Funktionalität.

  13. Eine schöne Lösung finde ich Satellite. Nutz die Daten eines Flickr Account und erstellt so die ganze Gallery.

  14. Schönes Panorama, aber ehrlichgesagt fänd ich eine übersichtliche Liste von Vor- und Nachteilen der Bildergalerien sinnvoll. Hold on.

  15. An dieser Stelle möchte ich doch mal kurz auf meine Seite hinweisen:

    Gratisscript.de

    Da sammel ich zur Zeit entsprechende Scripts, die mindestens für die private Nutzung kostenlos sind, inklusive Vorschau und entsprechenden Hinweisen zu Einbau bzw Konfiguration, so dass man bereits im Vorfeld beurteilen kann, ob die Galerie das Richtige ist.

    Allerdings sind es noch nicht allzu viele Einträge, da sich die Seite noch im Aufbau befindet. Aber es wird immer mehr :)

  16. Hochachtung, sooo super.

    Ein für uns armen Webmasta’s ständiges brennendes Thema
    hervorragend herausgearbeitet.

    Weiter so Dottore di Web….

  17. OMG, diese Seite ist zuuu geil :D

    danke fuer die hammerlinks, leute ich liebe euch :p

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück