xili-floom-slideshow : the mystery of css revealed !

Publié le November 21, 2009 par xiligroup dev  - 

introduction

On the left, there is a floom slideshow embedded inside the content of this post. Some characteristics: images are « portrait » (320 x 427 pixels). The title is followed by a description. The frame is black with a small shadow.
As described in documentation, all the images (©MSC 2009) are attachments of this post (but are not inserted in the current content).
Only a shortcode is inserted at the top of the post’s content before this text.

[xilifloom frame_id="blinds-contv2"]

Because here the properties are different, the parameter ‘frame_id’ is set to « blinds-contv2 » (this id is present in the floom.css present inside the current theme.
As you can see the post contains also images after this paragraph. So, to avoid insertion of them inside slideshow, the custom field « floom_subname » is set to « img » because name of files of series contains img but not the other for explanations. The order of images in wp gallery is also used to sort the series.

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

the divs of the demo

the divs of the demo - blue borders


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

Custom Fields

Custom Fields


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
 
 

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)

 

Ce contenu a été publié dans Experts corner, xili-plugins, avec comme mot(s)-clé(s) , , , , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire