Internet-Dienstleistungen
Marion Krimm
Am Landgraben 36
46147 Oberhausen
Tel.: 0208.621035
Fax: 0208.621032
www.pyronet.de
[email protected]
Ihr Zeichen:
Ihre Nachricht vom:
E INE F OTOGALERIE MIT JSN
I MAGE S HOW ERSTELLEN
Anleitung für Administratoren
In dieser Anleitung zeigen wir Ihnen wie Sie mit JSN ImageShow eine tolle Bildergalerie
erstellen, die sich mit geringem Aufwand im Design und der Gestaltung ändern lässt.
PYRONET
24. März 2015
Mein Zeichen:
24. März 2015
Eine Fotogalerie mit JSN ImageShow erstellen
Anleitung für Administratoren
1 Inhalt
1.
Der Start im Kontrollzentrum von Joomla ................................................................................................................ 2
2
Schauliste.................................................................................................................................................................. 2
3
Schaukasten.............................................................................................................................................................. 5
3.1
Frontpage Slideshow....................................................................................................................................... 6
3.1.1
Via Menüeintrag ......................................................................................................................................... 6
3.1.2
Via Modulposition .................................................................................................................................... 10
3.1.3
Innerhalb eines Artikels ............................................................................................................................ 12
1
24. März 2015
1. DER START IM KONTROLLZENTRUM VON JOOMLA
Nach dem Einloggen ins Backend befindet sich auf der linken
Seite im Kontrollzentrum das Tableau von JSN ImageShow, in
dem bei ❶ geklickt wird.
Abbildung 1
Bei ❶ steht ein Video auf
YouTube zur Verfügung,
allerdings nur für die
Joomla Version 2.5. Trotzdem kann es hilfreich sein.
Abbildung 2
Die Option bei ❷ darf nicht benutzt werden, da sonst alle vorhandenen Bildgalerien überschrieben werden!
2
SCHAULISTE
In der <Schauliste> werden die Bildordner und Bilder ausgesucht, die in der Slideshow gezeigt werden sollen.
Diese <Schaulisten> bleiben erhalten und können mit verschiedenen <Schaukästen> verbunden werden. In den <SchauAbbildung 3
kästen> wird die Art der Präsentation bestimmt, noch dazu gleich
mehr. Da momentan noch keine <Schauliste> existiert, muss zunächst eine angelegt werden. Dazu wird auf das kleine
grüne Kreuz ❶ geklickt.
2
24. März 2015
Bei ❶ wird ein Titel vergeben und bei ❷ kann
eine Beschreibung eingefügt werden.
Bei ❸ kann eingestellt
werden, ob für die Bilder
der Titel ❶ und die Beschreibung übernommen
werden soll.
Abbildung 4
Nach dem Speichern wird dann wieder
die Ansicht aus Abbildung 2 gezeigt.
Bei ❶ kann dann die neu erstellte
Schauliste ausgewählt werden.
Abbildung 5
Nachdem nun die neue Schauliste ausgewählt
wurde, wird bei ❶ geklickt, um die Bildquelle
zu wählen.
Abbildung 6
3
24. März 2015
Wir werden jetzt bei ❶ Bilder verwenden, die wir zuvor in einen Ordner
hochgeladen haben.
Natürlich könnten auch andere Datenquellen gewählt werden, wie z. B. die
Onlinedienste Picasa oder Flickr. Bei
❷ können weitere Quellen sichtbar
gemacht werden.
Abbildung 7
Nachdem bei Abbildung 7 auf ❶
geklickt wurde, öffnet sich ein
drei geteiltes Fenster.
Bei ❶ wird nun der Ordner angeklickt, in dem sich die Bilder
befinden, die in der Bildergalerie angezeigt werden sollen.
Aus den dann im mittleren Fenster angezeigten Bildern können
diejenigen per Drag and Drop in
Abbildung 8
das rechte Fenster gezogen werden, die verwendet werden sollen.
Da ich alle Bilder verwenden möchte markiere ich sie mit gedrückter Steuerungstaste und zieh sie dann in das rechte
Fenster.
Nachdem es dann so aussieht speichere ich mit einem Klick bei ❶.
Abbildung 9
4
24. März 2015
Nachdem nun bei ❶ wieder die
neu erstellte Schauliste ausgewählt wurde, kann mit einem Klick
bei ❷ ein neuer so genannter
Schaukasten erstellt werden. Bei
einem Schaukasten handelt es sich
um die Art und Weise wie die Bildergalerie dargestellt wird.
Abbildung 10
3
SCHAUKASTEN
Allerdings haben wir für Sie bereits
eine ganze Reihe von vorgefertigten
Schaukästen installiert. Diese erreichen Sie bei ❶.
Abbildung 11
5
24. März 2015
3.1
Frontpage Slideshow
Nachdem nun die
Schauliste und der
Schaukasten ausgewählt sind geht es um
die Art der Präsentation.
Die JSN ImageShow
bietet dazu drei fantastische Optionen.
Ich werde alle drei
Möglichkeiten
demonstrieren.
Abbildung 12
3.1.1
Via Menüeintrag
Nachdem ich nun bei ❶ via Menüeintrag ausgewählt habe, stellte ich bei ❷ das Main Menu
ein.
Anschließend klickte ich auf <Starten> ❸.
Abbildung 13
Bei Position ❶ habe ich einen Titel eingefügt
und die Positionen ❷-❺ so belassen wie sie
vorgegeben waren. Lediglich bei Position ❻
habe ich den übergeordneten Menüpunkt eingestellt, unter dem die Fotogalerie zu sehen
sein soll.
Anschließend habe ich bei Position ❻ erst
einmal nur auf <Speichern> geklickt und nicht
auf <Speichern und Schließen>, weil ich noch
nicht wusste, ob ich noch etwas ändern oder
anpassen musste.
Abbildung 14
6
24. März 2015
Und so sieht das nun auf der
Webseite aus. Es wird eine
Bildgalerie angezeigt mit
wechselnden Übergängen
von Bild zu Bild. Was mich
jetzt noch ein wenig stört ist,
dass der Titel der Bilder auf
einem schwarzen Hintergrund eingeblendet wird
❶.
Natürlich hätte ich den Bildern auch einen sprechenden Namen geben können
und die Anzeige hätte zumindest ein wenig mehr Sinn ergeben. Also gehe ich noch einmal
in die Bearbeitung des Schaukastens.
3.1.1.1
Design des Schaukasten bearbeiten
Um den Schaukasten zu bearbeiten begebe
ich mich ins Kontrollzentrum von Joomla
und wähle dort den <Schaukasten-Manager> ❶.
Abbildung 15
7
24. März 2015
Im sich dann öffnenden Fenster klicke ich auf den Schaukasten, den ich
bearbeiten möchte. In diesem Falle also <Frontpage Slideshow> ❶.
Abbildung 16
Bei ❶ kann ich nun die
grundsätzlichen Einstellungen überprüfen und
gegebenenfalls anpassen. Hier möchte ich aber
jetzt erst einmal nichts
ändern.
Abbildung 17
Eigentlich ist ab hier alles
selbsterklärend bei ❶ ❷
kann ich bei drei die Übergangseffekte einstellen. Da
ich aber gerne einen Wechsel haben möchte mit möglichst vielen Effekten, lasse
ich es hier bei <Random>
❸, also zufällig.
Bei ❹ hätte ich einstellen
können, dass der Hintergrund transparent sein soll.
Viel interessanter ist aber
das
Bild auf der rechten
Abbildung 18
Seite. Wenn ich es mit dem
Mauszeiger überfahre kann ich direkt auf die Bereiche klicken, die ich bearbeiten möchte. Ich klicke hier also auf die
Bildunterschrift bei ❺.
8
24. März 2015
Unter ❶, ❷ und
❸ habe ich wie
hier zu sehen die
Bildunterschrift einfach ausgeblendet.
Abbildung 19
Und so sieht das jetzt aus.
Abbildung 20
Natürlich können noch weit
mehr Optionen ein bzw. ausgeblendet werden.
Abbildung 21
9
24. März 2015
3.1.2
Via Modulposition
In diesem Beispiel geht es darum die Darstellung einer Bildergalerie in einer Modulposition zu zeigen.
Hierzu begebe ich mich wieder in das Launch Pad und aktiviere die Positionen ❶,
❷ und ❸.
Bei Position ❹ wird die Aktion gestartet.
Abbildung 22
Bei Position ❶ wird ein
Titel für das Modul vergeben. Bei Position ❷
könnte ein <Module Class
Suffix> ausgewählt werden
(dazu gleich mehr) und bei
❸ wird die Modul Position ausgewählt, an der die
Bildergalerie angezeigt
werden soll.
Abbildung 23
10
24. März 2015
Abbildung 24
Wie sie nun sehen
können,
habe ich andere
Bilder für die Slideshow
benutzt.
Abbildung 25
Bei ❶ sehen
Sie die Bildergalerie, die als
Menüpunkt eingefügt wurde
und bei ❷ die
gleiche Bildergale-
rie als Modul in der Position right.
Jetzt zeige ich Ihnen, wie Sie die gleiche Slideshow innerhalb eines Artikels verwenden.
11
24. März 2015
3.1.3
Innerhalb eines Artikels
Zunächst einmal
beginne ich wieder im sogenannten Launch Pad.
Abbildung 26
Hier stelle ich bei
❶ wieder die
entsprechende
Schau letzter und
bei ❷ den passenden Schaukasten ein. Bei ❹
wähle ich im ersten Schritt <innerhalb eines Artikels> aus, um
dann bei ❸ auf
<Starten> zu klicken.
Daraufhin öffnet sich ein Popup-Fenster, in dem mir bei ❶ ein
kurzer Quelltext angezeigt wird, den ich mit einem Klick bei ❷
in die Windows Zwischenablage kopieren kann.
Durch eine kleine Abänderung dieses Quelltextes:
{imageshow sl=1 sc=1 w=100%/}
wird die Slideshow sogar Responsive.
Abbildung 27
❶
anschließend kann ich das Fenster von Abbildung 27 schließen.
Abbildung 28
12
24. März 2015
Den wie bei Abbildung 27 abgeänderten Quelltext kann
ich nun in einer
beliebigen Seite
einfügen.
Abbildung 29
Abbildung 30
Viel Spaß beim Ausprobieren!
13