The Anatomy of the Sample Script

Each line of the of the script should on a single line.

Each slide starts with <div class="slide"> and ends with </div>

Each element of the slide has a starting tag of <img or <p

<img is an image element

src is where the image can be found 

data-position the position top/left on the image for this element in px

top is the offset from the top of the slider, left is the offset from the left edge of the slider

data-in / data-out The animation used to display and hide the element

fade, none, left, topLeft, bottomLeft, right, topRight, bottomRight, top, bottom

data-delay Time in ms before the transition starts in the current step

data-step You can group your elements in different steps. All animation of a step will start at the same, delays by the data-delay value, the elements in the next step will not start until the previous step is complete.

<p is a text element

Text elements are the same as for img elements except they lack a src. The Text element takes a class which allows for styling instead.

 

The supplied sample.

<div class="slide">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/bookcover.png" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/ripawc.png" data-position="0,0" data-in="fade" data-step="1" data-delay="500" data-out="Top">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Front Cover ghost.png" data-position="0,0" data-in="left" data-step="2" data-delay="1000" data-out="bottomLeft">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/title text1A GhostSpell.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1000" data-out="Left">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/title2 Awc Haunting return.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1500" data-out="left">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Front Cover s.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="2000" data-out="TopLeft">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Front Cover cm.png" data-position="0,0" data-in="right" data-step="4" data-delay="1000" data-out="BottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/maltherepub.png" data-position="0,0" data-in="top" data-step="5" data-delay="1500" data-out="Right">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text1.png" data-position="0,0" data-in="bottom" data-step="6" data-delay="2000" data-out="TopRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text btsa.png" data-position="0,0" data-in="bottom" data-step="7" data-delay="1000" data-out="TopRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text2.png" data-position="0,0" data-in="bottom" data-step="8" data-delay="2000" data-out="TopRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover Text3.png" data-position="0,0" data-in="bottom" data-step="10" data-delay="2000" data-out="TopRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/ghostspell/Back Cover apoc.png" data-position="0,0" data-in="bottom" data-step="11" data-delay="2000" data-out="TopRight">

</div>

<div class="slide">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-666-background.png" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-figure2.png" data-position="0,350" data-in="top" data-step="1" data-delay="500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-figure3.png" data-position="0,350" data-in="top" data-step="1" data-delay="1500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/raisingit-figure1.png" data-position="0,350" data-in="bottom" data-step="1" data-delay="2500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/Back-Cover-Text1.png" data-position="0,0" data-in="bottom" data-step="4" data-delay="2500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/Back-Cover-Text2.png" data-position="0,0" data-in="bottom" data-step="5" data-delay="2000" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/raisingit/Back-Cover-Text3.png" data-position="0,0" data-in="bottom" data-step="6" data-delay="2000" data-out="bottomRight">

<p class="claim transparant small" data-position="30,30" data-in="top" data-step="2" data-out="top">Raising IT-666</p>

<p class="claim transparant small" data-position="90,30" data-in="left" data-step="3" data-delay="500">The Teenage Beast</p>

<p class="fsblock transparant small" data-position="120,30" data-in="bottom" data-step="3" data-delay="1500">Book Two</p>

<p class="fsblock transparant small" data-position="150,30" data-in="bottom" data-step="3" data-delay="2500">Cordelia Malthere</p>

</div>

<div class="slide">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/finding it-666 background image.jpg" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/frontfigure3.png" data-position="0,350" data-in="top" data-step="1" data-delay="500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/frontfigure2.png" data-position="0,350" data-in="top" data-step="1" data-delay="1500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/frontfigure1.png" data-position="0,350" data-in="bottom" data-step="1" data-delay="2500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/Back-Cover-Text1.png" data-position="0,0" data-in="bottom" data-step="4" data-delay="2500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/Back-Cover-Text2.png" data-position="0,0" data-in="bottom" data-step="5" data-delay="2000" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/findingit/Back-Cover-Text3.png" data-position="0,0" data-in="bottom" data-step="6" data-delay="2000" data-out="bottomRight">

<p class="claim transparant small" data-position="30,30" data-in="top" data-step="2" data-out="top">Finding IT-666</p>

<p class="claim transparant small" data-position="90,30" data-in="left" data-step="3" data-delay="500">The Beast</p>

<p class="fsblock transparant small" data-position="120,30" data-in="bottom" data-step="3" data-delay="1500">Book One</p>

<p class="fsblock transparant small" data-position="150,30" data-in="bottom" data-step="3" data-delay="2500">Cordelia Malthere</p>

</div>

<div class="slide">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/background.png" data-position="0,0" data-in="fade" data-delay="0" data-out="fade">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/moon.png" data-position="0,0" data-in="fade" data-step="1" data-delay="500" data-out="bottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/coffin.png" data-position="0,0" data-in="top" data-step="2" data-delay="1000" data-out="bottomLeft">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/title1.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1000" data-out="Left">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/title2.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="1500" data-out="left">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/title3.png" data-position="0,0" data-in="bottom" data-step="3" data-delay="2000" data-out="TopLeft">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/text1.png" data-position="0,0" data-in="right" data-step="4" data-delay="1000" data-out="BottomRight">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/text2.png" data-position="0,0" data-in="top" data-step="4" data-delay="1500" data-out="Right">

<img src="/packages/fs_fraction_slider/blocks/fsfractionslider/images/books/hairrising/text3.png" data-position="0,0" data-in="bottom" data-step="4" data-delay="2000" data-out="TopRight">

</div>