Flexslider_XH 0.2
by svasti
Benötigt php 5
Getestet mit CMSimple_XH 1.6.2
Dieses Plugin integriert das jQuery-Plugin Flexslider 2.2.2 von Tyler Smith (veröffentlich von WooThemes) in CMSimple_XH. Die Markdown zu HTML Umwandlung nutzt den Parsedown-Parser von Emanuil Rusev.
Update 0.1->0.2
Über bestehendes Plugin installieren und anschließend im Backend Plugin aktivieren. Die Bildliste von Version 0.1 der aktiven Sprache wird dann eingelesen und ins neue Format konvertiert. Bildlisten anderer Sprachen von der jeweiligen Sprache aus konvertieren. Löschen des
$plugin_cf['flexslider']['version']
-Wertes reaktiviert die Aktivierungsmöglichkeit.Schreibrechte
Falls Sie normalerweise Schreibrechte vergeben müssen, am besten schon vor der Aktivierung Rechte für Ordner und Dateien von
plugins/flexslider/languages/
undplugins/flexslider/config/
geben. (Mehr dazu siehe update.txt.)
Anwendung im Seitenbereich
{{{flexslider('meine_Bilddatei.php');}}}
(XH 1.6) oder
{{{PLUGIN:flexslider('meine_bilddatei.php');}}}
(XH 1.5).
{{{flexslider();}}}
genügt wenn nur die Standard-Bilddatei genutzt wird.- Es empfielt sich, Bilder mit gleichem Seitenverhältnis zu nehmen.
Mehrere Flexslider nutzen
Dazu zuerst eine neue Flexslider-Bildlisten-Datei anlegen. Dazu oben in der Dateiauswahl (wo normalerweise "Standardbilddatei" steht) auswählen: neue Bilddatei erstellen. Das Plugin fragt dann nach einem Namen; einen Namen ohne Umlaufe 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 Leerbilder hinzufügen und anschließend diese Leerbilder mit Bildern versehen.
Dazu erst auf ein Leerbild klicken – das Leerbild 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 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.
Mehrere Slider konnen auf einer Seite laufen, jedoch wird die Animation all dieser Slider vom ersten Slider festgelegt :-(
Flexslider-Elemente, die Text ohne Bild enthalten
Die Texteingabezeile vergrößert sich automatisch mit dem eingegebenen Text. Enthält ein Element ein Bild, wird in der Textzeile die Eingabe einer neuen Zeile automatisch als HTML-Zeilenumbruch interpretiert. Lässt man das Bildfeld leer, wird hingegen die Texteingabe als in Markdown-Syntax geschrieben interpretiert. Ein komplexes Layout wird damit möglich. 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 ein weiterer Absatz
- 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 ein weiterer Absatz</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 ein weiterer Absatz
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>
.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.
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 in der Plugin-Konfiguration anklicken, dass das Plugin in Template oder Newsbox genutzt wird.
Dann in Newsbox wie im normalen Text einfügen, und im Template mit <?php echo flexslider();?>
.
(Einbindung im Template basiert auf Tipps von cmb.)
Design-Änderungen durch Änderungen der flexslider/css/stylesheet.css
Flexslider-Größe
Flexslider nimmt standardmäßig die ganze Breite des Textbereichs ein. Man kann die Ausgabe verkleinern, indem man in der plugin/css/stylesheet.css die Zeile .flexslider {margin: 0; padding: 0;}
erweitert zu etwa .flexslider {margin: 0; padding: 0; width:50%;}
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;
.