Flexslider_XH 0.4.7

by svasti

Benötigt php 5

Dieses Plugin integriert das jQuery-Plugin Flexslider 2.2.2 (Version Apr. 2014) Tyler Smith (veröffentlich von WooThemes) in CMSimple_XH. Die Markdown zu HTML Umwandlung nutzt den Parsedown-Parser von Emanuil Rusev.

Neu in 0.4.7

Neu in 0.4

N.B.: Der innere Abstand (padding) des <div>-Bereichs um den Text bei Nurtext-Slides ist verkleinert worden. Die Einstellung passt aber nicht für alle Templates. Man kann sie in der Plugin-Css ändern bei .flexslider ul.slides li div.flex-text

N.B.: Die Animation vertical benötigt Bilder gleicher Höhe. Das wird z.B. durch Einstellung eines festen Seitenverhältnisses erreicht. Nurtext-Slides allerding haben variable Höhe und bringen den Animationsrhythmus in Versatz. Text unter den Bildern bei den Bildtext-Stilen normal und inverted verschieben ebenfalls den Animationsrhythmus wenn es daneben noch Bilder ohne Text gibt.

Update auf neueste Version

Über bestehendes Plugin installieren und anschließend im Backend Plugin aktivieren. Bei Update von Version 0.1 muss die Bildliste erneut eingegeben werden.

Schreibrechte

Falls Sie normalerweise Schreibrechte vergeben müssen, am besten schon vor der Aktivierung Rechte für Ordner und Dateien von plugins/flexslider/languages/ und plugins/flexslider/config/ geben. (Mehr dazu siehe update.txt.)

Anwendung im Seitenbereich

{{{flexslider}}} Flexslider mit Standard-Datendatei (XH 1.6.5)
{{{flexslider();}}} Flexslider mit Standard-Datendatei (XH 1.6)
{{{flexslider 'meine_Flexslider_Datendatei.php'}}} Flexslider mit spezifischer Bilddatei (XH 1.6.5)
{{{flexslider('meine_Flexslider_Datendatei.php');}}} Flexslider mit spezifischer Bilddatei (XH 1.6)
{{{PLUGIN:flexslider('meine_Flexslider_Datendatei.php');}}} bei CMSimple 4.x und XH 1.5

Anwendung in Template oder Newsbox

Da das Plugin jQuery nutzt, muss zuerst jQuery aufgerufen werden. Dazu in den Head-Bereich des Templates einfügen <?php flexslider_init();?> und zwar unbedingt vor dem Aufruf von <?php echo head();?>.
In einer Newsbox den normalen Pluginaufruf für Flexslider nutzen. Im Template ist der Aufruf <?php echo flexslider();?>.
(Nach Anleitung von cmb.)

Mehrere Flexslider

Dazu für jeden Flexslider eine eigene Bild-Datendatei anlegen. Oben in der Dateiauswahl (wo normalerweise "Standard-Datendatei" steht) auswählen: neue Datendatei erstellen. Das Plugin fragt dann nach einem Namen; einen Namen ohne Umlaute eingeben und abschicken, (vorhandene Dateien mit gleichem Namen werden ohne Warnung überschrieben,) danach wird mit diesem Namen eine neue Bilddatei eröffnet.

Je nachdem wie viele Bilder man im Flexslider haben will, zuerst mit Elem. hinzufügen leere Elemente (= Dias, Slides) erstellen und anschließend diese Elemente mit Bildern und/oder Text versehen.

Dazu auf ein Leerbild klicken – das Feld wird dann rot umrandet – und dann einen Bildnamen anklicken. Die Voreinstellung im Plugin (kann man abstellen) ist, dass der rote Rand gleich zum nächsten Leerbild springt. So kann man die gewünschten Bilder ziemlich schnell einfügen. Anschließend Seitenverhältnis, Animation etc. einstellen und sichern. Alternativ auf Vorschau klicken; vor dem Anzeigen der Vorschau wird automatisch gesichert.

Dann auf der gewünschten Seite mit {{{flexslider('Dateinamen');}}} aufrufen.

Bild-Text und Text ohne Bild

Gibt man Text zu einem Bild ein, vergrößert sich die Textzeile automatisch mit dem eingegebenen Text. Bei Bildunterschriften wird in der Textzeile die Eingabe einer neuen Zeile automatisch als HTML-Zeilenumbruch interpretiert.

Lässt man das Bildfeld leer, wird die Texteingabe als in Markdown-Syntax geschrieben interpretiert. Markdown ist ein einfaches System um Text in Absätzen, Überschriften, Listen, fett und kursiv ohne html darzustellen. Mehr über die Markdown-Syntax findet man im Internet, z.B. hier. Einige Beispiele:

Eingabe
im Textfeld
Von Markdown generierter
Code (unsichtbar)
Sichtbare Darstellung
im Flexslider
Überschrift =========== ##### Überschrift h5 Dies ist ein Absatz Dies ist *kursiv* und **fett** - Dies ist eine - Punkteliste 1. Dies eine 2. nummerierte Liste [here](?Start) klicken = Link zur Startseite <h1>Überschrift</h1> <h5>Überschrift h5</h5> <p>Dies ist ein Absatz</p> <p>Dies ist <em>kursiv</em> und <strong>fett</strong></p> <ul> <li>Dies ist eine</li> <li>Punkteliste</li> </ul> <ol> <li>Dies eine</li> <li>nummerierte Liste</li> </ol> <p><a href="?Start">hier</a> klicken = Link zur Startseite</p>

Überschrift

Überschrift h5

Dies ist ein Absatz

Dies ist kursiv und fett

  • Dies ist eine
  • Punkteliste
  1. Dies eine
  2. nummerierte Liste

hier klicken = Link zur Startseite

Probleme in Templates mit umfangreichen oder mehreren Stylesheets

Manche Template haben sehr weitreichende detaillierte Anweisungen, die sich auf Flexslider unerwünscht auswirken. Andere laden im Template Stylesheets nach und überschreiben damit das Flexslider Stylesheets. Eine Gegenmaßnahme ist, genau am Ende des Head-Bereichs im Template, also vor </head>, überschriebene Flexslider css-Angaben noch einmal einzufügen. Bei Templates von Torsten Behrens muss man z.B. einfügen:
<style type="text/css"> .flexslider ul {margin:0;padding:0;} .flexslider ul > li:before {content:"";content:none;} .flex-control-paging li a {margin:0 5px;} </style> Bei derartigen Problemen gilt es, mit den css-Angaben zu experimentieren und immer mal wieder mit der Ausgabe in anderen Templates zu vergleichen. Bleiben die Probleme bestehen, könnten Sie erwägen den Template-Programmierer oder im CMSimpleforum um Rat zu fragen.

Design-Änderungen durch Änderungen der flexslider/css/stylesheet.css

Aussehen des Bildtextes

Das Aussehen des Bildtextes wird durch .flex-caption zusammen mit der ausgewählten Textdarstellung bestimmt, d.h. .flex-normal, .flex-inverted oder .flex-overlay und den anschließenden a:hover-Werten. Möchte man beispielsweise einen kleineren Overlay-Bereich, kann man width: 96%;padding: 2%; aus .flex-overlay löschen.

Eckige Buttons in der Navigationsliste

Unter .flex-control-paging li a löschen border-radius: 20px;.