xili-floom-slideshow demo

Below find a small demo where two slideshows made with plugin xili-floom-slideshow (version 0.9.8) are both in post content:

 

The css is in sub-folder floom/css of current theme. (avoiding modification of css delivered with plugin)
The images are attached to this page or to another post of this website. The size on top left is 200×200 and on bottom right 380×200.
The div containing both floom slideshows is inside contents of page and coded like that (use html editor on Edit Page here).

Below find a small demo where two slideshows made with plugin <strong>xili-floom-slideshow</strong> (version 0.9.8):
<div id="mondrian">
[xilifloom frame_id="mondrian-top-left" blinds_id="mblinds" captions="false" children="211" amount="20" ]&nbsp;[xilifloom frame_id="mondrian-bottom-right" blinds_id="mbblinds" axis="horizontal" amount="12" interval="5000"]
</div>
The css is in sub-folder floom/css of current theme. ...

The css here (Example part of the floom.css in subfolder floom/css) :

#mondrian { margin-left:-70px; background: transparent url(mondrian-bk.png) 0 0 no-repeat; height: 458px; width: 699px; padding:5px 0 0;}
#mondrian-top-left { margin:14px 0 0 63px ; height: 200px; width: 200px;  padding:0px;}
#mondrian-top-left #mblinds { margin: 0 auto ; background: #000 url(spinner.gif) 50% no-repeat; height: 200px; width: 200px; }
#mondrian-top-left #mblinds .floom_slice { z-index: 10; }
#mondrian-top-left #mblinds .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; }
#mondrian-top-left #mblinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; }
#mondrian-top-left #mblinds .floom_container { overflow: hidden; border-bottom: solid 0px #fff; border-top: solid 0px #666; }
#mondrian-top-left #mblinds .floom_vertical { float: left; }

#mondrian-bottom-right { margin:-20px 0 0 275px ; height: 200px; width: 380px; padding:4px 0 0; }
#mondrian-bottom-right #mbblinds { margin: 0 auto ; padding: 0; background: #000 url(spinner.gif) 50% no-repeat; height: 200px; width: 380px; }
#mondrian-bottom-right #mbblinds .floom_slice { z-index: 10; }
#mondrian-bottom-right #mbblinds .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; }
#mondrian-bottom-right #mbblinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; }
#mondrian-bottom-right #mbblinds .floom_container { overflow: hidden; border-bottom: solid 0px #fff; border-top: solid 0px #666; }
#mondrian-bottom-right #mbblinds .floom_vertical { float: left; }

Hope that this demo will help motivated webmasters ;-)

Comment here or in forum.dev.xiligroup.com !

One thought on “xili-floom-slideshow demo

Comments are closed.