xili-floom-slideshow plugin : one example of a picture frame

November 22, 2009 - 17:00 - -
News • Plugins WP • xili-plugins - [Update = December 15, 2009 - 10:39]

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

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

Values in custom fields


* progressbar is set by default to false (processor cycle consumer) but here, only in this post, it is set to true. 
 
This article belongs to the series below
  1. xili-floom-slideshow : a plugin to install famous floom (0.9.3 beta)
  2. xili-floom-slideshow : the mystery of css revealed !
  3. xili-floom-slideshow plugin : one example of a picture frame
  4. xili-floom-slideshow : fireEvent when picture changes ! (updated)

 

Tags: ,
No Comments »

TrackBack URI

Leave a comment