With now WordPress 3.0, the default theme named twentyten can be used without php coding for a multilingual site [as shown here]. xili-language plugin works on mono or multisite mode.

• * some functions are improved through new hooks (front-page selection without source coding for webmasters).
• * fixes unexpected rewritting (when permalinks is set) and fixes query of category without languages.
• * For developers: `xiliml_cur_lang_head` filter is now obsolete and replace by `xiliml_curlang_action_wp` – see code source – the mechanism for frontpage (home recent posts list or page) is changed and don’t now use redundant queries.
• * For developers: if you use `xili_language_list` hook action to create your own list – verify it if you use page as frontpage because ‘hlang‘ querytag is now obsolete.
• * Latest version compatible with WP 2.9.x

Soon more infos in the renewed readme and new posts…

The readme.txt of 1.7.0

This site itself (monosite mode) and this demo (and new documentation) website (in multisite mode) are running under 3.0 and under xili-language 1.7.0. Some features of xili-language are also commented on this website.

Only some properties are added to the post.

One is the language of the post set by the author. (see on the top right of pictures below)

The others are link to the similar posts in other languages. « Similar » means that linked posts are not always an exact translation of the original. Sometime it is only a summary or an adaptation.

For the author or editor, it is important to have a good browser with tabs or one large, wide screen or two displays.

As exercise, I will try to illustrate how a post and his translation are published in post edit dashboard of WP.

Note #1: It is better to have prepared before the two texts with a simple text editor and use copy and paste.
Note #2: If it concerns existing posts that need to be checked in specific languages or linked posts, see end of this post.

The original in english:

Fill the title, content, excerpt etc.. tags and categories… and check english in post’s language box.
and save it…

the first post in english

(tip: don’t forget to use UI features and move the boxes on the top right near the title)

The linked post in french:

Since 1.3.0, with one click, it is possible to create a new post in another window of the browser. (tip: use the right mouse button, to open the Add New link in another tab – your desktop will be cleaner).

The linked post in french in second tab

In the edit window of the new post, just add the french title, observe that link to previous post and language are prefilled or checked and just now click ‘save draft button’. and continue to fill content and excerpt, tags and categories

(trick: If you go back to the browser’s tab of the original english post, you can save it again, and you will see the changing in linked post box)

The linked post is now saved

And now you are able to continue to write the both posts each one in his language if you are yourself bilingual or by copying the draft of the two authors.
 
 

What happens when working on existing posts ?

First thing: check his language in Post (page) ‘s language box and save or update.
Second thing: If you know the IDs of linked posts in other languages fill the input inside the small table of Linked posts box and save or update.
And since 1.4.1, useful if the linked posts exist and contain link to this current post, just check ‘auto search’, save or update and when UI is refreshed, the inputs are prefilled with IDs of existing other posts linking to this current. Verify, Save or update.
Why « check » option is not checked as default ?
To avoid unnecessary queries. As Editor, check it only if you decide when it is necessary.

Linked posts or pages box in Post Edit UI

Without changing or adding specific template tags, the_time(), the_modified_time() and other functions are hookable by xili-language.

The « hooking » functions are placed inside the xilidev-libraries (see this post).

function xiliml_comment_date($comment_time,$d = '') {
  /* params no used because php format */
  /* the first param is to be as msgid in .po example: %B %d, %Y - %H:%M or %B %d, %Y at %H:%M   */	
  return the_xili_local_time('%B %d, %Y', strtotime(get_comment_time ('m/d/Y H:i'))); 
  /* impossible to use get_comment_date as it is itself filtered*/
}
add_filter('get_comment_date','xiliml_comment_date',10,2);
 
 
function xiliml_date($thetime,$theformat) {
  /* param no used because php format */	
  return the_xili_local_time('%B %d, %Y - %H:%M',strtotime(get_the_time('m/d/Y H:i')));
}
add_filter('the_time','xiliml_date',10,2);
 
function xiliml_modified_date($thetime,$theformat) {
  /* param no used because php format */	
  return the_xili_local_time('%B %d, %Y - %H:%M',strtotime(get_the_modified_time('m/d/Y H:i')));
}
add_filter('the_modified_time','xiliml_modified_date',10,2);

Basically WordPress uses php date() format – http://fr2.php.net/manual/en/function.date.php – and and internal static translation tools.

In the hooking function and in date format translation, the format depending of setlocale is used. See – http://fr2.php.net/manual/en/function.strftime.php –

With this way and if the server is well configured, the live translation of date / time works well.

For the .po file, the msgid format is ‘%B %d, %Y – %H:%M‘ and his translation in french can be ‘%d %B %Y – %Hh%M‘

FAQ

* Why are these hooks inside the xilidev library and not inside the plugin itself ?

Because the webmaster can modify it and the modifications will be not erased when the plugin is updated. (Don’t forget to check (and activate) this library in admin plugin’s UI)

xilidev or gold functions

Because they need big translation and lot of lines. So it was better to bypass it and insert more flexible properties.

* In the_time() how to suppress the time ?

Just modify the string ‘%B %d, %Y – %H:%M’ in ‘%B %d, %Y’ .

* What do the function the_xili_local_time() ?

This function inside the plugin translates a generic numeric date according current language of the post or the theme’s live language.

* On my website, I use different patterns inside the_time() depending category or single or… What do you recommend ?
Inside the filter function, add php ‘switch case‘ lines analyzing the $theformat passed (php format) and deliver – according these – the first param of the_xili_local_time() a setlocale format with %. It is indeed easy to choose a result with or without hour:min. After you have defined the list of format, don’t forget to translate them in .po (and .mo) of each language.

Gold functions

Gold functions

In sidebox « Settings », a new check button appears if a folder named xilidev-libraries and containing a functions.php file was present inside your wp/content/plugins/ folder.
If this button is checked, all the functions inside this file was added when plugin is activated. Why it is interesting ? When adding here special filters or actions for hookable template tags of xili-language, you don’t need to copy and paste your functions of one theme to another theme.

New functions in core of xili-language

Two new functions was added for developers (since February – 3 new for time display) :
xiliml_get_lang_object_of_post($post_ID) Return an object containing properties of the language set to the post passed as param (false if the post don’t exist or undefined language) See code for more infos.
xiliml_get_language($lang_nameorslug="") Return an object containing properties of the language passed as slug (ex fr_fr) or name (ex fr_FR). False if the language doesn’t exist. $result->description gives the full name of the language set by you in xili-language settings.

To illustrate these new features, please find an example of functions.php here containing only two functions to create a shortcode named linkpost.

<?php
/**
 * shortcode to insert link to post in other languages inside the content 
 * example : [linkpost lang="fr_FR"]link to french similar post[/linkpost] (if title="some text" : title of link is set by replacing title 'A similar post in...')
 *
 *
 *@since 1.2
 */
function xiliml_build_linked_posts_shortcode($atts,$content=null) {
	global $post;
	$arr_result = shortcode_atts(array('lang'=>'','title'=>''), $atts);
	extract($arr_result);
	$language = xiliml_get_language($lang); /* test if lang is available */
 
	if ($language !== false) {
		$otherpost = get_post_meta($post->ID, 'lang-'.$language->slug, true);
	}
 
	if ($otherpost) {
		if ('' == $title) {
			$obj_lang = xiliml_get_lang_object_of_post($otherpost);
			if (false !== $obj_lang) {
				$description = $obj_lang->description;
				$title = __('A similar post in',THEME_TEXTDOMAIN).' '.$description;
			} else {
				$title = __('Error with target post #',THEME_TEXTDOMAIN).$otherpost;
			}
		}
		$output = '<a href="'.get_permalink($otherpost).'" title="'.$title.'">'.$content.'</a>';
		/* this link above can be enriched by image or flag */
	} else {
		$output = '<a href="#" title="'.__('Error: other post not present !!!','xili-language').'">'.$content.'</a>';
	}
	return $output;
}
add_shortcode('linkpost', 'xiliml_build_linked_posts_shortcode');
 
?>

Please find here a .zip containing the folder « xilidev-libraries » to upload in wp-content/plugins/ directory and this example functions [enriched since Feb 28th, 2010].
 
 

This table is a summary of the « technical » features of xili-language plugin and is dedicaced to webmaster and theme’s designer.

Toolbox: xili-language plugin for a multilingual website in one table
Name	Definition	Comment	Example	Concern
WIDGETS	to enrich widget enable themes			Theme
Languages list	Display the list of available languages	Multiple widgets possible. If your theme contains functions that offer widget personalization, the item type must be filled. (see this post)		sidebar
Recent comments	Display the list of recent comments in current displayed language.	This widget was created because the default one cannot be translatable or offer sub-selection in one language. multiple widgets possible		sidebar
Recent posts	Display list of recent posts in a choosen language	since v 1.4.0 for WP >2.8 This new widget solves conflicts or issues occuring when WP default widget is present (contains an obscur `wp_reset_query`). Also a choice of language of this list of recent posts is possible – not necessary the same of the current page. And you can install multiple widgets. Replace WP Recent Widget by this one named – List of recent posts - multiple widgets possible with different languages (fixed or dynamic)	----	sidebar
TEMPLATE TAGS	usable by theme’s designer and webmaster			Theme
xiliml_the_other_posts default parameters: ($post_ID,$before = « This post in », $separator = « , « , $type = « display »)	in loop display the link of other posts defined as in other languages	can be used in theme template in single.php under the title * example: if(class_exists(‘xili_language’)) xiliml_the_other_posts($post->ID) (in the example, the default template tag was hooked to display flag – see hooks rows below)		post – page – loop
xili_post_language default parameters: ($before = ‘<span class= »xili-lang »>(‘, $after =’)</span>’)	in loop display the language of the post	Useful inside a multilingual category loop.	<div class="postsubtitleinfo"> <small><?php the_time(); /*__('F jS, Y','xilidev')*/ echo "&nbsp;-&nbsp;"; if (class_exists('xili_language')) xili_post_language(); ?></small></div>	loop, category, search
xili_language_list default parameters: ($before = ‘<li>’, $after =’</li>’, $theoption= »)	outside loop (sidebar) display the languages of the site (used also by widget)	When the theme don’t enable widget. Use this template tag to display the list in sidebar or (header and footer)	<h2><?php _e('Languages','xilidev') ?></h2> <ul class="langs"> <?php if (function_exists('xili_language_list')) { xili_language_list('<li>','</li>','siderss'); } ?> </ul>	sidebar
xiliml_the_category default parameters: ($post_ID, $separator = ‘, ‘ ,$echo = true)	replace the_category() tag of WP Core	The current template tag the_category is not hookable by plugin. So here the categories list of a post inside loop will be translated according the language of the current post.	<p class="postmetadata"><?php the_tags(__('Tags: ','xiliips'), ', ', '<br />'); echo " "; _e('Posted in','xiliips'); echo " "; if (class_exists('xili_language')) { xiliml_the_category(get_the_ID(),', '); } else { the_category(', '); } ?> | <?php edit_post_link(__('Edit','xiliips'), '', ' | '); ?> <?php comments_popup_link(__('No Comments &#187;','xiliips'), __('1 Comment &#187;','xiliips'), __('% Comments &#187;','xiliips')); ?></p>	post – page – loop
xiliml_langinsearchform default parameters: ($before= »,$after= »)	Template Tag insertable in search form for sub-selection of a language	As in example, this function add a way to limit the search to a target language.	<h2><?php _e('Search','xilidev') ?></h2> <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">   <input type="text" name="s" id="s" size="15" value="<?php the_search_query(); ?>" />   <input type="submit" value="<?php _e('go','xilidev'); ?>" /><br/> <?php if(function_exists('xiliml_langinsearchform')) xiliml_langinsearchform ('<span class="radiosearch" >','</span>') ?>   </form>	search – sidebar
FUNCTIONS	usable by developer with knowledges in php (see php source)			CMS
the_curlang()				theme
the_cur_langs_group_id()
the_xili_local_time default parameters: ($format=’%B %d, %Y’,$time = null)				time
get_cur_language ($post_ID)	Return the language of current post in loop		see below	loop
get_cur_post_lang_dir ($post_ID)	Return the lang and dir of language of current post in loop.	The example on right uses this tag and the above one.	while (have_posts()) : the_post(); $langdir = ((function_exists('get_cur_post_lang_dir')) ? get_cur_post_lang_dir($post->ID) : array()); ?> <div class="story <?php echo $langdir['direction'] ?> <?php echo 'borders_'.get_cur_language($post->ID); /*style*/ ?>">	loop
xiliml_get_lang_object_of_post ($post_ID)	Return language object of a post.			loop
choice_of_browsing_language()	Return the language of current browser.			visitor’s browser
choice_of_browsing_lang_dir()	Return the lang and dir of current browser.			visitor’s browser lang and direction
add_again_filter ($filtername,$filterfunction)	Activate hooks of plugin in class.	Reserved for high level developers – see code of function below
xiliml_get_category_link ($catid = 0)	Replace get_category_link to bypass hook from xili_language
xiliml_recent_comments	Recent comments – used by xili widget – usable if you need to create your own template tag			comments
xiliml_get_language ($lang_nameorslug= »")	Return full object of a language
ex_pages_by_lang ($pages, $r)	sub selection of pages for wp_list_pages()	example to use as hook		sidebar
function xiliml_force_loop_lang ($lang_query_tag)	functions to change loop’s query tag of language	useful for sidebar widgets and latest posts widget – since 1.3.0 Even if the main loop is in one language, in the sidebar, it is possible to « force » the language in another one for the widgets.	<?php xiliml_force_loop_lang("fr_fr"); if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar top')) : ?> <ul> <li>?</li> </ul> <?php endif; xiliml_restore_loop_lang(); ?> <?php xiliml_force_loop_lang("en_us"); if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar topus')) : ?>   <ul> <li>?</li> </ul> <?php endif; xiliml_restore_loop_lang(); ?> Another example : <?php //echo the_curlang(); /* in this case, the widgets are forced as current lang of the theme - useful in home when query tag 'lang' is not defined -*/ xiliml_force_loop_lang(the_curlang()); if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar top')) : ?> <ul> <li>?</li> </ul> <?php endif; xiliml_restore_loop_lang(); ?>	sidebar, widget
xiliml_restore_loop_lang ()	functions to restore loop’s query tag of language	see above	Snapshot of example above	sidebar, widget
xiliml_add_lang_to_parsed_query ()	function for filter ‘parse_query’ to authorize lang query tag in custom WP_Query()	since 1.4.0 useful for function or plugin that put posts inside post…	/* example: */ add_action('parse_query','xiliml_add_lang_to_parsed_query'); $r = new WP_Query($thequery); remove_filter('parse_query','xiliml_add_lang_to_parsed_query');	loop, custom queries
SHORTCODE
linked post	example of shortcode using plugin functions	this code can be inserted in dedicaced functions detectable inside this folder: wp-content/plugins/xilidev-libraries – see this post –	(<em>[linkpost lang="fr_FR"]Cette page en français[/linkpost]</em>)	post content
HOOKS	Main functions and template tags of xili-language are modifiable by hooks to have better and adapted CMS behaviour. It is useful for developer with deep knowledges in php and wp (see end of php source)			CMS
xiliml_the_category add_action (‘xiliml_the_category’,'your_xiliml_the_category’,10,3)				template tag
xiliml_the_other_posts add_action(‘xiliml_the_other_posts’,'your_xiliml_the_other_posts’,10,3)				template tag
xili_post_language add_action(‘xili_post_language’,'your_xili_post_language’,10,2)				template tag
xili_language_list add_action(‘xili_language_list’,'your_xili_language_list’,10,3)			In this example described formerly, the list of languages is enriched by flags: function my_xili_language_list($before = '<li>', $after ='</li>',$theoption) { global $wp_query; if ($theoption == 'top') { /* usable in type item in new multiple widget */ $listlanguages = get_terms_of_groups_lite (the_cur_langs_group_id(),TAXOLANGSGROUP,TAXONAME,'ASC'); $a =''; $currenturl = get_bloginfo('siteurl').'/?'; foreach ($listlanguages as $language) { //QUETAG if ($language->slug != 'ar_ar' && $language->slug != 'ar_ma') { $a .= $before ."<a href='".$currenturl."hlang"."=".$language->slug."' title='".__('Latest posts selected',THEME_TEXTDOMAIN)." ".__('in '.$language->description,THEME_TEXTDOMAIN)."'>"." <img src='".get_bloginfo('template_directory')."/images/flags/".$language->slug.".png' alt='' /></a>".$after; } } echo $a; } else { /* the current list in sidebar with category sub selection*/ if (is_category()) { $catcur = xiliml_get_category_link(); $currenturl = $catcur.'&amp;'; } else { $currenturl = get_bloginfo('siteurl').'/?'; } $listlanguages = get_terms_of_groups_lite (the_cur_langs_group_id(),TAXOLANGSGROUP,TAXONAME,'ASC'); foreach ($listlanguages as $language) { if ($language->slug != 'ar_ar' && $language->slug != 'ar_ma') { if ($before=='<li>') { if (the_curlang() == $language->slug) { $beforee = '<li class="current-cat" >'; } else { $beforee ='<li>'; } } $a .= $beforee ."<a href='".$currenturl.QUETAG."=".$language->slug."' title='".__('Posts selected',THEME_TEXTDOMAIN)." ".__('in '.$language->description,THEME_TEXTDOMAIN)."'>"." <img src='".get_bloginfo('template_directory')."/images/flags/".$language->slug.".png' alt='' /> ". __('in '.$language->description,THEME_TEXTDOMAIN) ."</a>".$after; }   } if (is_category()) { $currenturl = xiliml_get_category_link(); $a .= $before."<a href='".$currenturl."' title='".__('Posts of current category in all languages',THEME_TEXTDOMAIN)."' >"." <img src='".get_bloginfo('template_directory')."/images/flags/www.png' alt='' /> ".__('in all languages',THEME_TEXTDOMAIN)."</a>".$after; } echo $a; } } add_action('xili_language_list','my_xili_language_list',10,3);	template tag
xiliml_langinsearchform add_action(‘xiliml_langinsearchform’,'your_xiliml_langinsearchform’,10,2)				sidebar
xiliml_cat_language add_filter(‘xiliml_cat_language’,'my_rules_for_cat_language’,2,3);			Exemple to show translated and original item function my_rules_for_cat_language ($content, $category = null, $curlang='') { if (!is_admin()) : /*to detect admin UI*/ $new_cat_name = __($category->name,THEME_TEXTDOMAIN); if ($new_cat_name != $content) : $new_cat_name .= " (". $content .") "; endif else : $new_cat_name = $content; endif; return $new_cat_name; } add_filter('xiliml_cat_language','my_rules_for_cat_language',2,3);	sidebar wp list categories content
head_insert_language_metas add_filter(‘head_insert_language_metas’,'my_head_insert_language_metas’,1,2);				header xhtml
head_language_attributes add_filter(‘head_language_attributes’,'my_ head_language_attributes’,1,1);				header xhtml
xiliml_cur_lang_head add_filter(‘xiliml_cur_lang_head’,'my_xiliml_cur_lang_head’,1);			default rules – set curlang in head according rules	multilingual behaviour (front, cat, search,…)
More technical hooks and filters inside xili-language (Read the plugin php source for more infos)
choice_of_browsing_language
xiliml_link_translate_desc
xiliml_single_cat_title_translate			used by filter for wp_title() tags – since 1.4.1
xiliml_getarchives_where
xiliml_getarchives_join
xiliml_modify_querytag
xiliml_taglink_append_lang
xiliml_link_append_lang
OTHER FILTERS	Some template tags inside WP core are not fully multilingual and need filters.
the_time add_filter(‘the_time’,'my_date’,10,2);		Date management and translation are very complicated. Here by using a xili-language function, it is possible to modify the basic behaviour of the current template tag the_time.	function my_date($thetime,$theformat) { /* param no used because php format */ return the_xili_local_time('%B %d, %Y - %H:%M',strtotime(get_the_time('m/d/Y H:i'))); } add_filter('the_time','my_date',10,2);	Post, Page
the_modified_time add_filter(‘the_modified_time’,'my_modified_date’,10,2);		Date management and translation are very complicated. Here by using a xili-language function, it is possible to modify the basic behaviour of the current template tag the_modified_time.	function my_modified_date($thetime,$theformat) { /* param no used because php format */ return the_xili_local_time('%B %d, %Y - %H:%M',strtotime(get_the_modified_time('m/d/Y H:i'))); } add_filter('the_modified_time','my_modified_date',10,2);	Post, Page
get_comment_date add_filter(‘get_comment_date’,'my_comment_date’,10,2);		This is the date of each comments in the comments loop.	function my_comment_date($comment_time,$d = '') { /* params no used because php format */ /* the first param is to be as msgid in .po example: %B %d, %Y - %H:%M or %B %d, %Y at %H:%M */ return the_xili_local_time('%B %d, %Y', strtotime(get_comment_time ('m/d/Y H:i'))); /* impossible to use get_comment_date as it is itself filtered*/ } add_filter('get_comment_date','my_comment_date',10,2);	Comments
© dev.xiligroup.com	2010

 
 
Please use the forum for questions or comments.
 
 
 
 

xili-language shortcode

Don’t forget to verify that language of current post and language of linked post (or page) is set in left meta-box.

The first report :

What is wished?

Step by step

var xiliFloom = new Class({
    Extends: Floom,
    options: {
        stopandgo: 0,
        originwrap : $empty,
        onFirst:     $empty,
        onLast:     $empty,
        onClickWrapper:     $empty,
        onInvader:     $empty
    },

initialize : function(wrapper, slides, options) {
        this.parent(wrapper, slides, options);
        this.options.originwrap = wrapper; 
        $(wrapper).addEvent('click', function(){
            this.options.stopandgo = 1 - this.options.stopandgo;
            if (this.options.stopandgo === 0) {this.restart();}           
            if (this.options.stopandgo == 1) {$clear(this.periodicalblinds);}
            this.fireEvent('onClickWrapper', this.options.stopandgo, 10);
        }.bind(this));    
    },

createCaptions: function(){
        this.parent();
        this.captions.addEvent('mouseenter', function(){
            this.mouseinvader();
            }.bind(this));   
    },
    step: function() {
        this.parent();
        if (this.current.slide == this.slides.length-1) {this.fireEvent('onLast', [this.slides[this.current.slide],this.current.slide]);}
        if (this.current.slide === 0) {this.fireEvent('onFirst', this.slides[this.current.slide]);}
    },

restart: function() {
        wrapper = $(this.options.originwrap);
        $(this.options.originwrap).empty(); 
        this.createStructure();
    }, 
    goto: function(e){
    	if (e < this.slides.length+1) {
        	this.current.slide = e-1;
        	this.step.delay(this.options.animation, this); 
    	}       
    },
    mouseinvader : function() { 
        this.fireEvent('onInvader',[this.slides[this.current.slide],this.current.slide],10);    
    }
 
});

Before to conclude

onPreload: function(){
        this.periodicalblinds = this.animateBlinds().periodical(this.options.interval, this); //XF
 
        this.fireEvent('onPreload', this.slides[this.current.slide]);
    },

domready

// Floom or xiliFloom
				theFloom = new <?php echo $xili_settings['goldparam']; ?>Floom('<?php echo $floom_divs; ?>',slides, {
				prefix: '<?php echo $xili_settings['prefix']; /* only global settings */?>',
				amount: <?php echo $amount; ?>,

WordPress Expert Corner

function xilifloom_theme_header () {
		/* option if mootools is elsewhere */	
			wp_enqueue_script('mootools-core',FLOOMURL.'/js/mootools-core.js','','1.2.4');
			wp_enqueue_script('mootools-more',FLOOMURL.'/js/mootools-more.js',array('mootools-core'),'1.2.4.2');
                        wp_enqueue_script('floom',FLOOMURL.'/js/floom-1.0.js',array('mootools-core','mootools-more'),'1.0');
			wp_enqueue_script('xilifloom',get_bloginfo('template_directory').'/js/xilifloom-1.0xf.js',array('floom'),'1.0xf');
			// and other js.... for events....		
	}
	add_action('wp_print_scripts', 'xilifloom_theme_header');

• First Picture
• Second Picture
• Third Picture

A detail of the first image :  
Ut praessectet ipisci ea faci blamconse feugue ver se ea aliquip ustin et ulput landreet, sequatum dolobore min volore exeriusto doloreet am alisismolore modipit lore dio euissim at vel euguero od magnit, quismod modolore faccumsandio commodio dit utem volor iriureet eum dipisci cidui blaore doluptat. Ut veliquatum irit prat.

A zoom of the second image :  
Lore del iuscin ut alit wisi tet volutat veniamet lummy nis adionsecte faccum incillummy nostrud tat, veliquat praesent nonullam diatumsan heniscipsum nullandre ming essismod er accum doloreet venis dipit dolor ad modolortion henisismodit praessi blan esseniat.

A zoom of the third image : 
Lorperos esto odo dion hent augue facin velesectet, quat wissi esto od magniss quipit il in velit iliquis aut ip eugiat. Ut ipit loreet, susto commy nibh ent velenis nis am veliquat vel ullutat ing et iure facil in ex eui euguero eugueros exercil deliquam venibh eum vel in et, quis nim in henis do erosto conulluptat nonsequi blamet vel ut utetum quamet, sum velesequip et, susto consequ ssenit veliquam zzriustrud min hent lor inci exeriliquat ip euipsum vent lummy nibh eum quate ea facipit diamet ea commy nullaore ea adiam dit duis ad dipis esed euguer sumsandiamet deliquat aliquatuer se dolore eugiat.

How to ?

<script type="text/javascript">
<!-- 
	function nextslidingtab(slide) {
		if ($chk($('idoftargetobject'))) {
			yourfunction();
		}
	}
	function preloadfired(slide) {
		if ($chk($('idoftargetobject'))) {
			initfunction();
		}
	}

xili-floom js function settings

Detailled example of a slideshow (background image and css)
(If Safari browser is used, after each slides loop: a little silly surprise – css changed by event fired)
In this example for images (420px 315px), a special frame was created (width 480px). (it is compatible with default current theme (kubrik). (download the png)

and a specific part of css added (to add in the floom.css uploaded in floom/css/ sub-folder of current theme).

/* example with frame cadre_demo and images 420 x 315 - overall width 480 */
#blinds-cont-d { -webkit-box-shadow: 0 0 12px #220; background: url(cadre_demo.png) 0 0 no-repeat; margin: 20px auto; padding: 26px 0 0 0; font-family: 'Georgia', 'Arial Narrow', 'Arial', sans-serif; height: 391px; -moz-box-shadow: 0 0 20px #000; width: 480px; border-radius: 6px; -webkit-border-radius: 6px; -opera-border-radius: 6px; -moz-border-radius: 6px;}
#blinds-cont-d #blinds { margin: 0 auto; background: url(spinner.gif) 50% no-repeat; height: 315px; width: 420px; }
#blinds-cont-d #blinds .floom_slice { z-index: 10; }
#blinds-cont-d #blinds .floom_caption { text-shadow: 0 1px 0 #fff; font-size: 1.0em; color: #333; font-style: normal; position: relative; text-align: center; width: 100%; top: 20px; }
#blinds-cont-d #blinds .floom_caption span.floom_desc {font-size:80%; font-style: italic;}
#blinds-cont-d #blinds .floom_progressbar { font-size: 1px; background: #97997E; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 12px; }
#blinds-cont-d #blinds .floom_container { overflow: hidden;}
#blinds-cont-d #blinds .floom_vertical { float: left; }

floom sub-folder in theme

Because the id is blinds-cont-d, the shortcode must be :

[xilifloom frame_id="blinds-cont-d"]

To see progressbar and for each image read title and description, custom fields are set like here:

Values in custom fields