GalleryMaker
Lauffähig unter Microsoft Windows 98, Me, 2000, XP, Vista, 7.
Testversion kostenlos,
Vollversion 24,90 EUR.
Expertenwissen: Originelle Bildanzeige mit JavaScript
In diesem Artikel erfahren Sie, wie Sie Ihre Bildergalerie in drei einfachen Schritten mit originellen Anzeigeeffekten aufwerten.
Darum geht es:
Die Übersichtsseiten der mit GalleryMaker erstellten Bildergalerien bestehen meist aus verkleinerten Vorschaubildern. Klickt der Betrachter eines dieser Vorschaubilder an, wird er auf eine grössere Version des Bildes weitergeleitet.
Mit wenigen Anpassungen können Sie diese Weiterleitung durch eine originelle, animierte Bildanzeige ersetzen. Klicken Sie für ein Beispiel auf dieses Bild:
Wenn Sie eine Beispielgalerie aufrufen möchten, klicken Sie bitte hier.
Schritt 1: Installation benötigter Zusatzdateien
Der im vorhergehenden Beispiel gezeigte Anzeigeeffekt basiert auf "prettyPhoto", einem kostenlos verfügbaren JavaScript-Programm. Damit Sie den Effekt in Ihren eigenen Galerien verwenden können, müssen Sie zunächst die ZIP-Datei prettyphoto.zip herunterladen. Entpacken Sie die darin enthaltenen Dateien in ein Verzeichnis mit dem Namen "prettyphoto", und kopieren Sie dieses Verzeichnis anschliessend in Ihr Galerie-Ausgabeverzeichnis.
Schritt 2: Anpassung der GalleryMaker-Designvorlage
Damit Ihre Bildergalerie auf "prettyPhoto" zugreifen kann, muss die verwendete Designvorlage leicht bearbeitet werden. Wechseln Sie dazu in den GalleryMaker-Programmabschnitt "Vorlagenauswahl" und wählen Sie eine beliebige Designvorlage. Wenn Sie zunächst die oben verlinkte Beispielgalerie nachbauen möchten, wählen Sie bitte die Vorlage "Horizontale Reihen, blau". Klicken Sie anschliessend auf "Editieren", um den Quellcode der gewählten Designvorlage anzuzeigen.
Suchen Sie im Quelltext den "</head>"-Tag. Sollten Sie diesen nicht auf Anhieb finden, können Sie auch die "Suchen & Ersetzen"-Funktion des Designvorlagen-Editors nutzen. Fügen Sie vor dem "</head>"-Tag den folgenden HTML-Code ein:
<link rel="stylesheet" href="prettyphoto/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="prettyphoto/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Dieser HTML-Code verknüpft "prettyPhoto" mit Ihrer Bildergalerie.
Suchen Sie nun Zeile 8 der Designvorlage:
... und ersetzen Sie diese durch folgende Zeile:
Auf diese Weise ändern Sie den Titel der Designvorlage, wodurch spätere Verwechslungen mit der Originalversion der Designvorlage vermieden werden.
Klicken Sie nun auf "Speichern unter" und speichern Sie die Vorlage unter dem Dateinamen "Horizontale Reihen, blau (prettyPhoto).ged". Beenden Sie den Designvorlagen-Editor, und wählen Sie in der Vorlagenliste die neu hinzugekommene Vorlage "Horizontale Reihen, blau (prettyPhoto)".
Schritt 3: Programmeinstellungen in GalleryMaker
In GalleryMaker müssen nun lediglich zwei Einstellungen geändert werden. Wechseln Sie zunächst in den Programmabschnitt "Galerieeinstellungen" und deaktivieren Sie die Option "Originalbilder in eigene HTML-Seiten einbetten".
Wechseln Sie dann in den Programmabschnitt "Weitere Einstellungen". Wählen Sie in der rechten Fensterhälfte den Eintrag "Verlinktes Vorschaubild", und ersetzen Sie den vorgegebenen HTML-Code durch den folgenden:
Alle erforderlichen Anpassungen sind damit abgeschlossen. Sie können Ihre Bildergalerie nun erstellen und einige Vorschaubilder anklicken, um den Anzeigeeffekt zu testen.
Zusatzfunktionen
Es sind noch weitere Anpassungen möglich. Um etwa in der Titelzeile der Originalbild-Ansicht statt des Dateinamens den jeweiligen Bildtitel anzuzeigen, wechseln Sie wieder in den Programmabschnitt "Weitere Einstellungen". Wählen Sie diesmal den Eintrag "Vorschaubild" und ersetzen Sie den Platzhalter "%GALLERYMAKER_IMG_ALT%" durch "%GALLERYMAKER_IMG_TITLE%". So weisen Sie dem alt-Attribut des <img>-Tags den Bildtitel zu, welcher später von "prettyPhoto" ausgelesen und zur Beschriftung der Titelzeile verwendet wird.
Um auch eine Bildbeschreibung anzeigen zu lassen, wählen Sie den Eintrag "Verlinktes Vorschaubild" und ersetzen den HTML-Code diesmal durch:
Durch die Verwendung des "%GALLERYMAKER_IMG_DESC%"-Platzhalters werden die einzelnen Bildbeschreibungen den title-Attributen der <a>-Tags zugewiesen, aus denen "prettyPhoto" die anzuzeigenden Beschreibungstexte bezieht.
"prettyPhoto" verfügt ausserdem über eine spezielle "gallery"-Option, die das Durchblättern aller verfügbaren Originalbilder ermöglicht. Klicken Sie für ein Beispiel eines der folgenden Bilder an und bewegen Sie den Mauszeiger über das angezeigte Bild:
Sie aktivieren diese Option, indem Sie im Programmabschnitt "Weitere Einstellungen" unter "Verlinktes Vorschaubild" den folgenden HTML-Code eingeben:
Fragen oder Kommentare?
Haben Sie Fragen oder möchten Sie Ihre Meinung zu diesem Artikel mitteilen? Besuchen Sie das GalleryMaker-Forum und diskutieren Sie mit anderen Anwendern!
Technische und rechtliche Hinweise zu "prettyPhoto"
prettyPhoto wurde von Stéphane Caron entwickelt und darf für den privaten wie kommerziellen Einsatz kostenlos genutzt und darüber hinaus vervielfältigt und bearbeitet werden. Die hier als ZIP-Datei angebotene Version basiert auf prettyPhoto 2.1.1 und wurde auf die Verwendung mit GalleryMaker hin optimiert. Sie enthält zusätzlich die JavaScript-Library jQuery 1.2.6, auf der prettyPhoto aufbaut und die ebenfalls für den privaten wie kommerziellen Einsatz kostenlos genutzt werden darf.