Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Change files php to html

  • Loading branch information...
commit d1894d4c15f5b7ad523b0d0c4a3c0af75691ba62 1 parent 3933680
@thiagosf authored
Showing with 655 additions and 0 deletions.
  1. +65 −0 fullscreen.html
  2. +486 −0 index.html
  3. +104 −0 multiple.html
View
65 fullscreen.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Skitter - Slideshow for anytime!</title>
+
+ <meta name="description" content="Slideshow flexible with many options for customizations. Distributed under the GPL license" />
+ <meta name="keywords" content="slides, slide, slideshow, gallery, images, effects, easing, transitions, jquery, plugin, gpl license, free, customizations, flexible" />
+ <meta name="author" content="Thiago S.F. - http://thiagosf.net" />
+
+ <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>
+
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
+ <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
+
+ <script src="js/jquery-1.6.3.min.js"></script>
+ <script src="js/jquery.easing.1.3.js"></script>
+ <script src="js/jquery.animate-colors-min.js"></script>
+ <script src="js/jquery.skitter.min.js"></script>
+
+ <script>
+ $(document).ready(function(){
+
+ // Skitter Tester
+ $('.box_skitter_large').skitter({fullscreen:true});
+
+ });
+ </script>
+</head>
+<body style="margin:0;padding:0">
+ <div id="content" style="margin:0;padding:0">
+ <div class="border_box" style="margin:0;padding:0">
+ <div class="box_skitter box_skitter_large" style="margin:0;padding:0">
+ <ul>
+ <li><a href="#cube"><img src="images/001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
+ <li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
+ <li><a href="#block"><img src="images/003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
+ <li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
+ <li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>
+ <li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a><div class="label_text"><p>cubeSize</p></div></li>
+ <li><a href="#horizontal"><img src="images/007.jpg" class="horizontal" /></a><div class="label_text"><p>horizontal</p></div></li>
+ <li><a href="#showBars"><img src="images/008.jpg" class="showBars" /></a><div class="label_text"><p>showBars</p></div></li>
+ <li><a href="#showBarsRandom"><img src="images/009.jpg" class="showBarsRandom" /></a><div class="label_text"><p>showBarsRandom</p></div></li>
+ <li><a href="#tube"><img src="images/010.jpg" class="tube" /></a><div class="label_text"><p>tube</p></div></li>
+ <li><a href="#fade"><img src="images/011.jpg" class="fade" /></a><div class="label_text"><p>fade</p></div></li>
+ <li><a href="#fadeFour"><img src="images/012.jpg" class="fadeFour" /></a><div class="label_text"><p>fadeFour</p></div></li>
+ <li><a href="#paralell"><img src="images/013.jpg" class="paralell" /></a><div class="label_text"><p>paralell</p></div></li>
+ <li><a href="#blind"><img src="images/014.jpg" class="blind" /></a><div class="label_text"><p>blind</p></div></li>
+ <li><a href="#blindHeight"><img src="images/015.jpg" class="blindHeight" /></a><div class="label_text"><p>blindHeight</p></div></li>
+ <li><a href="#blindWidth"><img src="images/016.jpg" class="blindWidth" /></a><div class="label_text"><p>blindWidth</p></div></li>
+ <li><a href="#directionTop"><img src="images/017.jpg" class="directionTop" /></a><div class="label_text"><p>directionTop</p></div></li>
+ <li><a href="#directionBottom"><img src="images/018.jpg" class="directionBottom" /></a><div class="label_text"><p>directionBottom</p></div></li>
+ <li><a href="#directionRight"><img src="images/019.jpg" class="directionRight" /></a><div class="label_text"><p>directionRight</p></div></li>
+ <li><a href="#directionLeft"><img src="images/020.jpg" class="directionLeft" /></a><div class="label_text"><p>directionLeft</p></div></li>
+ <li><a href="#cubeStopRandom"><img src="images/021.jpg" class="cubeStopRandom" /></a><div class="label_text"><p>cubeStopRandom</p></div></li>
+ <li><a href="#cubeSpread"><img src="images/022.jpg" class="cubeSpread" /></a><div class="label_text"><p>cubeSpread</p></div></li>
+ </ul>
+
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
486 index.html
@@ -0,0 +1,486 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Skitter - Slideshow for anytime!</title>
+
+ <meta name="description" content="Slideshow flexible with many options for customizations. This jQuery Slideshow is free!" />
+ <meta name="keywords" content="jquery slideshow, slides, slide, slideshow, gallery, images, effects, easing, transitions, jquery, plugin, gpl license, free, customizations, flexible" />
+ <meta name="author" content="Thiago S.F. - http://thiagosf.net" />
+
+ <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>
+
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
+ <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
+ <link href="css/highlight.black.css" type="text/css" media="all" rel="stylesheet" />
+ <link href="css/sexy-bookmarks-style.css" type="text/css" media="all" rel="stylesheet" />
+
+ <script src="js/jquery-1.6.3.min.js"></script>
+ <script src="js/jquery.easing.1.3.js"></script>
+ <script src="js/jquery.animate-colors-min.js"></script>
+
+ <script src="js/jquery.skitter.min.js"></script>
+ <script src="js/highlight.js"></script>
+ <script src="js/sexy-bookmarks-public.js"></script>
+
+ <script>
+ $(document).ready(function() {
+
+ var options = {};
+
+ if (document.location.search) {
+ var array = document.location.search.split('=');
+ var param = array[0].replace('?', '');
+ var value = array[1];
+
+ if (param == 'animation') {
+ options.animation = value;
+ }
+ else if (param == 'type_navigation') {
+ options[value] = true;
+ if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
+ }
+ }
+
+ $('.box_skitter_large').skitter(options);
+
+ // Highlight
+ $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
+
+ });
+ </script>
+</head>
+<body>
+<div id="page">
+ <div id="header">
+
+ <h1><a href="http://thiagosf.net/projects/jquery/skitter">Skitter</a></h1>
+ <p>Slideshow for anytime!</p>
+ </div>
+
+ <div id="content">
+ <div class="border_box">
+ <div class="box_skitter box_skitter_large">
+ <ul>
+ <li><a href="#cube"><img src="images/001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
+ <li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
+ <li><a href="#block"><img src="images/003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
+ <li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
+ <li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>
+ <li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a><div class="label_text"><p>cubeSize</p></div></li>
+ <li><a href="#horizontal"><img src="images/007.jpg" class="horizontal" /></a><div class="label_text"><p>horizontal</p></div></li>
+ <li><a href="#showBars"><img src="images/008.jpg" class="showBars" /></a><div class="label_text"><p>showBars</p></div></li>
+ <li><a href="#showBarsRandom"><img src="images/009.jpg" class="showBarsRandom" /></a><div class="label_text"><p>showBarsRandom</p></div></li>
+ <li><a href="#tube"><img src="images/010.jpg" class="tube" /></a><div class="label_text"><p>tube</p></div></li>
+ <li><a href="#fade"><img src="images/011.jpg" class="fade" /></a><div class="label_text"><p>fade</p></div></li>
+ <li><a href="#fadeFour"><img src="images/012.jpg" class="fadeFour" /></a><div class="label_text"><p>fadeFour</p></div></li>
+ <li><a href="#paralell"><img src="images/013.jpg" class="paralell" /></a><div class="label_text"><p>paralell</p></div></li>
+ <li><a href="#blind"><img src="images/014.jpg" class="blind" /></a><div class="label_text"><p>blind</p></div></li>
+ <li><a href="#blindHeight"><img src="images/015.jpg" class="blindHeight" /></a><div class="label_text"><p>blindHeight</p></div></li>
+ <li><a href="#blindWidth"><img src="images/016.jpg" class="blindWidth" /></a><div class="label_text"><p>blindWidth</p></div></li>
+ <li><a href="#directionTop"><img src="images/017.jpg" class="directionTop" /></a><div class="label_text"><p>directionTop</p></div></li>
+ <li><a href="#directionBottom"><img src="images/018.jpg" class="directionBottom" /></a><div class="label_text"><p>directionBottom</p></div></li>
+ <li><a href="#directionRight"><img src="images/019.jpg" class="directionRight" /></a><div class="label_text"><p>directionRight</p></div></li>
+ <li><a href="#directionLeft"><img src="images/020.jpg" class="directionLeft" /></a><div class="label_text"><p>directionLeft</p></div></li>
+ <li><a href="#cubeStopRandom"><img src="images/021.jpg" class="cubeStopRandom" /></a><div class="label_text"><p>cubeStopRandom</p></div></li>
+ <li><a href="#cubeSpread"><img src="images/022.jpg" class="cubeSpread" /></a><div class="label_text"><p>cubeSpread</p></div></li>
+ </ul>
+ </div>
+ </div>
+
+ <div id="examples-animations">
+ <div>
+ <a href="?" class="selected">all</a>
+ <a href="?animation=cube" class="">cube</a>
+ <a href="?animation=cubeRandom" class="">cubeRandom</a>
+ <a href="?animation=block" class="">block</a>
+ <a href="?animation=cubeStop" class="">cubeStop</a>
+ <a href="?animation=cubeHide" class="">cubeHide</a>
+ <a href="?animation=cubeSize" class="">cubeSize</a>
+ <a href="?animation=horizontal" class="">horizontal</a>
+ <a href="?animation=showBars" class="">showBars</a>
+ <a href="?animation=showBarsRandom" class="">showBarsRandom</a>
+ <a href="?animation=tube" class="">tube</a>
+ <a href="?animation=fade" class="">fade</a>
+ <a href="?animation=fadeFour" class="">fadeFour</a>
+ <a href="?animation=paralell" class="">paralell</a>
+ <a href="?animation=blind" class="">blind</a>
+ <a href="?animation=blindHeight" class="">blindHeight</a>
+ <a href="?animation=blindWidth" class="">blindWidth</a>
+ <a href="?animation=directionTop" class="">directionTop</a>
+ <a href="?animation=directionBottom" class="">directionBottom</a>
+ <a href="?animation=directionRight" class="">directionRight</a>
+ <a href="?animation=directionLeft" class="">directionLeft</a>
+ <a href="?animation=cubeStopRandom" class="">cubeStopRandom</a>
+ <a href="?animation=cubeSpread" class="">cubeSpread</a>
+ <a href="?animation=cubeJelly" class="">cubeJelly</a>
+ <a href="?animation=glassCube" class="">glassCube</a>
+ <a href="?animation=glassBlock" class="">glassBlock</a>
+ <a href="?animation=circles" class="">circles<span class="new_animation">new!</span></a>
+ <a href="?animation=circlesInside" class="">circlesInside<span class="new_animation">new!</span></a>
+ <a href="?animation=circlesRotate" class="">circlesRotate<span class="new_animation">new!</span></a>
+ <a href="?animation=random" class="">random</a>
+ <a href="?animation=randomSmart" class="">randomSmart</a>
+ </div>
+ </div>
+
+ <div style="clear:both"></div>
+
+ <div id="styles_navigation">
+ <h2>Type of loading</h2>
+ <ul>
+ <li><a href="?type_loading=html" class="selected">HTML</a></li>
+ <li><a href="?type_loading=xml" class="">XML</a></li>
+ </ul>
+ </div>
+
+ <div id="styles_navigation">
+ <h2>Type of navigation</h2>
+ <ul>
+ <li><a href="?type_navigation=numbers" class="selected">Numbers</a></li>
+ <li><a href="?type_navigation=thumbs" class="">Thumbs</a></li>
+ <li><a href="?type_navigation=dots" class="">Dots</a></li>
+ </ul>
+ </div>
+
+ <div id="styles_navigation">
+
+ <h2>Other options</h2>
+ <ul>
+ <li><a href="?other_options=normal" class="">Normal</a></li>
+ <li><a href="?other_options=hideTools" class="">HideTools</a></li>
+ <li><a href="fullscreen.html" class="">Fullscreen</a></li>
+ <li><a href="?other_options=show_randomly" class="">Randomly Sliders</a></li>
+ </ul>
+ </div>
+
+ <div id="styles_navigation">
+ <h2>Other view</h2>
+ <ul>
+ <li><a href="?other_options=mini" class="">Mini-slides</a></li>
+ <li><a href="multiple.html" class="">Multiple instances</a></li>
+ </ul>
+ </div>
+
+ <div id="download">
+ <a href="https://github.com/thiagosf/SkitterSlideshow" id="botao_download"><img src="images/download-button.png" /></a>
+ <a href="http://wordpress.org/extend/plugins/wp-skitter-slideshow/" id="botao_wp"><img src="images/download-wp.png" /></a>
+ <a href="http://thiagosf.net/cakephp/skitter_helper/" id="botao_helper"><img src="images/download-helper.png" /></a>
+ </div>
+
+ <div id="box_share">
+ <div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy">
+ <ul class="socials">
+ <li class="sexy-delicious"><a href="http://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li>
+
+ <li class="sexy-facebook"><a href="http://www.facebook.com/share.php" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li>
+ <li class="sexy-digg"><a href="http://digg.com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li>
+ <li class="sexy-twitter"><a href="http://twitter.com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li>
+ <li class="sexy-twittley"><a href="http://twittley.com/submit/" rel="nofollow" class="external" title="Submit this to Twittley">Submit this to Twittley</a></li>
+
+ <li class="sexy-yahoobuzz"><a href="http://buzz.yahoo.com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li>
+ <li class="sexy-myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a></li>
+
+ <li class="sexy-google"><a href="http://www.google.com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li>
+
+ <li class="sexy-scriptstyle"><a href="http://scriptandstyle.com/submit" rel="nofollow" class="external" title="Submit this to Script &amp; Style">Submit this to Script &amp; Style</a></li>
+ <li class="sexy-reddit"><a href="http://reddit.com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li>
+ <li class="sexy-stumbleupon"><a href="http://www.stumbleupon.com/submit" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li>
+ <li class="sexy-mixx"><a href="http://www.mixx.com/submit" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a></li>
+
+ <li class="sexy-technorati"><a href="http://technorati.com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li>
+ <li class="sexy-blinklist"><a href="http://www.blinklist.com/index.php" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a></li>
+ <li class="sexy-diigo"><a href="http://www.diigo.com/post">Post this on Diigo</a></li>
+
+ <li class="sexy-designfloat"><a href="http://www.designfloat.com/submit.php" rel="nofollow" class="external" title="Submit this to DesignFloat">Submit this to DesignFloat</a></li>
+ <li class="sexy-newsvine"><a href="http://www.newsvine.com/_tools/seed&amp;save" rel="nofollow" class="external" title="Seed this on Newsvine">Seed this on Newsvine</a></li>
+
+ </ul>
+
+ </div>
+ </div>
+
+ <h2>Updatelog</h2>
+ <div id="updatelog">
+ <dl>
+ <dt>08/09/2011</dt>
+ <dd>- New animations: <a href="?animation=circles">circles</a>, <a href="?animation=circlesInside">circlesInside</a> and <a href="?animation=circlesRotate">circlesRotate</a></dd>
+
+ <dd>- Callback onLoad: calling a user-defined function to load images</dd>
+ <dd>- Added <a href="https://github.com/zachstronaut/jquery-animate-css-rotate-scale">rotate-scale plugin</a>: to the effect of rotation</dd>
+ <dt>05/08/2011</dt>
+ <dd>- New animations: <a href="?animation=glassCube">glassCube</a>, <a href="?animation=glassBlock">glassBlock</a></dd>
+
+ <dd>- Bug fixed hideTools</dd>
+ <dt>30/05/2011</dt>
+ <dd>- Display <a href="multiple.php">multiple instances</a> on the same page!</dd>
+ <dt>28/05/2011</dt>
+ <dd>- New animation: <a href="?animation=randomSmart">randomSmart</a></dd>
+
+ <dd>- Change in the animation: <a href="?animation=random">random</a></dd>
+ <dd>- New mode: <a href="index.php?other_options=show_randomly">ramdomly sliders</a>. <strong>Hint of <a href="http://blog.it0091.com/2011/04/28/jquery-skitter-slideshow-display-images-randomly-on-each-page/" target="_blank">Team IT0091</a></strong></dd>
+ <dd>- <strong>jQueryUI</strong> removed and added plugins compatible: <strong>jQuery easing</strong> and <strong>jQuery animate colors</strong></dd>
+
+ <dt>15/05/2011</dt>
+ <dd>- Added <a href="http://wordpress.org/extend/plugins/wp-skitter-slideshow/">plugin</a> for Wordpress</dd>
+ <dt>09/05/2011</dt>
+ <dd>- Control over the width of the label. <strong>Hint of Ronny</strong></dd>
+ <dt>08/05/2011</dt>
+
+ <dd>- <a href="index.php?type_navigation=dots">Navigation with dots</a></dd>
+ <dd>- New animation: <a href="?animation=cubeJelly">cubeJelly</a></dd>
+ <dd>- Restructuring HTML plugin</dd>
+ <dd>- Bug fixed navigation thumbs</dd>
+ <dt>07/05/2011</dt>
+
+ <dd>- Added option to load <a href="index.php?type_loading=xml">data via XML</a>.</dd>
+ <dt>23/04/2011</dt>
+ <dd>- Added <a href="fullscreen.php">fullscreen</a> mode</dd>
+ <dt>21/04/2011</dt>
+
+ <dd>- Fixed bug in loading images in IE9</dd>
+ <dd>- Update animations: <a href="?animation=directionTop">directionTop</a>, <a href="?animation=directionBottom">directionBottom</a>, <a href="?animation=directionRight">directionRight</a>, <a href="?animation=directionLeft">directionLeft</a> and <a href="?animation=block">block</a></dd>
+ <dt>20/04/2011</dt>
+
+ <dd>- Update jQuery and jQuery UI</dd>
+ <dt>16/01/2011</dt>
+ <dd>- New animations: <a href="?animation=cubeStopRandom">cubeStopRandom</a>, <a href="?animation=cubeSpread">cubeSpread</a></dd>
+ <dt>04/01/2011</dt>
+ <dd>- Update thumbnail browsing. Now the position of the mouse will move the thumbnails</dd>
+
+ <dd>- Fix the problem with the effects: cubeStop, cubeHide, cubSize.</dd>
+ <dt>09/10/2010</dt>
+ <dd>- Added the type of thumbnail browsing.</dd>
+ <dt>04/08/2010</dt>
+ <dd>- Creation of Skitter Slideshow!</dd>
+ </dl>
+
+ </div>
+
+ <h2>Next updates:</h2>
+ <div id="updatelog">
+ <dl>
+ <dt>Option play/pause manually.</dt>
+ <dt>Progress bar slide actually.</dt>
+ </dl>
+ </div>
+
+ <h2>Includes</h2>
+ <pre class="code" lang="html">
+// Styles
+&lt;link href=&quot;css/skitter.styles.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; /&gt;
+
+// Scripts
+&lt;script src=&quot;js/jquery-1.5.2.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;js/jquery.skitter.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;js/jquery.easing.1.3.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;js/jquery.animate-colors-min.js&quot;&gt;&lt;/script&gt;
+
+</pre>
+
+ <h2>Javascript</h2>
+ <pre class="code" lang="js">
+$(function(){
+ $('.box_skitter_large').skitter();
+});
+</pre>
+
+ <h2>HTML</h2>
+ <pre class="code" lang="html">
+&lt;div class=&quot;box_skitter box_skitter_large&quot;&gt;
+
+ &lt;ul&gt;
+ &lt;li&gt;
+ &lt;a href=&quot;http://thiagosf.net&quot;&gt;&lt;img src=&quot;images/01.jpg&quot; class=&quot;block&quot; /&gt;&lt;/a&gt;
+
+ &lt;div class=&quot;label_text&quot;&gt;
+ &lt;p&gt;Label&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;/li&gt;
+ &lt;li&gt;
+
+ &lt;a href=&quot;http://cakephp.org&quot;&gt;&lt;img src=&quot;images/02.jpg&quot; class=&quot;cube&quot; /&gt;&lt;/a&gt;
+ &lt;div class=&quot;label_text&quot;&gt;
+ &lt;p&gt;Label&lt;/p&gt;
+
+ &lt;/div&gt;
+ &lt;/li&gt;
+ &lt;li&gt;
+ &lt;a href=&quot;http://jquery.com&quot;&gt;&lt;img src=&quot;images/03.jpg&quot; class=&quot;default&quot; /&gt;&lt;/a&gt;
+
+ &lt;div class=&quot;label_text&quot;&gt;
+ &lt;p&gt;Label&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;/li&gt;
+ &lt;/ul&gt;
+
+&lt;/div&gt;
+</pre>
+
+ <h2>XML</h2>
+ <pre class="code" lang="html">
+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
+&lt;skitter&gt;
+
+ &lt;slide&gt;
+ &lt;link&gt;#directionTop&lt;/link&gt;
+ &lt;image type=&quot;directionTop&quot;&gt;images/001.jpg&lt;/image&gt;
+ &lt;label&gt;&lt;![CDATA[&lt;p&gt;directionTop&lt;/p&gt;]]&gt;&lt;/label&gt;
+
+ &lt;/slide&gt;
+ &lt;slide&gt;
+ &lt;link&gt;#cubeSize&lt;/link&gt;
+ &lt;image type=&quot;cubeSize&quot;&gt;images/002.jpg&lt;/image&gt;
+
+ &lt;label&gt;&lt;![CDATA[&lt;p&gt;cubeSize&lt;/p&gt;]]&gt;&lt;/label&gt;
+ &lt;/slide&gt;
+ &lt;slide&gt;
+ &lt;link&gt;#paralell&lt;/link&gt;
+
+ &lt;image type=&quot;paralell&quot;&gt;images/003.jpg&lt;/image&gt;
+ &lt;label&gt;&lt;![CDATA[&lt;p&gt;paralell&lt;/p&gt;]]&gt;&lt;/label&gt;
+ &lt;/slide&gt;
+
+&lt;/skitter&gt;
+</pre>
+
+ <div id="options">
+ <h2>Extend</h2>
+ <h3>Options</h3>
+
+ <table>
+ <thead>
+ <tr>
+ <th>option</th>
+ <th>description</th>
+ <th>default</th>
+ <th>example</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>velocity</td>
+ <td>Velocity of animation</td>
+ <td>1</td>
+ <td><span class="code">$('.box_skitter_large').skitter({velocity: 2});</span></td>
+ </tr>
+ <tr>
+ <td>interval</td>
+ <td>Interval between transitions</td>
+ <td>2500</td>
+ <td><span class="code">$('.box_skitter_large').skitter({interval: 3000});</span></td>
+ </tr>
+ <tr>
+ <td>animation</td>
+ <td>Default animation</td>
+ <td>null or defined in &lt;a&gt; class</td>
+ <td><span class="code">$('.box_skitter_large').skitter({animation: 'fade'});</span></td>
+ </tr>
+ <tr>
+ <td>numbers</td>
+ <td>Numbers display</td>
+ <td>true</td>
+ <td><span class="code">$('.box_skitter_large').skitter({numbers: false});</span></td>
+ </tr>
+ <tr>
+ <td>navigation</td>
+ <td>Navigation display</td>
+ <td>true</td>
+ <td><span class="code">$('.box_skitter_large').skitter({navigation: false});</span></td>
+ </tr>
+ <tr>
+ <td>label</td>
+ <td>Label display</td>
+ <td>true</td>
+ <td><span class="code">$('.box_skitter_large').skitter({label: false});</span></td>
+ </tr>
+ <tr>
+ <td>easing_default</td>
+ <td>Easing default</td>
+ <td>null</td>
+ <td><span class="code">$('.box_skitter_large').skitter({easing_default: 'easeOutBack'});</span></td>
+ </tr>
+ <tr>
+ <td>animateNumberOut</td>
+ <td>Animation/style number/dot</td>
+ <td>{backgroundColor:'#333', color:'#fff'}</td>
+ <td><span class="code">$('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});</span></td>
+ </tr>
+ <tr>
+ <td>animateNumberOver</td>
+ <td>Animation/style hover number/dot</td>
+ <td>{backgroundColor:'#000', color:'#fff'}</td>
+ <td><span class="code">$('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});</span></td>
+ </tr>
+ <tr>
+ <td>animateNumberActive</td>
+ <td>Animation/style active number/dot</td>
+ <td>{backgroundColor:'#cc3333', color:'#fff'}</td>
+ <td><span class="code">$('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});</span></td>
+ </tr>
+ <tr>
+ <td>thumbs</td>
+ <td>Navigation with thumbs</td>
+ <td>false</td>
+ <td><span class="code">$('.box_skitter_large').skitter({thumbs: true});</span></td>
+ </tr>
+ <tr>
+ <td>hideTools</td>
+ <td>Hide numbers and navigation</td>
+ <td>false</td>
+ <td><span class="code">$('.box_skitter_large').skitter({hideTools: true});</span></td>
+ </tr>
+ <tr>
+ <td>fullscreen</td>
+ <td>Fullscreen mode</td>
+ <td>false</td>
+ <td><span class="code">$('.box_skitter_large').skitter({fullscreen: true});</span></td>
+ </tr>
+ <tr>
+ <td>xml</td>
+ <td>Loading data from XML file</td>
+ <td>false</td>
+ <td><span class="code">$('.box_skitter_large').skitter({xml: "xml/slides.xml"});</span></td>
+ </tr>
+ <tr>
+ <td>dots</td>
+ <td>Navigation with dots</td>
+ <td>false</td>
+ <td><span class="code">$('.box_skitter_large').skitter({dots: true});</span></td>
+ </tr>
+ <tr>
+ <td>width_label</td>
+ <td>Width label</td>
+ <td>null</td>
+ <td><span class="code">$('.box_skitter_large').skitter({width_label: '300px'});</span></td>
+ </tr>
+ <tr>
+ <td>show_randomly</td>
+ <td>Randomly sliders</td>
+ <td>false</td>
+ <td><span class="code">$('.box_skitter_large').skitter({show_randomly: true});</span></td>
+ </tr>
+ <tr>
+ <td>onLoad</td>
+ <td>Callback</td>
+ <td>null</td>
+ <td><span class="code">$('.box_skitter_large').skitter({onLoad: function() { console.log('start!') } });</span></td>
+ </tr>
+ </tbody>
+ </table>
+
+ </div>
+
+
+ </div>
+
+ <div id="footer">
+ <p>Thiago S.F.</p>
+ <p><a href="http://thiagosf.net">thiagosf.net</a></p>
+ </div>
+
+</div>
+</body>
+</html>
View
104 multiple.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Skitter - Slideshow for anytime!</title>
+
+ <meta name="description" content="Slideshow flexible with many options for customizations. This jQuery Slideshow is free!" />
+ <meta name="keywords" content="jquery slideshow, slides, slide, slideshow, gallery, images, effects, easing, transitions, jquery, plugin, gpl license, free, customizations, flexible" />
+ <meta name="author" content="Thiago S.F. - http://thiagosf.net" />
+
+ <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>
+
+ <link rel="shortcut icon" href="images/favicon.ico">
+ <link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
+ <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
+ <link href="css/highlight.black.css" type="text/css" media="all" rel="stylesheet" />
+ <link href="css/sexy-bookmarks-style.css" type="text/css" media="all" rel="stylesheet" />
+
+ <script src="js/jquery-1.6.3.min.js"></script>
+ <script src="js/jquery.easing.1.3.js"></script>
+ <script src="js/jquery.animate-colors-min.js"></script>
+
+ <script src="js/jquery.skitter.min.js"></script>
+ <script src="js/highlight.js"></script>
+ <script src="js/sexy-bookmarks-public.js"></script>
+
+ <script>
+ $(document).ready(function(){
+
+ $('.box_skitter_large').skitter({label: false, numbers: false});
+ $('.box_skitter_small').skitter({label: false, numbers: false, interval: 1000});
+ $('.box_skitter_medium').css({width: 500, height: 200}).skitter({show_randomly: true, navigation: false, dots: true, interval: 4000});
+ $('.box_skitter_normal').css({width: 400, height: 300}).skitter({animation: 'blind', interval: 2000, hideTools: true});
+
+ // Highlight
+ $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
+
+ });
+ </script>
+</head>
+<body>
+<div id="page">
+ <div id="header">
+
+ <h1><a href="index.php">Skitter</a></h1>
+ <p>Slideshow for anytime!</p>
+ </div>
+
+ <div id="content">
+ <div class="border_box">
+ <div class="box_skitter box_skitter_large">
+ <ul>
+ <li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
+ <li><a href="#block"><img src="images/003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
+ <li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
+ <li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>
+ </ul>
+ </div>
+ </div>
+ <div style="clear:both;"></div>
+ <div class="border_box">
+ <div class="box_skitter box_skitter_small">
+ <ul>
+ <li><a href="#horizontal"><img src="images/007.jpg" class="horizontal" /></a><div class="label_text"><p>horizontal</p></div></li>
+ <li><a href="#showBars"><img src="images/008.jpg" class="showBars" /></a><div class="label_text"><p>showBars</p></div></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div style="clear:both;"></div>
+ <div class="border_box" style="margin-bottom:45px;">
+ <div class="box_skitter box_skitter_medium">
+ <ul>
+ <li><a href="#fadeFour"><img src="images/012.jpg" class="fadeFour" /></a><div class="label_text"><p>fadeFour</p></div></li>
+ <li><a href="#paralell"><img src="images/013.jpg" class="paralell" /></a><div class="label_text"><p>paralell</p></div></li>
+ <li><a href="#blind"><img src="images/014.jpg" class="blind" /></a><div class="label_text"><p>blind</p></div></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div style="clear:both;"></div>
+ <div class="border_box">
+ <div class="box_skitter box_skitter_normal">
+ <ul>
+ <li><a href="#directionTop"><img src="images/017.jpg" class="directionTop" /></a><div class="label_text"><p>directionTop</p></div></li>
+ <li><a href="#directionBottom"><img src="images/018.jpg" class="directionBottom" /></a><div class="label_text"><p>directionBottom</p></div></li>
+ <li><a href="#directionRight"><img src="images/019.jpg" class="directionRight" /></a><div class="label_text"><p>directionRight</p></div></li>
+ <li><a href="#directionLeft"><img src="images/020.jpg" class="directionLeft" /></a><div class="label_text"><p>directionLeft</p></div></li>
+ <li><a href="#cubeStopRandom"><img src="images/021.jpg" class="cubeStopRandom" /></a><div class="label_text"><p>cubeStopRandom</p></div></li>
+ <li><a href="#cubeSpread"><img src="images/022.jpg" class="cubeSpread" /></a><div class="label_text"><p>cubeSpread</p></div></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div id="footer">
+ <p>Thiago S.F.</p>
+ <p><a href="http://thiagosf.net">thiagosf.net</a></p>
+ </div>
+
+</div>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.