xili-floom-slideshow : a plugin to install famous floom (0.9.3 beta)

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.

prerequisite

• * Minimun knowledges in WordPress architecture (and css).
• * If others plugins use mootools, some modifications must be done through a added function named

  xilifloom_theme_header()

  xilifloom_theme_header()

  inside functions.php.

• * Images for a slideshow must be selected with great precaution. (Same size adapted to the frame)

new 0.9.3

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.

0.9.2

• * 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. see screenshot
• * 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]

0.9.1 (beta)

– A lot of new properties and features will be soon commented.
– xilitheme-select plugin compatibility (for iPhone).
– A new demo is explained here.
– A example of css and pictures frame (bg image).

0.9.0 (beta)

First public release shipped Nov, 19th

Installation

1. Upload the folder containing `xili-floom-slideshow.php` and other sub-folders and files to the `/wp-content/plugins/` directory.
2. Activate the plugin.
3. If you want to personalize the look and size of the frame of the slideshow, don’t modify the default css and files present inside plugin’s folder. Create a floom folder (and a css sub-folder) inside your current theme. Inside this, copy the floom.css, spiner.gif and frame bg image that you can adapt. xili-floom-slideshow plugin will detect automatically this folder.

Personalizations

What ? if other plugins use mootools js framework

Just add a function named `xilifloom_theme_header` in functions.php of the current theme and the needed enqueues … and the action `wp_print_scripts` adapted with the other plugins…

function xilifloom_theme_header() {
			wp_enqueue_script('floom',FLOOMURL.'/js/floom-1.0.js',array('mootools-core','mootools-more'),'1.0');
}
if(!is_admin()) {
	if (function_exists('xilifloom_default_settings')) 
			add_action('wp_print_scripts', 'xilifloom_theme_header');
 
}

Settings for only one post

Some **Custom fields** are possible: `floom_divs` to set id of the div containing images ; `floom_captions` (true or false) to display or not the caption (title) of the images ; `floom_progressbar` (true or false) to show (or not) the progress bar. `floom_title_desc` is set by default to 1 and display the title of the attached images. (2 : only the description and 3 : both title and description).

* `floom_parentID` to choose attachment from another post (and not the current post where slideshow in inserted)
* `floom_subname` to sub-select a series of pictures attached by set a mask (use % as LIKE in SQL %img or %pict%…) [See post].
* `floom_container` to inform name of container (default : blinds-cont).
* `floom_display` to decide if the container is displayed when no image (block or none) – default : block.

The following custom fields (prefix floom_) work like javascript parameters. Use them with caution..

* `floom_amount` (number of blinds)
* `floom_interval` (interval between change)
* `floom_axis` (by default : vertical)

It is also possible to fireEvent (onSlideChange and onPreload) by choosing name of fired functions (javascript added by functions in current theme).

**Gold parameters**
If active in plugin settings, a wide range of features are open for special js effects on first or last slide and on other events of the child class… [see this post]

= xilitheme-select plugin compatibility (for iPhone) =
As in this website [dev.xiligroup.com], it is now possible to specify a floom.css in each theme (the for desktop, the for mobile as iPhone or iPod).

Don’t forget to verify that version of mootools (core and more) are >1.2.2.

More infos soon…

Is is 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).

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

Yes, but be aware to add a special function in you functions.php. See example [here] (soon).

Support Forum or contact form ?

Effectively, prefer forum to obtain some support.

1. Settings page.

2. Folder example in current theme.

3. Blinds during transition between two images (snapshot from Oskar example).

4. Example in iPhone Safari.

5. Ordered list of images (only these in slideshow are affected).

What about fireEvents by Floom ?

If a js function called by Floom is named `dothisthing(s)` just add in xili-floom-setting the name `dothisthing` as value of one of the two available fireEvents as `onSlideChange`. (the param passed by floom is the current image object). See this amazing post !
 
 
It is more a beta version; soon more docs about powerful features…
© 2009-12-05 MS dev.xiligroup.com

the readme file ( see here )
WordPress Repository (beta) : xili-floom-slideshow