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?
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.
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
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.
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" .
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.)
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.
To do / some day / maybe
Add code to automatically rotate slides Add code to automatically embed the css filesee ManageCSS
- Add slide transitions (fade in / out)
Change log / Release notes