Flexslider_XH 0.2

by svasti

Requires php 5

Tested with CMSimple_XH 1.6.2

This plugin integrates the jQuery plugin Flexslider 2.2.2 by Tyler Smith (published by WooThemes) into CMSimple_XH. The Markdown to HTML feature uses the Parsedown parser by Emanuil Rusev.

Update 0.1->0.2

Install everything on top. Go to plugin backend and activate plugin. The image list of the active language will be converted into the new format. To convert image lists of other languages run the activation in that language. To trigger the activation delete the version nr of $plugin_cf['flexslider']['version'] in config.php.

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.)

Standard usage on a page

Call:
{{{flexslider('name_of_my_images_file.php');}}} (XH 1.6)
{{{PLUGIN:flexslider('name_of_my_images_file.php');}}} (XH 1.5)
{{{flexslider();}}} for standard images file.
The effect is nicer when all images have the same width/height ratio.

Using multiple Flexsliders

First create the Flexslider image list by selecting in the option list on top create new file (default option standard image file). The plugin will ask for a new name. Enter one and hit return. The image list file with the new name will present itself with one empty image. Depending how many images you are planning add empty images. A click on an empty image will put that image in focus and give it a red border. Clicking on an image name in the image browser will transfer that image into the flexslider list item with focus. Default setting (can be changed in config) is that the red border then jumps to the next item.

Select type of animation and save, or go to preview. Preview will save automatically.

Finally call Flexselider on a page {{{flexslider('list name');}}}. You can have several sliders on a page, but all will follow the animation of the first slider.

Using a slide with text only, without image

The text input field is autogrowing. If an image has been entered, 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 to enable complex page lay-out. For more details see the Markdown site. Some examples:

Input
into textfield Resulting code
(invisible) Resulting view
in flexslider

Input into textfield	Resulting code (invisible)	Resulting view in flexslider
`Headline ======== ##### Headline h5 This is a paragraph This another paragraph - 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 another paragraph</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>`	Headline Headline h5 This is a paragraph This another paragraph This an unordered list This an ordered list click here = link to the Start page

Headline
========
##### Headline h5

This is a paragraph

This another paragraph

- 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 another paragraph</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>

Headline

Headline h5

This is a paragraph

This another paragraph

This an unordered
list

This an
ordered list

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> .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 asking for help in the CMSimpleforum.

Flexslider in the template or in a 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. Additionally in plugin-config you must select usage in template or newsbox, which will adapt the code.
Call the plugin with the usual code in a newsbox, and in the template with <?php echo flexslider();?>
(Template integration based on tips by cmb.)

Changing Design via editing flexslider/css/stylesheet.css

Flexslider size

Flexslider by default takes the full width of the content area. One can give it less width by changing the line .flexslider {margin: 0; padding: 0;} to .flexslider {margin: 0; padding: 0; width:50%;}

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;.