• View
• Edit
• History
• Attach
• Print
• Backlinks

ResponsiveSlides

Questions answered by this recipe

How can I do a simple image carousel ?

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.

Description

Convert lists of images into a caroussel. ResponsiveSlides can be used to convert bullet lists of images into a diaporama / carousel.

Installation

Download the responsiveslides.zipΔ, and extract all files in the pub into your pub directory, and responsiveslides.php into the cookbook directory.

After extracting the files you should have:

cookbook/responsiveslides.php
pub/responsiveslides/responsiveslides.css
                     responsiveslides.min.js
                     themes.gif

Add this line to your config.php: include_once("$FarmD/cookbook/responsiveslides.php");

Usage

Simply create a list of images surrounded by a div with the class gallery, and then use the responsiveslides markup. Images have to be the same size.

>>gallery<<
* Attach:elephant1.jpg"One elephant"
  %rcaption%Here you can write a legend
* Attach:elephant2.jpg"Another elephant"
  %rcaption%Another title
* Attach:elephant3.jpg"Elephant"
  %rcaption%Title 3
* Attach:elephant_bali.jpg"Elephant in Bali"
  %rcaption%Title 4
>><<

(:responsiveslides:)

The lines that start with %caption% are optional and use for display a legend.

Configuration

You have to write all your extra-configuration before the inckusion of this cookbook.

JQuery

This script depends on JQuery 1.6 and up.
JQuery is imported via the $HTMLHeaderFmt['rslides-jquery'] variable. By default is set to a CDN version: $HTMLHeaderFmt['rslides-jquery'] = "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>";

You can use your own version by setting it in your config.php before including the cookbook: $HTMLHeaderFmt['rslides-jquery'] = "<script src='".$PubDirUrl."/myjquerydir/jquery.min.js'></script>\n";

ResponsiveSlides.js options

You can set options by using args in the markup responsiveslides :
(:responsiveslides pager=true nav=false timeout=5000 prevText='Précédent' nextText='Suivant':)

Or you can set options globally in your config.php like this :

$rslides_options = array(
    'pager' => true,
    'nav' => false,
    'timeout' => 5000,
    'prevText' => 'Précédent',
    'nextText' => 'Suivant'
);

List of options with their default value:

    'list': '.gallery',       // String: Css root element's name for list of images
    'auto': true,             // Boolean: Animate automatically, true or false
    'speed': 500,             // Integer: Speed of the transition, in milliseconds
    'timeout': 4000,          // Integer: Time between slide transitions, in milliseconds
    'pager': false,           // Boolean: Show pager, true or false
    'nav': false,             // Boolean: Show navigation, true or false
    'random': false,          // Boolean: Randomize the order of the slides, true or false
    'pause': false,           // Boolean: Pause on hover, true or false
    'pauseControls': true,    // Boolean: Pause when hovering controls, true or false
    'prevText': 'Previous',   // String: Text for the "previous" button
    'nextText': 'Next',       // String: Text for the "next" button
    'maxwidth': '',           // Integer: Max-width of the slideshow, in pixels
    'navContainer': '',       // Selector: Where auto generated controls should be appended to, default is after the <ul>
    'manualControls': '',     // Selector: Declare custom pager navigation
    'namespace': 'rslides',   // String: change the default namespace used
    'before': '$.noop',       // Function: Before callback
    'after': '$.noop'         // Function: After callback

Do not change the list option unless you need custom xpath for your own CSS (see explanations just below).

Custom CSS

You can change the css with your own file like this in your config.php : $HTMLHeaderFmt['rslides-css'] = "<link rel='stylesheet' href='".$PubDirUrl."/mydir/responsiveslides.css' type='text/css' media='screen'/>\n"

If you need to change the xpath to the image list container use the list option like this:

>>mycustomclass<<
* Attach:image1.jpg
* Attach:image2.jpg
* Attach:image3.jpg
>><<
(:responsiveslides list=".mycustomclass":)

Safe Mode

Some responsiveslides.js options may be javascript functions. Allowing unknown page editors to execute javascript via markup options is potentially unsafe, so ResponsiveSlides prevents javascript options from being specified as markup options. You can specify these options from config.php. If you have locked down edit access, or trust your editors you can allow javascript based options to be specified from markup by setting $rslides_safe_mode to false.

Unsafe options are:

• 'before': '$.noop', // Function: Before callback
• 'after': '$.noop' // Function: After callback

Notes

ResposiveSlides is based on:

• The jQuery library ResponsiveSlides.js:

From the website: ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it.

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

• 2016-07-05 : Bugfix : Replace CSS caption class with rcaption to prevent conflict with legended image in pmwiki.
• 2016-06-21 : wider CSS context : enable several carousel in the same page
• 2016-06-16 : Initial release

See also

Contributors

• AntonyTemplier

Comments

See discussion at ResponsiveSlides-Talk