Carousel

Summary: simple Markup for an Image Carousel auto-populated from contents of a directory
Version: 2021-12-01
Prerequisites: None - (Browsers need Java Script to move among images, first image displays even without js.)
Status: Active
Maintainer: Kirk Siqveland
Categories: Images, Media, Layout, Markup
Users: (view? / edit)
Discussion: Carousel-Talk?

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?

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.

Installation

Download the file Carousel.zipΔ

Extract the files from Carousel.zip

You will need to edit one line in the carousel.php file to identify your pmwiki URL.
The file is commented to make this easy to find.

Then 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!

Configuration

You might want to edit the carousel.php to comment out lines if you don't want the image 3/10 to display in the corner. 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 css code.

Internationalization

The following strings can be translated in an XLPage:

Usage

Make sure you have a folder/directory with the images you want to use.
I keep a directory just for media files, often with subdirectories.
e.g. /pmwiki/media/slideshow3

Then you just need a simple line of Markup in your page with the relative path to that directory.
Relative to your root pmwiki installation (Where the pmwiki.php file sits.)
something like:

(:Carousel /media/slideshow3:)

Notes

To do / some day / maybe

  • Add code to automatically rotate slides
  • Add code to automatically embed the css file

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?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.