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

Carousel

Questions answered by this recipe

• Can I add image carousels/slide-shows to my Home-page, or any page for that matter?
• Can my slide show automatically find every image in a particular directory?
• Can I use the image names to sort display order and also to set display names?
• Can I do all this with one line of Markup?
• Can I set it to auto-play, and set the interval?

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

Description

Simple Markup to build an Image Carousel from contents of a directory/folder

I wanted an image Carousel for a home-page, but I wanted it to be easy to update over time with different images.
This Markup identifies a single directory in your Wiki's domain and populates the Slide-Show/Carousel from all the
images in that directory. (.jpg, .jpeg, .png, .gif)
Contents are alpha-numeric sorted for display, and there is even code to allow you to set sort order but not display it:
03_-_Mallorca_Vacation.jpg  would sort as the third image, and be displayed with the title,
"Mallorca Vacation"  on the slide.

2022 Update- added optional auto-play with interval settings between slides.

Eliminated the need to set your wiki path.

Installation

Download the file Carousel.zipΔ

Extract the files from Carousel.zip

Place carousel.php in your cookbook directory.
(On a standard installation something like www.exampledomain.org/pmwiki/cookbook/ )

Edit your config.php file:
(Should be in your Wiki local directory something like www.exampledomain.org/pmwiki/local/config.php)
Add the following lines:

## Kirk's Image Carousel recipe
 include_once("$FarmD/cookbook/carousel.php")  ;

Add the contents of the carousel.css file to your local.css file:
(usually found at www.exampledomain.org/pmwiki/pub/css/local.css)
Copy and paste the contents of the carousel.css file to the bottom of the local.css file

Now you're ready to use the Carousel Markup!

Optional CSS method:

Use ManageCSS recipe and then you only need to add the carousel.css file to your
/pub/css directory

Configuration

If you don't want to use the image# of images display e.g. 3/10 in top left corner: You can edit the carousel.php to comment out the specific lines: look for the tag "##OPTION>>" in the code

Likewise, the image title can be displayed on the slide or not...

Obviously if you don't like my 'next' and 'previous' buttons, you would need to edit the carousel.css code.

Usage

Make sure you have a folder/directory with the images you want to use.
As the code is written, it needs to be a sub-directory of the pmwiki directory.
I keep a directory just for media files, often with sub-directories such as "slideshow" .
e.g. /pmwiki/media/slideshow3

To add a Manual-Advance Carousel to any page you just need a simple line of Markup, with the path to that directory,
Relative to your root pmwiki installation (Where the pmwiki.php file sits.)
something like:

(:Carousel /media/slideshow3:)

To add an auto-run Carousel you just add the word autorun, and optionally how many milliseconds:

(:Carousel /media/slideshow3 autorun 5000:)

This would switch slides every 5 seconds.

Notes

To do / some day / maybe

• Add code to automatically rotate slides
• Add code to automatically embed the css file see ManageCSS
• Add slide transitions (fade in / out)

If you have future plans or wishes for this recipe.

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

See also

Contributors

Comments

See discussion at Carousel-Talk?