Flexslider_XH 0.4

by svasti

Requires php 5

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

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, e.g. by choosing 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 (styles normal and inverted), when not all images have captions, also break the cadence.

New in 0.3

  • Image ratios can be set to limit height of Flexslider
  • Outer margins of text only slides can be set per slide
  • Usage in template or newsbox simplified

Update to version 0.4

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 even on the same page

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 Flexselider 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>

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