Submit your widget

super cool multiple style Slideshow effect with jQuery

Created 10 years ago   Views 42981   downloads 11248    Author thiagosf
super cool multiple style Slideshow effect with jQuery
View DemoDownload
119
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