JGU Image Scroller

Mit dem Shortcode: [imagescroller] realisieren Sie eine Bilderfolge wie von der Startseite der Universität bekannt.

Was ist der Imagescroller?

Mit dem Shortcode: [imagescroller] realisieren Sie eine Bilderfolge wie von der Startseite der Universität bekannt.

Die Imagescroller (auch Diashow oder Slider genannt) zeigen eine Folge von Bildern/Slides, die automatisch nacheinander eingeblendet werden. Sie können diese Slides/Bilder beschriften und Inhalte verlinken. Der Imagescroller kann an fast jeder Stelle auf Ihrer Seite verwendet werden. Sie können die folgenden Arten auswählen:

• in der mittleren Spalte
• auf der Startseite (ganzseitig) (siehe JGU Imagescroller: ganzseitig mit Suchbox, Top- und Kalenderlinks)
• Offene Universität (pro Slide werden 6. Bilder nebeneinander angezeigt)
• in der rechten Spalte

Aktivieren Sie das Plugin JGU Image Scroller.

---

Plugin einschalten

Bevor Sie dieses Plugin verwenden können, müssen Sie es zuerst einschalten!
Ansonsten werden Ihre Shortcodes einfach nur auf der Seite angezeigt, anstatt ausgeführt zu werden.
Also: gehen Sie nach Dashboard -> JGU Tools -> Plugins und aktivieren Sie das Plugin.Ausführliche Anleitung zum Plugin aus- und einschalten

---

 

Wie wird der Imagescroller auf der Seite realisiert? - Schritt für Schritt

Bilder vorbereiten

Zuerst müssen Sie die Bilder, die im Imagescroller zu sehen sein sollen, auswählen und in die Mediathek hochladen. Bevor Sie das tun, lohnt sich ein Blick auf die Bildgröße (Pixel).
Der Imagescroller hat voreingestellte Standardbreiten, abhängig von dem Typ, den Sie verwenden:

Breite von 625 Pixeln: mittlere Spalte und "Offene Universität"

Breite von 836 Pixeln: Startseite

Breite von 300 Pixeln: rechte Spalte

Sind Bilder größer, werden sie automatisch an diese Standardbreiten angepasst, das Seitenverhältnis bleibt dabei gleich. Deshalb kann es passieren, dass der Imagescroller beim Durchlauf Ihrer Bilder seine Höhe von einem Bild zum nächsten verändert, wenn Ihre Bilder verschieden groß sind. Am besten bearbeiten Sie Ihre Bilder vor dem Hochladen so, dass sie alle die gleiche Größe oder das gleiche Größenverhältnis haben.

Sonst sieht es so aus: → Beispiel zur Abschreckung -  Bilder sind verschieden hoch

Ihre Bilder sind schmaler als die Standardbreite des Imagescrollers? Eine nützliche Funktion ist an dieser Stelle der Parameter  max_width.
Damit können Sie die Maximalbreite für Ihren Imagescroller pixelgenau festlegen. Orientieren Sie sich am schmalsten Bild, das Sie verwenden möchten, denn sonst bleibt der Rest des Feldes leer.

Wie das aussieht, sehen Sie hier: → Beispiel zur Abschreckung - Bilder sind verschieden breit

 

Den Imagescroller einbauen und mit Bildern befüllen

Sie haben bereits

• das Plugin eingeschaltet,
• ausgewählt, an welcher Stelle der Imagescroller erscheinen soll,
• Ihre Bilder auf eine einheitliche Größe gebracht,
• in die Mediathek hochgeladen.

 

Beispiel Imagescroller

Wie das aussieht, sehen Sie hier: → Beispiel - Imagescroller mit drei Bildern

Was man alles einstellen kann im Imagescroller (Parameter)

 

[imagescroller][/imagescroller] :
Funktion:
Das sind die äußeren Klammern, in die Sie alle für den Imagescroller relevanten Parameter eintragen.

1. typ:
   Funktion:

Damit legen Sie fest, wo auf Ihrer Seite der Imagescroller erscheinen soll.

• • Voreingestellt ist der Imagescroller in der mittleren Spalte. Dafür müssen Sie also nichts ändern.
  • Sie wollen, dass der Imagescroller ganzseitig auf der Startseite angezeigt wird. Tragen Sie den Wert startseite ein.
  • Sie wollen 6 kleine Bilder nebeneinander darstellen. Wenn Sie diesen Parameter verwenden, hat er immer den Wert offene_universitaet.
  • Für einen Imagescroller in der rechten Spalte geben Sie dem Parameter den Wert rechte_spalte.

1. • Beispiel:
     [imagescroller typ="offene_universitaet"] : Die folgenden 6 Bilder werden alle dargestellt, leicht ausgegraut, bei Klick oder Mausüberstreichen werden sie farbig.
2. autoplay:
Funktion:
   die Bilder laufen automatisch hintereinander ab. Standardmäßig ist autoplay eingeschaltet.

   💡: Aus Gründen der Zugänglichkeit (Barrierefreiheit) empfehlen wir, das autoplay standardmäßig auszuschalten. Interessierte Benutzer können sich selbst per Klick durch die Bilderliste bewegen.

   Beispiel:
   So schalten Sie den automatische Bildlauf  aus.

3. [imagescroller autoplay="off"] 
4. loop:
   Funktion:
   in diesem Modus laufen alle Bilder in einer Dauerschleife. Standardmäßig ist der loop eingeschaltet.

   💡:Aus Gründen der Zugänglichkeit (Barrierefreiheit) empfehlen wir, die loop standardmäßig auszuschalten.

   Beispiel:
   So schalten Sie die Dauerschleife aus.
   [imagescroller loop="off"] 

5. duration:
   Funktion:
   legt die Darstellungsdauer eines Bildes im autoplay Modus in Sekunden fest. Voreingestellt sind 10 Sekunden. Wenn Sie die Zeit zu kurz einstellen und der Text bei Headline zu lang ist, kann der Benutzer ihn nicht mehr erfassen.
   Beispiel:
   [imagescroller duration="5"] 
6. max_width:
   Funktion:
   Legen Sie die maximale Breite in Pixeln für Ihren Imagescroller fest. Dabei orientieren Sie sich bestenfalls am schmalsten Bild.
   Beispiel:
   [imagescroller max_width="450"] 
7. controls="Off":
   Funktion:
   Blendet die hellgraue Kontrollleiste unten aus. Die Punkte, die jeweils für die einzelnen Bilder stehen und die Pfeile, mit denen man sich in der Bilderabfolge bewegen kann, sind dann weg. Es bleiben die Bilder und die Unterschriften, der graue Kasten entfällt.Beispiel:
   [imagescroller controls="Off" ] 
8. Sonderfall imagescroller typ="offene_universitaet":
   Bei diesem Imagescroller können Sie die standardmäßige Überschrift "Offene Universität" ausblenden oder ändern:
   • ausblenden: no_headline="Yes"
   • ändern: ueberschrift="hier individuelle Überschrift eintragen"
9. [imagelink] :
   Funktion:
   Das ist die Klammer, die alle relevanten Informationen (ebenfalls Parameter, s.u.) für das einzelne Bild enthält. Sie müssen also für jedes Bild, das angezeigt werden soll, einen imagelink anlegen.

Beispiel Imagescroller: Mehrere Parameter gemeinsam verwenden

Wie das aussieht, sehen Sie hier: → Beispiel - Imagescroller mit mehreren Parametern eingeschaltet

Parameter für  die einzelnen Bilder

Der Shortcode imagescroller ist die äußere Klammer. Für jedes einzelne Bild benötigen Sie einmal den Shortcode imagelink Folgende Parameter können Sie im imagelink benutzen:

• • imageurl :
    Funktion:
    Das ist der Link, den die Seite lädt, um Ihr Bild aus der Medienbibliothek abzurufen. Um die Bildadresse zu erhalten, klicken Sie in der Medienübersicht auf das Bild, kopieren die Adresse aus dem Feld “URL” und fügen sie als Wert von imageurl ein.
  • Beispiel:
    [imageurl imageurl="http://webadresse-zu-ihrem-bild"] : 
  • url (optional):
    Funktion:
    Hier können Sie den Link zu einer beliebigen Seite eintragen, die aufgerufen wird, wenn das Bild angeklickt wird.
  • Beispiel:
    [imageurl url="http://webadresse"] : 
  • subtitle (optional):
    Funktion:
    Hier können Sie den Titel des Bilds eintragen. Wir empfehlen, den subtitle zu setzen, weil jedweder Bildinhalt durch einen alternativen Text ergänzt werden soll. Die Länge der Untertitel ist beliebig und darf zwischen den einzelnen Bildern stark variieren. Die Höhe des Laufbands wird automatisch auf den maximal benötigten Wert gesetzt.
  • Beispiel:
    [imageurl subtitle="Das ist der Untertitel"] : 
  • target (optional):
    Funktion:
    Mit diesem Parameter können Sie steuern, ob ein Toplink in einem neuen Fenster/Tab im Browser geöffnet werden soll. Dafür muss der Wert _blank gesetzt werden.
    Beispiel:
    target="_blank"

Beispiel: vollständig ausgefüllten imageurl

Sie können beliebig viele Imagelinks einsetzen. Wir empfehlen jedoch aufgrund der Ladezeiten von Bilddateien, besonders in langsamen Netzen, ein Maximum von 10 Bildlinks nicht zu überschreiten. (Ein Bild dieser Größe kann 400KB groß sein, mit 384 kbit/s dauert es mehrere Sekunden, bis das Bild übertragen ist.)

Rechtliche Hinweise für die Nutzung von Bildern