CJ Flashy Slideshow Examples

Bricks (Default) Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample1').cjFlashySlideShow();
});

...or...

$('#sample1').cjFlashySlideShow({
    preset: "bricks"
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample1" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>

Cubism Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample2').cjFlashySlideShow({
    preset: "cubism"
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample2" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>

Rain Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

* This effect only works on browsers that support CSS3 rounded corner rules.

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample3').cjFlashySlideShow({
    preset: "rain"
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample3" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>

Blinds Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample4').cjFlashySlideShow({
    preset: "blinds"
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample4" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>

Blinds2 Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample5').cjFlashySlideShow({
    preset: "blinds2"
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample5" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>

Transport Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample6').cjFlashySlideShow({
    preset: "transport"
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample6" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>

Transport2 Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample7').cjFlashySlideShow({
    preset: "transport2"
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample7" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>

Custom Demo

Bricks (Default) | Cubism | Rain* | Blinds | Blinds2 | Transport | Transport2 | Custom

Includes

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cj-flashy-slideshow.js" type="text/javascript"></script>

Script

$('#sample8').cjFlashySlideShow({
    xBlocks: 1,
    yBlocks: 1,
    minBlockSize: 100,
    style: 'normal',
    delay: 900,
    direction: 'left',
    translucent: false,
    sloppy: false
});

CSS

.cjFancyTransition {
    position: relative;
    display: block;
    width: 250px;
    height: 150px;
    overflow: hidden;
}
.cjFancyTransition br {
    display: none;
}

HTML

<div id="sample8" class="cjFancyTransition">
    <img src="image_a.jpg" width="250" height="150"><br />
    <img src="image_b.jpg" width="250" height="150"><br />
    <img src="image_c.jpg" width="250" height="150">
</div>