$title = 'Tile'; include '../inc/inc_intro_demo.php'; ?>
Cycle2's tile transition plugin must be included in order to use the tile effects. See the Download page for a link to the tile plugin.
There are two separate tile transitions included in the tile plugin. They are
tileSlide
and tileBlind
and they can be applied
vertically or horizontally.
By default, a tile transition is vertical and uses 7 tiles.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="/jquery.cycle2.js"></script> <script src="/jquery.cycle2.tile.js"></script> ... <!-- tileSlide --> <div class="cycle-slideshow" data-cycle-timeout=0 data-cycle-next="#next1" data-cycle-prev="#prev1" data-cycle-fx="tileSlide" > <img src="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div> <!-- tileBlind --> <div class="cycle-slideshow" data-cycle-timeout=0 data-cycle-next="#next2" data-cycle-prev="#prev2" data-cycle-fx="tileBlind" > <img src="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div>
Set the data-cycle-tile-vertical
attribute to false for horizontal tiling.
<div class="cycle-slideshow"
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-fx="tileBlind"
data-cycle-tile-vertical=false
>
<img src="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
Use the data-cycle-tile-count
attribute to set the number of tiles.
<div class="cycle-slideshow"
data-cycle-timeout=0
data-cycle-next="#next4"
data-cycle-prev="#prev4"
data-cycle-fx=tileSlide
data-cycle-tile-vertical=false
data-cycle-tile-count=15
>
<img src="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
The tile transition plugin supports per-slide effects, so you can specify the desired
transition and options using data-cycle-*
attributes on the slides themselves instead of on
the slideshow container.
<div class="cycle-slideshow" data-cycle-timeout=0 data-cycle-next="#next5" data-cycle-prev="#prev5" > <img src="/images/p1.jpg" data-cycle-fx=tileSlide data-cycle-tile-vertical=false> <img src="/images/p2.jpg" data-cycle-fx=tileBlind data-cycle-tile-count=12> <img src="/images/p3.jpg" data-cycle-fx=tileSlide data-cycle-tile-count=4> <img src="/images/p4.jpg" data-cycle-fx=tileBlind data-cycle-tile-vertical=false> </div>
Options can be set on the slideshow element or the slide element using
data-cycle-option-name
attributes.
Option attribute names are always lowercase and prefixed with data-cycle-
. For example,
to set the tile-count option you would use the
data-cycle-tile-count
attribute.
Name | Default Value | Description |
---|---|---|
tile-count | 7 | The number of tiles to use in the transition. |
tile-delay | 100 | The number of milliseconds to delay each individual tile transition. |
tile-vertical | true | Set to false for a horizontal transition.
|