Damit man besser erkennt, ob ein Vorschaubild in einem Artikel ein Bild in einem Overlay (Fancybox) öffnet oder zu einer Galerie-Seite verweist, unterscheiden sich diese nun optisch. Bei Links zu weiteren Bildern (Galerie) ist ein sich bewegender Bilderstapel angedeutet. Die verlinkten Bilder die nur eine größere Version öffnen skalieren und drehen sich etwas. Die unterschiedlichen Thumbnails seht ihr zum Beispiel in den letzten beiden Artikeln. Ich finde, das sieht ganz hübsch aus.
Das ganze ist mit CSS3 realisiert worden. Als Vorlage dienten die Cascading Style Sheets von Tom Kenny. Leider funktioniert die Bewegung/Animation nicht im IE9 & Opera.
Benutzerfreundlichkeit
Donnerstag, 27. Juni 2013Maikos Geburtstagsbrunch
Samstag, 22. Juni 2013
Letztes Wochenende lud unsere Freundin Maiko zum Brunch ins Les Halles ein. Es waren auch Susi und Georg mit ihren drei Kindern da und ich habe in paar Fotos gemacht.
Umstieg von Lightbox auf Fancybox
Freitag, 21. Juni 2013
Das Javascript Lightbox2 zur Anzeige der Bilder hat mir bisher gute Dienste geleistet und hat zuverlässig funktioniert. Ich suchte aber schon seit langem ein besseres. U.a. damit ich größere Bilder hoch laden kann, die auf Monitoren mit hoher Auflösung entsprechend groß und auf solchen mit niedrigerer entsprechend verkleinert dargestellt werden. Durch Zufall stieß ich nun auf Fancybox als Alternative, das außerdem nicht mehr mit Scriptaculous sondern jQuery arbeitet. Und diese passt die Bilder bei der Anzeige an die Fenstergröße an. Yeah! Bei dem Bild hier könnt ihr es sehen. Es ist 1996 × 3000 Pixel groß und passt damit wohl auf die wenigste Bildschirme komplett drauf.
Nach ein paar kleinen Anpassungen1 läuft also nun dieses Script auf meiner Homepage und die Bilder werden in Zukunft besser aufgelöst abgespeichert.
- Ich habe es so angepasst, dass man bei mehrseitigen NextGen Galerien beim letzten Bild jeder Seite, beim Weiterklicken automatisch auf die nächste Seite kommtj und das dortige erste Bild groß in der Fancybox angezeigt bekommt. Natürlich funktioniert das auch beim Rückwärtsblättern.
