Neulich fragte uns wieder jemand, wie wir dieses kecke Startseiten-Feature für die Website der Nicolaas Teeuwisse OHG umgesetzt haben.
Hintergrund der Startseite ist ein großformatiges Bild, das meist aus der laufenden Verkaufssaison des Berliner Kunsthändlers stammt. Dort hat man sich auf den Verkauf von kunsthistorisch wertvollen Drucken und Zeichnungen aus dem 16. bis 20. Jahrhundert spezialisiert.
Aber zurück zur Startseite: Im Rahmen, den Kopfleiste plus Navigation und Fußleiste bilden, ist nur ein Ausschnitt des genannten Bildes zu sehen. In einem roten Textkasten stehen Künstlername und Werkstitel. Die Ränder des Bildes außerhalb des Rahmens sind abgedunkelt.
Der Clou: Der Nutzer kann das Bild verschieben und so den sichtbaren Ausschnitt verändern. Mit jeder Bewegung des Bildes entsteht ein neuer Gesamteindruck. Durch dieses “Werkzeug” kann der Kunstinteressierte (Sammler, Museen und Kunstexperten) sich das Bild im Detail anschauen. (Nach der Abbildung geht’s weiter…)
Technische Lösung
Damit sofort etwas im Browser zu sehen ist, wird erst der kleinere Ausschnitt des Bildes im “Mittelrahmen” geladen.
Per Javascript wird danach das komplette Bild geladen, der bereits sichtbare Bildausschnitt berechnet und das gesamte Bild passend über den kleineren Ausschnitt gelegt.
Abhängig von der Bildschirmauflösung des Rechners wird der sichtbare Teil des Bildes samt Mittelrahmen auf die maximal mögliche Fensterhöhe erweitert.
Mit Hilfe von Javascript kann der Nutzer das Bild dann bewegen und den sichtbaren Ausschnitt frei wählen. Voilà.
Die Website unter www.teeuwisse.de hatte einige Anforderungen zu erfüllen; nach der Umsetzung berichteten wir bereits über die Besonderheiten dieses Typo3-Projektes.
Geschrieben am Dienstag, 27. Juli 2010, von Nik, abgelegt unter Allgemein
Tags: CMS, Content Management System, coole Kunden, Feature, Javascript, Kunst, Kunstwerke, Nicolaas Teeuwisse, Nicolaas Teeuwisse OHG, Prints, Referenzen, Refrenzkunde, Startseite, Teeuwisse, Typo3