xili floom slideshow


xili-floom-slideshow integrates the Floom slideshow in wordpress theme.

Floom slideshow designed by Oskar Krawczyk under MIT license is wonderful and amazing. For integration inside wordpress, it can be awesome ! xili-floom-slideshow tries to install it automatically but also allows personalizations.

How it works ?

xili-floom-slideshow inserts the javascript and css file inside the header of the theme. The images attached (but not inserted) to a post (or a page) are listed for the slideshow. And after adding a [xilifloom] shortcode inside the content of the post, the slideshow of the images of the gallery are automatically displayed.
With the dashboard Settings page, it is possible to change some properties of the slideshow without changing the original javascript: by example, number of vertical ‘venitian’ blinds, speed, progress bar, visible captions, and more.
Some properties can be attached to one post by using custom fields and to one shortcode by using params.

Version 1.3


  • style according image_size,
  • default settings screen.
  • try to find a clone based on jQuery !

from 0.9.x to 1.2

  • by default display full size of attached images. But can also display other sizes as define by default (large, medium, thumbnail) or those set with add_image_size( 'my-size-example', 600, 210 ); function. Use ‘floom_image_size’ in custom post field or ‘image_size’ param in Shortcode.
  • example of shortcode [xilifloom image_size="my-size-example"]. Be aware that current css is adapted !
  • New xili wiki
  • enable now to have more than one slideshow displayed one resulting webpage. Need a minimum of knowledges in WP (shortcode), CSS, JS to activate these “flooms” and avoid bad side effects when more than one slideshow.
  • BE AWARE : now xili-floom-slideshow needs that theme have both wp_head() (as before) AND wp_foot() template tags in header and footer as in default theme like twentyten or twentyeleven or the most current well designed.
  • Improved filter xili_floom_get_values has now 2 params : developers must read source.
  • multiple flooms example here !
  • OOP new source code
  • new like function because changes in WP 3.0 when naming file and slug of attachment images. Possible to choose post column (post_name or guid or…) to sub-select with floom_subname postmeta
  • developers using global $xilifloom_name_selector must change to function set_xilifloom_name_selector() – see code at end of source
  • compatibility with child theme as visible in new theme of dev.xiligroup.com – child example of default twentyten –
  • add thumbnail bar with shortcode [xilifloombar]
  • Gold parameters added : ready to integrate a new child class of Floom see this post. Open to better events exchanged with theme UI. More modularity and possibility of setting. (Gold options are reserved for theme designer and webmaster with sufficient knowledge in php, js,…)
  • CAUTION: after upgrading, if floom_subname is used in custom fields of some posts, to retrieve the images series, the wildcard must be wrapped with one or two chars ‘%’ as in LIKE of sql query.
  • add for pictures order by menu_order. If order is set in gallery linked to a post, displayed series is ordered by these numbers ascendant.
  • more parameters.
  • add hooks and filters : to allow better selection of floom values and choice of series of images (not necessary attached to a post) according the theme or cms architecture, two filters was added : xili_floom_get_values and xili_floom_get_images insertable in functions inside functions.php of the current theme. Very useful to personalize header according place inside the site architecture. example


  • Minimun knowledges in WordPress architecture (and css).
  • If others plugins use mootools framework, some modifications must be done through a added function named xilifloom_theme_header() inside functions.php – see source.
  • Images for a slideshow must be selected with great precaution. (Same size adapted to the frame)


  • Example in iPhone Safari.
  • Folder example in current theme.
  • Blinds during transition between two images (snapshot from Oskar example).
  • Settings page.
  • Ordered list of images (only these in slideshow are affected).


Is it possible to insert slideshow outside the content of post on CMS ?

Yes, xili-floom-slideshow only need to find the id of the div where images are displayed (default name blinds).

With latest version 0.9.8 and possibility to have more than one floom in resulting webpage, what about the settings ?
  • In preliminary, it is very important to understand how xili-floom-slideshow works to avoid bad side effects. The insertion of specific js (domready) is done when wp_footer() is called so after counting the floom shortcode.
    For the settings, if not in shortcode, try to find in postmeta of displayed post and finally keep those in plugin’s setting.

  • Another important thing is to prepare the style.css of the theme or the floom.css in subfolder floom/css inserted in the theme. (don’t modify the css in plugin, use it as example.

What happen when iPhone or iPod visit the website ?

As you know, flash is not compatible with iPhone, but javascript and Floom is !
If xilitheme-select plugin is activated, the theme for iPhone is selected and the floom.css inside this theme is choosen. see snapshot.

Is xili-floom-slideshow plugin compatible with other plugins based on Mootools ?

Yes, but be aware to add a special function in your functions.php. See example here.

Is is possible to display progressive texts ?

Yes, by creating a line by line image series like here.

Is is possible to display more than one floom in a webpage or a singular post ?

Yes, but don’t forget that the theme css must contains all div styles for each slideshow (with unique id).

What happens with default divs (frame and blinds) when more than one ?

xili-floom-slideshow plugin creates unique ids based on the default one : blinds-cont, blinds-cont-2,… and blinds, blinds-2,… (to be also compatible with previous versions).

Support Forum or contact form ?

Effectively, prefer forum to have support (with delay around one or two days – here European Time).


1.3 (2014-04-18)

  • few improvements for WP 3.9


  • fixes and notice for WP3.5.1

1.1 (2012-07-22)

  • setting to choose images size (default full or as (large, medium, thumbnail) and those defined by add_image_size(); )

0.9.8, 0.9.9

  • now possible to have more than on floom (via shortcode) on a webpage. Improved and more params in shortcode [xilifloom].

0.9.6, 0.9.7

  • OOP source code
  • new like function because changes in WP 3.0 when naming file and slug of attachment images. Possible to choose post column (post_name or guid or…) to sub-select by floom_subname
  • developers using global $xilifloom_name_selector must change to function set_xilifloom_name_selector() – see code at end of source


  • integrate child theme better


  • add thumbnail bar with Shortcode [xilifloombar]


  • update query with subname as LIKE in sql (need now % char in custom fields).
  • add Gold functions and ability to use child class of floom.
  • some fixes


  • add for pictures orderby menu_order
  • add hooks and filter
  • add container and display params
  • fixes (quoted captions)


  • xilitheme-select plugin compatibility (for iPhone),
  • add options to fireEvents,
  • fixes,…


  • first public release

© 2014-04-18 MS dev.xiligroup.com

Contributors & Developers

This is open source software. The following people have contributed to this plugin.


Browse the code