Flexslider_XH 0.5.2

by svasti

Requires php 5

This plugin integrates the jQuery plugin Flexslider 2.5.0 (version Mai 2015) by Tyler Smith (published on Github) into CMSimple_XH. The Markdown to HTML feature uses the Parsedown parser by Emanuil Rusev.

New in 0.5

New in 0.4.7

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. 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 after installing the plugin and before running the activation. (See also update.txt.)

Usage on a page

{{{flexslider}}} or
{{{flexslider 'filename.php'}}} for using a specific slider file.

If you are using an older version of XH or CMSimple 4.x, use the old style plugin call:
{{{PLUGIN:flexslider('name_of_my_flexslider_data_file.php');}}}

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();?>.

In a newsbox call the plugin like on a page. In the template the call is <?php echo flexslider();?>
(From on 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 the pagedata to drive flexslider

If you put your flexslider in the template, you can have different slides on every page. First enable Pagedata-imagelist in the config, then go to plugin main and check (just on top of the entered images) use Pagedata image list. How the called flexslider will look for pagedata entries to change its slide show.

However you need a separate plugin to enter the values in the pagedata, e.g. Morepagedata. With Morepagedata first establish the pagedata variable flx_data as simple input field. On the page where you want different slides, open the new morepagedata field and enter the full name of an alternative flexslider list. For every page where you want a different slide show, prepare these slide shows first as new files in flexslider and enter their names afterwards via the morepagedata field.

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

Don't want border around your images?

In stylesheet.css section "DEFAULT THEME" comment out lines 84 to 88.

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.

Huge caption text

c

Square navigation dots

In .flex-control-paging li a delete border-radius: 20px;.