eine Galerie mit Apple-Overlay erstellen

Heute habe ich auf flowplayer.org einen Tipp gefunden wie man Bilder vergrößert darstellen kann und dabei den Effekt nutzen kann, den man von Apple kennt.

Da ich diesen Effekt für Bilder nutzen will die ich aus einer MySQL-Datenbank lade, habe ich direkt mal ein kleines Tutorial dazu verfasst. In diesem Tutorial werden aus einer Datenbank die Namen von Bildern, sowie der Titel und eine Beschreibung dazu geladen. Es werden die Thumbnails der Bilder auf der Website angezeigt und beim anklicken der Thumbnails wird eine große Version des Bildes animiert in einem Overlay angezeigt.

Fangen wir an mit den benötigten Stylesheets. Ich habe ein Stylesheet default.css in dem sich alle globalen Styles befinden. Dieses werde ich hier nicht extra veröffentlichen.

Die Bilder die in den Stylesheets angegeben sind können Sie sich ganz einfach selber in Photoshop erstellen. Die Datei overlay_transparent.png ist z.B. ein Bild in der Größe 656×526 das ein schwarzes Rechteck mit abgerundeten Ecken, einem Farbverlauf und einem leichten Schatten zeigt.
Die Datei overlay_white.png hat die selben Ausmaße besteht jedoch aus einem weißen Rechteck ohne Verlauf mit einem größeren Schatten. overlay_close.png ist ein 36×36 px großes Image das einen runden Schließen-Button mit Außenschatten zeigt.

styles/image_overlay.css

 

styles/image_overlay_ie7.css

 

index.php

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast.

Kommentare geschlossen.