Submit your widget

super cool multiple style Slideshow effect with jQuery

Created 12 years ago   Views 45590   downloads 11619    Author thiagosf
super cool multiple style Slideshow effect with jQuery
View DemoDownload
120
Share |
- New animations: circles, circlesInside and circlesRotate
- Callback onLoad: calling a user-defined function to load images
- Added rotate-scale plugin: to the effect of rotation

Includes

    // Styles
    <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
    // Scripts
    <script src="js/jquery-1.5.2.min.js"></script>
    <script src="js/jquery.skitter.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.animate-colors-min.js"></script> 

Javascript

    $(function(){
    $('.box_skitter_large').skitter();
    }); 

HTML

    <div class="box_skitter box_skitter_large">
    <ul>
    <li>
    <a href="http://thiagosf.net"><img src="images/01.jpg" class="block" /></a>
    <div class="label_text">
    <p>Label</p>
    </div>
    </li>
    <li>
    <a href="http://cakephp.org"><img src="images/02.jpg" class="cube" /></a>
    <div class="label_text">
    <p>Label</p>
    </div>
    </li>
    <li>
    <a href="http://jquery.com"><img src="images/03.jpg" class="default" /></a>
    <div class="label_text">
    <p>Label</p>
    </div>
    </li>
    </ul>
    </div> 

XML

    <?xml version="1.0" encoding="utf-8"?>
    <skitter>
    <slide>
    <link>#directionTop</link>
    <image type="directionTop">images/001.jpg</image>
    <label><![CDATA[<p>directionTop</p>]]></label>
    </slide>
    <slide>
    <link>#cubeSize</link>
    <image type="cubeSize">images/002.jpg</image>
    <label><![CDATA[<p>cubeSize</p>]]></label>
    </slide>
    <slide>
    <link>#paralell</link>
    <image type="paralell">images/003.jpg</image>
    <label><![CDATA[<p>paralell</p>]]></label>
    </slide>
    </skitter> 

The article source:http://thiagosf.net/projects/jquery/skitter/?animation=cube#tube