Lightbox Bildgalerien
Mit Lightbox können Sie Bildgalerien erstellen, wie hier demonstriert.
CONTEX unterstützt Sie bei der Integration von Lightbox in Ihr Web.
Integration in Vorlagen
Wenn Sie ein neues CONTEX 3.3 Web erstellen, sind die benötigten Lightbox Dateien bereits in die Seitenvorlage integriert und Sie können diesen Punkt überspringen.
Wenn Sie Lightbox in ein bestehendes Web integrieren möchten erstellen Sie ein neues CONTEX Web und kopieren Sie die Dateien builder.js, effects.js lightbox.css, lightbox.js, lightbox-blank.gif, loghtbox-btn-close.gif, lightbox-btn-next.gif, lightbox-btn-prev.gif, lightbox-ico-loading.gif, prototype.js, scriptaculous.js von Templates\layout in das Templates\layout Verzeichnis ihres Webs.
Integrieren Sie die Javascript und CSS Dateien in Ihre Webvorlage:
- <script type="text/javascript"
src="layout/prototype.js"></script>
<script type= "text/javascript"src="layout/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="layout/lightbox.js"></script>- <!--script type="text/javascript" src="layout/builder.js"></script-->
<!--script type="text/javascript" src="layout/effects.js"></script-->- <link rel="stylesheet" href="layout/lightbox.css" type="text/css" media="screen" />
- <!--script type="text/javascript" src="layout/builder.js"></script-->
Integrieren Sie die Images in den <body> bereich Ihrer Vorlage:
- <!-- files for
lightbox
<img src="layout/lightbox-btn-close.gif">
<img src="layout/lightbox-btn-next.gif">
<img src="layout/lightbox-btn-prev.gif">
<img src="layout/lightbox-ico-loading.gif">
<img src="layout/lightbox-blank.gif">- -->
Erstellen eines lightbox Inhaltes
Als erstes sollten Sie die Bilder die Sie anzeigen möchten auf eine bestimmte Grösse skalieren (z.B. mit Photoshop). Am besten sieht es aus, wenn die Bilder kleiner sind, als Ihr Webauftritt. Wenn Sie z.B. ein Web mit 1024 Pixel Breite haben empfehlen wir Ihnen die Bilder auf eine Breite von 800 Pixel zu skalieren.
Nun erstellen Sie eine eigene Ressourcen Kategorie für die Gallerie. CONTEX wird automatisch alle Bilder in der Kategorie bei der Bildgalerie darstellen.
Hier wird eine Kategorie Namens "TestLightbox" erstellt:
Wählen Sie die neu erstellte Kategorie aus und fügen Sie die Bilder aus dem Windows Explorer via Drag&Drop hinzu.
Anschliessend wählen Sie jedes Bild aus und geben Sie unten bei "Beschreibung für Tooltip, Lightbox etc." einen kurzen Text der das Bild beschreibt ein. Dieser Text wird dann jeweils unterhalb des Bildes angezeigt. Wenn kein Text angegeben wird zeigt CONTEX in der Galerie den Dateinamen (ohne Sonderzeichen) an.
Öffnen Sie nun den Inhalt (zum bearbeiten) von wo aus die Bildgalerie gestartet werden soll. Lightbox wird immer von einem Link (<a>) aus gestartet, desshalb markieren Sie nun den Text (oder das Bild) von wo aus Lightbox gestartet werden soll und klicken Sie auf "Hyperlink erstellen/ändern".
Im Hyperlink Dialog wählen Sie "Link auf Ressource" und suchen Sie das Bild aus Ihrer Kategorie, das als erstes angezeigt werden soll (doppelklick).
Zurück im Hyperlink-Dialog wählen Sie die Checkbox "Lightbox Tag verwenden" und wählen Sie in der Auswahlbox die zuvor erstellte Ressourcen-Kategorie:
Speichern Sie nun den Inhalt und testen Sie die Seite.
Hinweis: Als Reihenfolge für die Bildgalerie verwende CONTEX immer die Reihenfolge in der die Bilder in der Resourcen Kategorie hinzugefügt wurden.
Hinweis 2: Wenn Sie weitere Bilder zur Galerie hinzufügen möchten, können Sie die neuen Bilder einfach zur Ressourcen-Kategorie hinzufügen.