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
- "Static" Animation (d.h. keine Animation) mit anklickbarer seitenfüllender Bildschau. Diese Möglichkeit erscheint automatisch wenn "static" und ein festes Seitenverhältnis ausgewählt sind. Klick auf ein Bild führt zum nächsten Bild. Wenn Großanzeige angeklickt ist, funktionieren vor/zurück Cursortasten, und mit ESC-Taste/ Klick auf entsprecheden Button wird die seitenfüllende Anzeige beendet.
- Alle Bilder eines Ordner können in einem Rutsch importiert werden
- Animationsgeschwindigkeit und Slideshowgeschwindigkeit individuell per Slider einstellbar
- Bildreihenfolge kann im Backend durch anklickbare Pfeile nach unten und oben geändert werden
- kleinere Bugfixes
Neu in 0.4
- Mehrere Flexslider pro Seite jetzt unabhängig voneinander
- Auch ohne Javascript wird jetzt das erste Bild einer Slide-Show angezeigt
- Neuer Bildtextstil "Overlay2" mit schwarzem Text und weißer Buchstabenumrandung
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 h5Dies ist ein Absatz Dies ist kursiv und fett
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;
.