Bildergalerie


Das Symbol für das Bildergalerie-Element in der Objektpalette

Das WebYep Bildergalerie-Element fasst mehrere Bilder (wie z.B. Fotos) zu einer Galerie zusammen und zeigt diese in tabellarische Form als Vorschaubilder an. Ein Klick auf ein Vorschaubild öffnet dass das Originalbild - entweder in einem neuen Fenster, oder im selben Fenster mit dem Ligbtbox-Effekt, siehe weiter unten.

Die Bilder können mit einem Bildtext versehen werden und ihre Reihenfolge kann verändert werden. Es können auch mehrere Bildergalerie-Elemente auf einer Seite platziert bzw. mit dem Schleifen-Element kombiniert werden.

Dieses WebYep Element wird durch folgenden PHP Code repräsentiert:

<?php webyep_gallery("Galeriename", false, 60, 70, 3, 600, 700, 100); // WebYepV1 ?> Details...

Parameter der PHP Funktion webyep_gallery():
(siehe auch "Eigenschaften des Bild-Elementes" weiter unten)
  1. "Galeriename": Ein Text – der Name für dieses Element.
  2. true/false: Ein boolscher Wert – der Gültigkeitsbereich dieses Elementes.
    true wenn das Element in allen Seiten den selben Inhalt haben soll (global).
    false wenn es auf jeder Seite, auf der es platziert ist, andere Inhalte haben soll.
  3. 60: Eine Zahl – die maximale Breite des Vorschaubildes.
  4. 70: Eine Zahl – die maximale Höhe des Vorschaubildes.
  5. 3: Eine Zahl – die Anzahl der Spalten für die tabellarische Anzeige der Vorschaubilder.
  6. 600: Eine Zahl – die maximale Breite des Bildes, oder 0 (Null), wenn das Bild nicht verändert werden soll.
  7. 700: Eine Zahl –die maximale Höhe des Bildes, oder 0 (Null), wenn das Bild nicht verändert werden soll.
  8. 100: Eine Zahl – die Breite (in Pixel) der Spalten für die tabellarische Anzeige der Vorschaubilder.

Bitte beachten Sie auch die Details unter "Eigenschaften des Bildergalerie-Elementes" weiter unten bzgl. Größenangaben und Vorschaubild-Erstellung!

Die Bilddateien können von den BenutzerInnen direkt im Webbrowser zum Webserver gesendet werden. Im Galeriebild-Ändern-Fenster wird im Webbrowser einfach eine GIF- oder JPEG-Datei ausgewählt und durch Klick auf "Speichern" wird die Datei zum Webserver gesendet und von WebYep gespeichert.


Das Bildergalerie-Element in Aktion.
Durch Klicken auf die +/- Knöpfe können Bilder hinzugefügt und gelöscht werden.
Durch Klicken auf die links/rechts Knöpfe kann die Reihenfolge der Bilder verändert werden.
Durch Klicken auf den "Bearbeiten"-Knopf öffnet sich das Galeriebild-Ändern-Fenster.


Das Galeriebild-Ändern-Fenster

Anhängig davon, welcher Web-Browser verwendet wird, können auch mehrere Bilder gleichzeitig hochgeladen werden, in dem im Dateiauswahl-Dialog die Cmd-Taste (unter Mac OS) bzw. die Ctrl-Taste (unter Windows) beim Auswählen der Dateien gedrückt wird. Firefox 3 und Safari 5 unterstützen diese Funktion, Internet Explorer 8 nicht.

Die Eingegebene Beschreibung wird für alle hochgeladenen Bilder verwendet, kann aber natürlich im Nachhinhein verändert werden.


Seitenanfang

Einen Lightbox-Effekt hinzufügen

Das WebYep Bildergalerie-Element unterstützt das Öffnen der Originalbilder mittels eines Lightbox-Effekts. Details dazu finden Sie in der Referenz zum Bild-Element.

Gestalten der Galerie

WebYep vergibt beim generieren des HTML-Codes für die Galerie diverse CSS-Klassen. Indem Sie in Ihrem Stylesheet oder direkt in Ihrer Seite CSS-Stile für diese Klassen definieren, können Sie das Aussehen der Galerie detailliert beeinflussen.

Liste der CSS-Klassen:

CSS Klassenname wird zugewiesen
WebYepGalleryContainer

dem <table>-Tag, der die gesamte Galerie beinhaltet.

Sie können die Zeilen und Zellen dieser Tabelle über folgende CSS-Selektoren gestalten:
.WebYepGalleryContainer tr
.WebYepGalleryContainer td

WebYepGalleryFirstRow

dem <tr>-Tag der ersten Zeile der Galerie.

WebYepGalleryFirstColumn

dem <td>-Tag der jeweils ersten Zelle einer Zeile.

WebYepGalleryImage dem <div>-Tag, der das Vorschaubild umschließt.

Sie können das eigentliche Bild über folgenden CSS-Selektor gestalten:
.WebYepGalleryImage img

WebYepGalleryText dem <div>-Tag, der den Bildtext umschließt.

Eigenschaften des Bildergalerie-Elementes


Das Eigenschaftsfenster für das Bildergalerie-Element

Galeriename

Ein Name für das Bildergalerie-Element. Der Galeriename wird in der Webseite im "Bearbeiten"-Modus angezeigt, damit die BenutzerInnen bei der Eingabe die verschiedenen Bildergalerie-Elemente unterscheiden können.

Inhalte

Ist hier "für diese Seite" eingestellt, so ist dieses Bildergalerie-Element von den Bildergalerie-Elementen anderer Seiten unabhängig, auch wenn diese den gleichen Galerienamen aufweisen. Wenn Sie möchten, dass die Bildergalerie-Elemente mit diesem Galerienamen auf allen Seiten den gleichen Inhalt aufweisen, ist dieses Popup-Menü auf "für alle Seiten" zu setzen.

Maximale Vorschaubreite/-höhe

Die Vorschaubilder (Thumbnails) für die Bilder der Galerie werden so von WebYep erstellt, dass sie die hier vorgegebene maximale Höhe bzw. Breite nicht überschreiten. Die Bilder werden dabei ihren Proportionen entsprechend verkleinert.

Maximale Bildbreite/-höhe

Wenn diese angegeben werden, so werden die hochgeladenen Bilder ggf. verkleinert, um die maximale Breite bzw. Höhe nicht zu überschreiten. Die Bilder werden dabei ihren Proportionen entsprechend verkleinert.

Werden diese Attribute nicht angegeben, dann werden die hochgeladenen Bilder nicht verändert.

Hinweis: Die Größenänderung (Verkleinerung) des Bildes kann nur durchgeführt werden, wenn am Webserver die PHP-Erweiterung "GD" installiert ist. Wenn nicht, so wird im Galeriebild-Ändern-Fenster ein Warnhinweis angezeigt und das Bild wird nur in den entsprechenden Dimensionen angezeigt aber nicht tatsächlich umgerechnet (die Datenmenge bleibt also unverändert).

Anzahl Zellen

Gibt an, wie viele Tabellenzellen bei der tabellarischen Auflistung der Vorschaubilder nebeneinander angezeigt werden sollen.

Zellenbreite

Gibt an, wie breit (in Pixeln) diese Zellen sein sollen. Die Zellenbreite sollte jedenfalls größer als die maximale Breite der Vorschaubilder gewählt werden - meist aber deutlich breiter, damit die Zellen auch den Bildtext aufnehmen können.


Seitenanfang
© 2009, Objective Development