xiligroup dev

[xilifloom frame_id="blinds-contv2"]

A short description of the frame (div containing frame and images)

[caption id="attachment_1276" align="alignnone" width="300" caption="the divs of the demo - blue borders"][/caption]
In this snapshot (as in plugin’s post), some div html tags are visible. Outside, the div with id named « blinds-cont ». Just around the image, the div named « blinds ».
The corresponding extract of css is:

#blinds-cont { -webkit-box-shadow: 0 0 20px #000; background: url(bg.png) 0 0 no-repeat; margin: 20px auto; padding: 12px 0 0 0; font-family: 'Georgia', 'Arial Narrow', 'Arial', sans-serif; height: 254px; -moz-box-shadow: 0 0 20px #000; width: 620px; }
#blinds-cont #blinds { margin: 0 auto; background: url(spinner.gif) 50% no-repeat; height: 204px; width: 596px; }
#blinds-cont #blinds .floom_slice { z-index: 10; }
#blinds-cont #blinds .floom_caption { text-shadow: 0 1px 0 #fff; font-size: 1.0em; color: #333; font-style: italic; position: relative; text-align: center; width: 100%; top: 15px; }
#blinds-cont #blinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; }
#blinds-cont #blinds .floom_container { overflow: hidden; border-bottom: solid 1px #fff; border-top: solid 1px #666; }
#blinds-cont #blinds .floom_vertical { float: left; }

In this horizontal demo case, the frame contains a shadowed border (visible in Safari or Mozilla) and a background frame image with a large bottom part for title of image.

Which are the characteristics here?

The ID (#) « blinds-contv2 » is set (and used in shortcode). the image (#blinds) div has height and width equal to size of series of images. The container (frame) is a little bigger to create a border especially on bottom for description.
Here before to create a new one, the frame don’t use image as background. It is only black.
The resulting second part of the floom.css is:

#blinds-contv2 { -webkit-box-shadow: 0 0 10px #000; background: #000; margin: 20px 30x 20px; padding: 10px 0 0 0; font-family: 'Georgia', 'Arial Narrow', 'Arial', sans-serif; height: 550px; -moz-box-shadow: 0 0 20px #000; width: 324px; float:left;}
#blinds-contv2 #blinds { margin: 0 auto; background: url(spinner.gif) 50% no-repeat; height: 427px; width: 320px; }
#blinds-contv2 #blinds .floom_slice { z-index: 10; }
#blinds-contv2 #blinds .floom_caption { font-size: 1.0em; color: #ddd; font-style: italic; position: relative; text-align: center; width: 100%; top: 15px; }
#blinds-contv2 #blinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; }
#blinds-contv2 #blinds .floom_container { overflow: hidden; border-bottom: solid 1px #999; border-top: solid 1px #666; }
#blinds-contv2 #blinds .floom_vertical { float: left; }

Title and description

[caption id="attachment_1279" align="alignnone" width="348" caption="Custom Fields"][/caption]
As you know, each image uploaded to WordPress can be described with a title, a caption (alt) and a description. By default, embedding by plugin use title of attachment. To use both, custom field named ‘floom_title_desc‘ is set to 3. (1= title, 2=description).

To conclude temporarily…

Hope this short text will invite you to better understanding of this marvelous tool and ’embedder’ xili-floom-slideshow plugin. But you need to create your own design adapted to your theme.
 

M. from dev.xiligroup
 
 
[xiliinseries]
 

[xilifloom]
xili-floom-slideshow integrates the Floom slideshow in wordpress theme.
[tabs-group]
[a-tab tabtitle="Description"]
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()

  inside functions.php.

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

[/a-tab]
[a-tab tabtitle="New !"]

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
[/a-tab]
[a-tab tabtitle="Installation"]

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…
[/a-tab]
[a-tab tabtitle="F.A.Q"]

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.

[/a-tab]
[a-tab tabtitle="Screenshots"]

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).
[/a-tab]
[a-tab tabtitle="Other notes"]

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
[/a-tab]
[a-tab tabtitle="Download"]
the readme file ( see here )
WordPress Repository (beta) : xili-floom-slideshow
[/a-tab]
[/tabs-group]
 
 
[xiliinseries]