abalogo

Bildergalerien: Beispiele 

Möchten Sie Ihren Kunden Bilder von Ihren Dienstleistungen, Ihren Werken oder Produkten, Ihrer Unternehmensgeschichte, Ihrem Team oder sonstigen Aspekten Ihres Unternehmens zeigen? Dann richte ich Ihnen eine attraktive Bildergalerie ein, die Ihre Kunden beeindrucken wird. Auf dieser Seite finden Sie Erläuterungen und Links zu vier verschiedenen Methoden, Bilder zu zeigen, wobei hier nur beispielhaft mögliche Funktionen demonstriert werden sollen – die individuelle Ausgestaltung wird natürlich dem speziellen Design Ihrer Website angepasst und kann daher völlig anders aussehen. So habe ich mich in den nachfolgenden Beispielen bei drei der Galerien für einen dunklen Hintergrund entschieden, wobei Sie natürlich ebenso gut einen hellen Hintergrund für Ihr Bildmaterial wählen können.

Hinweis für iPhone- und Smartphone-Benutzer:

Die nachfolgenden Demo-Galerien sind aufgrund von Bildformat und Ladezeiten für Ihre mobilen Geräte ungeeignet.

Selbstverständlich biete ich Ihnen für Ihre eigene Website bei Bedarf auch die Optimierung von Galerien für mobile Geräte an.

Galerie 1:  Erläuterungen und Demo

Zur Galerie 1

Eine elegante Galerie, bei der Ihre Website-Besucher gleichzeitig die Vorschaubilder und das jeweils ausgewählte Bild in Originalgröße vor Augen haben. Die Bildsteuerung kann sowohl über die Tastatur als auch per Maus erfolgen (Klick auf ein Vorschaubild oder Klick auf die Textbefehle „zurück“, „weiter“, „automatische Schau starten“ oder durch Klick ins Großbild). Die Nutzung der attraktiven Galeriefunktionen setzt voraus, dass JavaScript aktiviert ist – doch selbst bei deaktiviertem JavaScript können die Vorschaubilder als Links zu den größeren Versionen der jeweiligen Bilder genutzt werden. Die Vorschaubilder können übrigens – je nach Wunsch – auch rechts oder links des großen Bildes positioniert werden.

Galerie 2:  Erläuterungen und Demo

Zur Galerie 2

Eine weitere attraktive Galerie, bei der zunächst nur Vorschaubilder zu sehen sind, deren Größe nach Belieben festgelegt werden kann. Klickt ein Website-Besucher auf ein solches Vorschaubild, wird das Bild in Originalgröße vor einem dunklen Hintergrund präsentiert und damit wirksam in Szene gesetzt. Auch bei dieser Galerie kann die Bedienung sowohl über die Tastatur als auch per Maus erfolgen, und auch hier kann der Besucher auf Wunsch die automatische Präsentation wählen, um sich ganz auf die Bilderschau zu konzentrieren. Per Maus erfolgt die Bedienung durch Klick auf die üblichen Schaltflächen-Symbole, und per Tastatur lassen sich die Bilder über die Cursor-Tasten steuern (weiter: Pfeil rechts, zurück: Pfeil links, automatische Wiedergabe starten bzw. beenden: Leertaste, Schließen: Taste X oder Taste Esc).

Galerie 3:  Erläuterungen und Demo

Zur Galerie 3

Galerie 3 bietet die interessante Möglichkeit, Bild- und/oder Textmaterial wie bei einer Diaschau durch horizontale Bildwechsel vorzuführen. Wie die beiden vorangehenden Galerien lässt sich auch diese per Maus oder per Tastatur bedienen. Der Bildwechsel kann entweder automatisch oder manuell erfolgen, wobei eine dieser beiden Betriebsarten voreingestellt ist und die Website-Besucher die Möglichkeit haben, nach Bedarf manuell zwischen beiden umzuschalten: Dabei wechselt die Anzeige der Schaltfläche rechts über dem Bild von „Automatisch“ auf „Stop“ bzw. umgekehrt.

Galerie 4:  Erläuterungen und Demo

Zur Galerie 4

Eine Galerie, bei der mehrere Bilder übereinander liegen und bei der die Bildwechsel jeweils durch das sanfte Ausblenden des aktuellen Bildes erfolgen. Das sorgt für einen unaufdringlichen Übergang zwischen den einzelnen Bildern. In den Beispielen werden mehrere mögliche Varianten aufgezeigt: Sanfte Bildübergänge im fortlaufenden automatischen Wechsel oder mit voreingestellter manueller Wechselmöglichkeit, gleichzeitig wechselnde Bilduntertitel, Erscheinen oder Nicht-Erscheinen halbtransparenter Navigationspfeile beim Überfahren des Bildes mit der Maus etc. Nähere Erläuterungen finden Sie auf der Demoseite zu Galerie 4.

Seitenanfang

Demos im Überblick 

• Demos: Einleitung
• Bilder zeigen: Beispiele
• Videos zeigen: Beispiele
• Wörterbücher: externe einbinden
• Glossare: eigene oder externe
• Layout: Stabilität und Flexibilität
• Skip-Links und Tab-Navigation
• Validator-Prüfung

Flexible Preisgestaltung

Kontakt aufnehmen