Flexslider_XH 0.4.7
by svasti
Requires php 5
This plugin integrates the jQuery plugin Flexslider 2.2.2 (version Apr. 2014) by Tyler Smith (published by WooThemes) into CMSimple_XH. The Markdown to HTML feature uses the Parsedown parser by Emanuil Rusev.
New in 0.4.7
- New "static" display with clickable full screen size view. Will be automatically there when animation "static" and fixed ratio are selected. A click on the image will advance the slideshow. Once the image is set to fullsize, back/forth cursor keys will work (even with multiple flexsliders on a page). Full size view can be ended by botton click or the esc key.
- All images from a folder can be imported in one go
- Animation and slideshow speed can be set individually per slider
- In the backend every image has an up and a down arrow for reordering images
New in 0.4
- Different sliders on the same page now independend of each other
- Without java script the first image of an image list will be shown
- New caption style "Overlay2", black text with a bit of white around
N.B.: The padding of the <div>
around the text in text-only slides has been reduced.
This doesn't fit in all templates. You can change the padding in the css file under .flexslider ul.slides li div.flex-text
N.B.: The animation vertical requires images of the same height. For images of diferent height choose a fixed display size ratio in the plugin. Text-only slides have variable height and will break the cadence of the animation. Captions under the images in styles normal and inverted, when not all images have captions, also break the cadence.
Update to newest version
Install everything on top. Go to plugin backend and activate plugin. If you update from version 0.1 you will have to reenter your image list.
Writing Permissions
If you usually have to give writing permissions to files,
Give writing permission to plugins/flexslider/languages/
folder and files,
and to plugins/flexslider/config/
folder and files before
running the activation. (See also update.txt.)
Usage on a page
Call:
{{{flexslider}}}
for Flexslider with standard images file (XH 1.6.5)
{{{flexslider();}}}
for Flexslider with standard images file (XH 1.6)
{{{flexslider 'name_of_my_flexslider_data_file.php'}}}
for using a specific file (XH 1.6.5)
{{{flexslider('name_of_my_flexslider_data_file.php');}}}
for using a specific file (XH 1.6)
{{{PLUGIN:flexslider('name_of_my_flexslider_data_file.php');}}}
in CMSimple 4.x and XH 1.5
Usage in template or newsbox
Since this plugin uses jQuery, it will not work without calling jQuery first.
To do this write the code <?php flexslider_init();?>
in the <head>
-area of the template above <?php echo head();?>
.
Call the plugin with the usual call in a newsbox. The call in the template is <?php echo flexslider();?>
(Based on an idea by cmb.)
Multiple Flexsliders
First create a new file by selecting from the option list on top create new file (default option standard image file). The plugin will ask for a new name. Enter one (no accented characters nor spaces) and hit return. The file with the new name will present itself with one empty item.
Depending on how many images you need, add empty items. A click on the image placeholder will put that item in focus and give it a red border. If you click in the image browser on an image name, this image will be put into the placeholder with focus. Default setting (can be changed in config) is that the red border then jumps to the next item.
Select image ratio, type of animation, etc., and save, or go to preview. Preview includes saving automatically.
Finally call Flexslider on a page {{{flexslider('file name');}}}
.
Using a slide with text only, without image
The text input field is autogrowing. If an image has already been entered into the image field, linebreaks in the text field are interpreted as html new lines.
If the image field is left empty, text entries will be interpreted according to Markdown syntax. Markdown is a simple methode to enter headlines, paragraphs, lists, bold and italic text without html. For more details see the Markdown site. Some examples:
Input into textfield | Resulting code (invisible) | Resulting view in flexslider |
---|---|---|
Headline
========
##### Headline h5
This is a paragraph
This *italic* and **bold**
- This an unordered
- list
1. This an
2. ordered list
click [here](?Start)
= link to the Start page |
<h1>Headline</h1>
<h5>Headline h5</h5>
<p>This is a paragraph</p>
<p>This is <em>italic</em>
and <strong>bold</strong></p>
<ul>
<li>This an unordered</li>
<li>list</li>
</ul>
<ol>
<li>This an</li>
<li>ordered list</li>
</ol>
<p>click
<a href="?Start">here</a>
= link to the Start page</p> |
HeadlineHeadline h5This is a paragraph This is italic and bold
click here = link to the Start page |
Problems in certain complex templates
Some templates contain far reaching detailed style instruction that may interfere with Flexslider.
And some templates load additional stylesheets with the help of code in the template, thus overwriting
plugin stylesheets.
If you experience such problems with Flexslider in your template, a possible solution is to add
the overwritten css instructions again in the head section of the template.htm, i.e. just before the </head>
.
E.g. for templates by Torsten Behrends add:
<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>
Tackling such problems means trying out different css-settings and comparing it to the display in other templates. If Problems persist,
think about contacting the template designer or ask for help in the
CMSimpleforum.
Changing Design via editing flexslider/css/stylesheet.css
Caption text
Caption text is styled by .flex-caption
plus the choosen caption type, i.e. .flex-normal
,
.flex-inverted
or .flex-overlay
plus their a:hover
-values. For instance, if you want a smaller overlay, delete width: 96%;padding: 2%;
from .flex-overlay
.
Square navigation dots
In .flex-control-paging li a
delete border-radius: 20px;
.