Ein Monument im Internet: Zeidler & Wimmel


Die Website zeidler-wimmel.de ist unser zweites Projekt, bei dem wir von unserer bisherigen Vorgehensweise, die Templates mit TemplaVoilà in TYPO3 zum Leben zu erwecken, abweichen: auch hier arbeiten wir fluidbasiert und nutzen als Alternative die TYPO3-Extensions FED und FLUX.

Bei zeidler-wimmel.de liegt die Priorität klar auf optischen Merkmalen. So begrüßt den Nutzer eine aufgeräumte Startseite mit einer Slideshow aus ausgewählten Bildern des Unternehmens und seiner Referenzen.
Für die Slideshow haben wir, wie sollte es auch anders sein, auf jQuery gesetzt. Dabei kommt das jQuery-Supersized-Plugin zum Einsatz.

Das Supersized-Plugin verdient eine nähere Betrachtung. Damit ist es möglich, einem beliebigen Container auf der Website (oftmals sogar der gesamten Website) ein bzw. mehrere Hintergrundbild(er) zuzuweisen, die als Slideshow mit definierbaren Parametern (Übergangsart, -dauer, -qualität, ...) abgespielt werden.
Doch nicht auf der Slideshow liegt der Fokus, nein: hier geht es um das Skalieren der Website im Browser. Das Plugin platziert das Hintergrundbild initial so, dass es den gesamten Container ausfüllt. Ändert der Benutzer die Größe des Browserfensters nun, wird das Bild so positioniert und skaliert, dass immer möglichst viel vom Bild, gemessen am verfügbaren Platz, sichtbar ist. Das ist nicht nur eine nette Spielerei, sondern es ermöglicht auch ein sinnvolles Arbeiten mit Bildern in voller Größe.

Was wäre eine solche Seite ohne Lightbox? Da hier für die Präsentation der Natursteine eine besonders konfigurierbare Lightbox-Variante Voraussetzung war, haben wir hier statt der Standard-TYPO3-Extension "perfectlightbox" die rein JavaScript-basierte Lösung "prettyPhoto" gewählt.

Als kleiner Blickfang wurde ein kleines Popup gebastelt, welches beim Überfahren der Bilder mit der Maus erscheint und den Inhalt des "title"-Attributs des Bildlinks als kleine Art "Tooltip" ausgibt. 

Um die Referenzen des Unternehmens zu präsentieren, kommt die TYPO3-Extension "chgallery" zum Einsatz, die dem Redakteur das einfache Erstellen von Galerien auf Ordnerbasis erlaubt.
Im Frontend werden mehrere dieser Galerien nebeneinander ausgegeben. Damit das Browserfenster immer bestmöglich gefüllt ist, beginnen die Galerien ab einer bestimmten Fenstergröße, am Ende des Fensterrands umzubrechen, um sich dann in einer neuen Zeile fortzusetzen.

Ein weiterer Blickfang ist die Einbindung von Google Maps: "Warum nicht einmal als Popup-Dialog?" war der Gedanke. Gesagt, getan; jQueryUI liefert hier mit den Dialogklassen alle dafür erforderlichen Werkzeuge. Nach ein paar kleinen Anpassungen (bindet man die Google Map standardmäßig in ein Dialogpopup ein, kommt es zu Verzerrungen und die Karte wird ggf. nicht richtig dargestellt) war die Anfahrtsskizze fertig.

Kategorien

  TYPO3

Hat dir der Artikel gefallen?

Werkraum News: