Flexslider_XH 0.3.1

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.

New in 0.3

Update 0.2->0.3.1

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)
{{{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');}}} same in older CMSimple_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.)

Different Flexsliders on different pages

First create the file with 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 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 Flexselider on a page {{{flexslider('file name');}}}.

You can have several sliders on the same page, but unfortunately only the settings of the first slider will take effect, settings of the following sliders will not have any effect.

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>

Headline

Headline h5

This is a paragraph

This is italic and bold

  • This an unordered
  • list
  1. This an
  2. 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 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;.