Pixelart-W ebdesign.de

Transkript

1 Pixelart-W ebdesign.de R a i n e r W i s c h o l e k Rainer Wischolek, Föckerskamp 3a, Dorsten Telefon: Mail: info@i-wa.de Anleitung: Bildvergrößerungen mit Lightbox-Effekt SCHRITT 1: DOWNLOAD UND INSTALLATION DER ENTSPRECHENDEN MODULE / PROGRAMME Bitte laden Sie zunächst die folgenden Module aus dem Downloadbereich ( colorbox.zip lib_jquery.zip libraryadmin_v1.14.zip wblib_v0.81.zip Installieren Sie die Module (außer COLORBOX) in üblicher Art und Weise im Backend Ihrer CMS-Homepage. Wichtig: Das Modul wblib_v0.81.zip sollte zuerst installiert werden. Das Modul colorbox wird später gemäß gesonderter Anleitung installiert (siehe SCHRITT 2). Wechseln Sie nun in den Bereich Admin-Tools. Dort finden Sie nach der o.g. Modul- Installation den zusätzlichen Bereich LibraryAdmin. Klicken Sie nun auf LibraryAdmin und es erscheint folgender neuer Bereich mit verschiedenen Einstellungsmöglichkeiten. Weiter auf Seite 2 1

2 SCHRITT 2: INSTALLATION COLORBOX Nach Klick auf LibraryAdmin öffnet folgender Bereich (siehe Abbildung). 1. Klicken Sie zunächst auf jquery (Pfeil 1), um den Upload des Moduls Colorbox vorzubereiten. 2. Klicken Sie dann rechts auf Plugin installieren (Pfeil 2). 3. Anschließend (Pfeil 3) wählen Sie den Ort auf Ihrem PC mit dem Modul colorbox welches Sie gemäß SCHRITT 1 heruntergeladen haben Nach dem erfolgreichen Upload erscheint einen Erfolgsmeldung. Das Modul colorbox sollte nun unten im Bereich Plugins als weiteres Modul erscheinen. Weiter auf Seite 3 2

3 SCHRITT 3: DEFINITION DER SEITEN, AUF DENEN DIE BILDVERGRÖßERUNG VERWENDET WERDEN SOLL. Der nächste Schritt ist die Zuweisung (Neues Preset) der Seite, auf der die Vergrößerungsfunktion erfolgen soll. Es können hier natürlich auch später nach und nach weitere Seiten hinzugefügt werden. 1. Mit Klick auf den Button Neues Preset (Pfeil 1) öffnen Sie die Auflistung aller Seiten Ihrer CMS- Homepage. Wählen Sie nun die Seite, auf der die Vergrößerungsfunktion erfolgen soll. Im Beispiel wurde die Seite Home gewählt. 2. Die Option colorbox aktivieren Sie im Bereich Plugins (Pfeil 2). 3. Im Bereich Presets werden nun alle gewählten Seiten mit einem roten Kreuz gekennzeichnet (Pfeil 3). 4. Speichern nicht vergessen (Pfeil 4). Weiter auf Seite 4 3

4 Nach dem Speichern erscheint eine Bestätigung (Preset gespeichert ). 1. Den Eintrag im grünen Feld [[LibLoader]] kopieren (Pfeil 2), denn dieser wird noch benötigt SCHRITT 4: Aufruf des Loaders 1. Klicken Sie nun wieder im Backend auf Optionen (Pfeil 1). 2. Im Feld Fußzeile (Pfeil 2) fügen Sie den vorher kopierten Preset-Eintrag [[LibLoader]] ein oder tragen den Code per Hand ein. Der Code bleibt im Frontend unsichtbar, d.h. alle Fußzeilen-Texte bleiben wie gewohnt erhalten. 3. Anschließend speichern Die Grundeinstellungen sind somit abgeschlossen. Alle o.g. Vorarbeiten müssen nur einmalig gemacht werden. Weiter auf Seite 5 4

5 SCHRITT 5: EINSTELLEN DER BILDER (Vergrößerung mit Lightbox-Effekt) Die grundlegenden Einstellungen sind nun abgeschlossen und Sie können die zu vergrößernden Bilder entsprechend folgender Anleitung präparieren. Vorbereitung der Bilder: Im Idealfall haben Sie jeweils 2 gleiche Bilder in verschiedenen Größen parat, d.h. ein kleines Bild, welches auf der Seite abgebildet werden soll, und ein größeres gleiches Bild, welches vergrößert mit Lightbox-Effekt nach Klick auf das Bild erscheinen soll. Beide Bild-Varianten müssen vorab in die Medien-Datenbank im Backend (Medien) hochgeladen werden. Alternativ können Sie auch nur ein großes Bild hochladen, dieses dann in die gewünschte Seite einfügen und auf die passende Größe verkleinern. Im Beispiel wird diese Alternative beschrieben. 1. Klicken Sie im Backend auf den Bereich Seiten (Pfeil 1) zwecks Auswahl der Seite, auf der Sie die Bildvergrößerung mittels colorbox anwenden wollen. 2. Fügen Sie das gewünschte Bild nun in üblicher Art und Weise ein und verkleinern Sie es. 3. Drücken Sie dann auf dem Bild die rechte Maustaste. 4. Klicken Sie im erscheinenden Unterfenster auf Bild-Eigenschaften (Pfeil 2) und es erscheint folgendes Einstellungsfenster: 1. Falls Sie nur 1 Foto verwenden, können Sie den automatisch angezeigten Bilder-Pfad für die spätere Verwendung kopieren (Pfeil1). Möchten Sie 2 verschiedene Größen (klein/groß) des Bildes verwenden, dann brauchen Sie den Pfad nicht kopieren, sondern tragen später den aktuellen Pfad zum großen Bild ein (Server durchsuchen). 2. Klicken Sie dann auf den Reiter Link (Pfeil 2) Weiter auf Seite 6 5

6 3. Im Bereich Link ist der Pfad zum Bild i.d.r. bereits vorgegeben. Falls nicht, können Sie hier den kopierten Pfad nun eingeben (Pfeil 1). 4. Möchten Sie eine vergrößerte Version des Bildes verwenden, so klicken Sie auf Server durchsuchen (Pfeil 2), klicken Sie auf das Bild und der aktuelle Pfad wird automatisch in das Eingabefeld übertragen 5. Im Bereich Relationstyp (Pfeil 3) wählen Sie die Option colorbox. 6. Im Feld Stylesheet Klasse (Pfeil 4) tragen Sie die Bezeichnung colorbox von Hand ein 7. Anschließend das Speichern (Pfeil 5) nicht vergessen. Damit sind alle Vorarbeiten erledigt. Die Installation der Module muss natürlich nur einmalig vorgenommen werden und stehen für alle Seiten zur Verfügung.!!! Nach Abschluss der Arbeiten das Speichern der zuletzt bearbeiteten Seite nicht vergessen!!! Das Ergebnis: Klicken Sie im Frontend auf das kleine Bild im Contentbereich. Wenn Sie alles richtig gemacht haben, so sollte sich der Bildschirm verdunkeln und das große Bild erscheinen. Von nun an können Sie auf allen Seiten mit einzelnen Bilder den Lightbox-Effekt nutzen. Viel Spaß. 6