Permalink
Browse files

Merge branch 'master' of github.com:sgruhier/scripty2-carousel

  • Loading branch information...
2 parents bcee0e5 + b4faf4d commit 19ac2f89f747cf23503a40419ebae38ef046fc9c @sgruhier committed Jun 9, 2011
Showing with 288 additions and 41 deletions.
  1. +1 −1 examples/slider/simple.css
  2. +86 −0 examples/slideshow/index.html
  3. +158 −0 examples/slideshow/simple.css
  4. +43 −40 src/carousel.js
@@ -57,7 +57,7 @@ hr {
#hslider {
float:left;
- margin:10px 3px 5px 10px;
+ margin:10px 10px 5px 10px;
width:541px;
}
@@ -0,0 +1,86 @@
+<!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" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+ <title>Slideshow Example</title>
+ <link rel="stylesheet" href="simple.css" type="text/css" />
+ <link rel="stylesheet" href="../../themes/default/theme.css" type="text/css" />
+ <link rel="stylesheet" href="../../themes/default/ui.carousel.css" type="text/css" />
+
+</head>
+
+<body>
+ <a href="http://github.com/sgruhier/scripty2-carousel"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+ <div id="container">
+ <h1>Prototype Carousel Examples</h1>
+ <h2>Horizontal</h2>
+ <div id="hcarousel" class="ui-carousel-horizontal">
+ <div class="ui-carousel-prev"><a href="#" onclick="return false">&lt;</a></div>
+ <div class="ui-carousel-container">
+ <ul>
+ <li class="item1">1</li>
+ <li class="item2">2</li>
+ <li class="item3">3</li>
+ <li class="item4">4</li>
+ <li class="item5">5</li>
+ <li class="item6">6</li>
+ <li class="item7">7</li>
+ <li class="item8">8</li>
+ <li class="item9">9</li>
+ <li class="item10">10</li>
+ <li class="item11">11</li>
+ <li class="item12">12</li>
+ </ul>
+ </div>
+ <div class="ui-carousel-next"><a href="#" onclick="return false">&gt;</a></div>
+ </div>
+ <hr/>
+ <h3>Javascript code</h3>
+ <script src="http://gist.github.com/531225.js?file=gistfile1.js"></script>
+ <h3>HTML Markup</h3>
+ <script src="http://gist.github.com/371224.js?file=gistfile1.html"></script>
+
+ <h2>Vertical</h2>
+ <div id="vcarousel" class="ui-carousel-vertical">
+ <div class="ui-carousel-prev"><a href="#" onclick="return false">Previous</a></div>
+ <div class="ui-carousel-container">
+ <ul>
+ <li class="item1">1</li>
+ <li class="item2">2</li>
+ <li class="item3">3</li>
+ <li class="item4">4</li>
+ <li class="item5">5</li>
+ <li class="item6">6</li>
+ <li class="item7">7</li>
+ <li class="item8">8</li>
+ <li class="item9">9</li>
+ <li class="item10">10</li>
+ <li class="item11">11</li>
+ <li class="item12">12</li>
+ </ul>
+ </div>
+ <div class="ui-carousel-next"><a href="#" onclick="return false">Next</a></div>
+ </div>
+ <hr/>
+ <h3>Javascript code</h3>
+ <script src="http://gist.github.com/531226.js?file=gistfile1.js"></script>
+ <h3>HTML Markup</h3>
+ <script src="http://gist.github.com/371236.js?file=gistfile1.html"></script>
+ </div>
+
+ <script src="../../lib/prototype.js" type="text/javascript"></script>
+ <script src="../../lib/s2.js" type="text/javascript"></script>
+ <script src="../../src/carousel.js" type="text/javascript"></script>
+
+ <script type="text/javascript">
+ var hCarousel = new S2.UI.Carousel("hcarousel", {cycle: 'loop'});
+ new PeriodicalExecuter(function(pe) { hCarousel.scrollNext(); }, 3);
+
+ var vCarousel = new S2.UI.Carousel("vcarousel", {orientation: 'vertical', cycle: 'loop'});
+ new PeriodicalExecuter(function(pe) { vCarousel.scrollNext(); }, 3);
+ </script>
+</body>
+</html>
@@ -0,0 +1,158 @@
+body {
+ color:#333333;
+ font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
+ font-size:12px;
+ font-size-adjust:none;
+ font-style:normal;
+ font-variant:normal;
+ font-weight:normal;
+ text-align:center;
+}
+
+h1, h2, h3 {
+ float:left;
+ width:100%;
+}
+h3 {
+ margin-top:10px;
+}
+hr {
+ width:100%;
+ height:10px;
+ clear:both;
+ border:none;
+}
+
+.gist {
+ clear:both;
+}
+
+#container {
+ margin-left:auto;
+ margin-right:auto;
+ text-align:left;
+ width:1024px;
+ font-size: 12px;
+}
+
+#hcarousel {
+ float:left;
+ width:640px;
+ height: 200px;
+}
+
+#vcarousel {
+ float:left;
+ height:340px;
+ width: 100px;
+}
+
+
+.item1 { background:#F2F2F2; }
+.item2 { background:#E5E5E5; }
+.item3 { background:#D8D8D8; }
+.item4 { background:#CCC; }
+.item5 { background:#BFBFBF; }
+.item6 { background:#B2B2B2; }
+.item7 { background:#A5A5A5; }
+.item8 { background:#999; }
+.item9 { background:#8C8C8C; }
+.item10 { background:#7F7F7F; }
+.item11 { background:#727272; }
+.item12 { background:#666; }
+
+/* Horizontal */
+.ui-carousel-horizontal .ui-carousel-container {
+ float: left;
+ width: 600px;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul {
+ float:left;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul li {
+ float:left;
+ width:200px;
+ height: 200px;
+ list-style:none;
+ line-height: 200px;
+ font-size: 50px;
+ text-align: center;
+ margin:0;
+ padding:0;
+}
+
+/* Vertical */
+.ui-carousel-vertical .ui-carousel-container {
+ float: left;
+ width: 100px;
+ height: 300px;
+}
+
+.ui-carousel-vertical .ui-carousel-container ul {
+ float:left;
+ width: 100px;
+}
+
+.ui-carousel-vertical .ui-carousel-container ul li {
+ float:left;
+ width:100px;
+ height: 100px;
+ list-style:none;
+ line-height: 100px;
+ font-size: 40px;
+ text-align: center;
+ margin:0;
+ padding:0;
+}
+
+.ui-carousel-horizontal .ui-carousel-prev a, .ui-carousel-horizontal .ui-carousel-next a {
+ background: #6CF;
+ color:#FFF;
+ text-decoration:none;
+}
+
+.ui-carousel-horizontal .ui-carousel-prev a:hover, .ui-carousel-horizontal .ui-carousel-next a:hover {
+ color:#6CF;
+ background: #C6F1FF;
+}
+
+.ui-carousel-horizontal .ui-carousel-prev, .ui-carousel-horizontal .ui-carousel-next,
+.ui-carousel-horizontal .ui-carousel-prev a, .ui-carousel-horizontal .ui-carousel-next a {
+ float:left;
+ width: 20px;
+ height:200px;
+ line-height: 200px;
+ font-size: 20px;
+ text-align:center;
+}
+
+.ui-carousel-vertical .ui-carousel-prev a, .ui-carousel-vertical .ui-carousel-next a {
+ color:#6CF;
+ text-decoration:none;
+ background: #C6F1FF;
+}
+
+.ui-carousel-vertical .ui-carousel-prev a:hover, .ui-carousel-vertical .ui-carousel-next a:hover {
+ background: #6CF;
+ color:#FFF;
+}
+
+.ui-carousel-vertical .ui-carousel-prev, .ui-carousel-vertical .ui-carousel-next,
+.ui-carousel-vertical .ui-carousel-prev a, .ui-carousel-vertical .ui-carousel-next a {
+ float:left;
+ height: 20px;
+ width:100px;
+ line-height: 20px;
+ font-size: 20px;
+ text-align:center;
+}
+
+.ui-state-disabled a{
+ background: #EEE !important;
+ color: #333 !important;
+ cursor: default;
+}
Oops, something went wrong.

0 comments on commit 19ac2f8

Please sign in to comment.