start playing with carousel stuff

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Dec 24 22:30:43 PST 2011
+ * Date: Sun Dec 25 21:24:32 PST 2011
  */
 html, body {
   margin: 0;
@@ -2385,6 +2385,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   top: 50%;
   left: 50%;
   z-index: 11000;
+  max-height: 500px;
+  overflow: auto;
   width: 560px;
   margin: -250px 0 0 -250px;
   background-color: #ffffff;
@@ -2662,6 +2664,12 @@ a.thumbnail:hover {
 .thumbnail .caption {
   padding: 9px;
 }
+.carousel .item {
+  display: none;
+}
+.carousel .active {
+  display: block;
+}
 .hidden {
   display: none;
   visibility: hidden;

bootstrap.min.css

@@ -312,7 +312,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .pagination .next a{border:0;}
 .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
 .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
-.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
+.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
 .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
 .modal.fade.in{top:50%;}
 .modal-header{padding:5px 15px;border-bottom:1px solid #eee;}
@@ -350,5 +350,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
 .thumbnail>img{display:block;max-width:100%;}
 .thumbnail .caption{padding:9px;}
+.carousel .item{display:none;}
+.carousel .active{display:block;}
 .hidden{display:none;visibility:hidden;}
 @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}

docs/javascript.html

@@ -117,6 +117,10 @@
               <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td>
               <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
             </tr>
+            <tr>
+              <td><a href="./javascript.html#collapse">bootstrap-carousel.js</a></td>
+              <td>Carousel add</td>
+            </tr>
          </tbody>
        </table>
        <h3>Is javascript necessary?</h3>
@@ -1002,6 +1006,61 @@ $('#myCollapsible').on('hidden', function () {
       </div>
     </section>
 
+     <!-- Carousel
+    ================================================== -->
+
+    <section id="carousel">
+      <div class="page-header">
+        <h1>Carousel <small>bootstrap-carousel.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span3 columns">
+          <p>The carousel plugin creates a carousel douh..</p>
+          <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a>
+        </div>
+        <div class="span9 columns">
+          <h3>Using bootstrap-carousel.js</h3>
+          <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
+            <h3>Markup</h3>
+          <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
+          <pre class="prettyprint linenums"></pre>
+          <h3>Demo</h3>
+
+          <!-- carousel -->
+          <div class="thumbnail carousel">
+
+            <div class="item active">
+              <img src="http://placehold.it/1100x350" alt="">
+              <div class="caption">
+                <h5>Thumbnail label</h5>
+                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              </div>
+            </div>
+
+            <div class="item active">
+              <img src="http://placehold.it/1100x350" alt="">
+              <div class="caption">
+                <h5>Thumbnail label</h5>
+                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              </div>
+            </div>
+
+            <div class="item">
+              <img src="http://placehold.it/1100x350" alt="">
+              <div class="caption">
+                <h5>Thumbnail label</h5>
+                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+              </div>
+            </div>
+
+          </div>
+
+
+
+        </div>
+      </div>
+    </section>
+
       <!-- Footer
       ================================================== -->
       <footer class="footer">
@@ -1028,6 +1087,7 @@ $('#myCollapsible').on('hidden', function () {
     <script src="../js/bootstrap-popover.js"></script>
     <script src="../js/bootstrap-button.js"></script>
     <script src="../js/bootstrap-collapse.js"></script>
+    <script src="../js/bootstrap-carousel.js"></script>
     <script src="assets/js/application.js"></script>
     <script>
       $(function () {
@@ -1036,13 +1096,14 @@ $('#myCollapsible').on('hidden', function () {
           selector: "a[rel=twipsy]"
         })
 
-        //popover demo
+        // popover demo
         $("a[rel=popover]")
           .popover()
           .click(function(e) {
             e.preventDefault()
           })
 
+        // button state demo
         $('#fat-btn')
           .click(function () {
             var btn = $(this)
@@ -1051,6 +1112,9 @@ $('#myCollapsible').on('hidden', function () {
               btn.button('reset')
             }, 3000)
           })
+
+        // carousel demo
+        $('.carousel').carousel()
       })
     </script>
   </body>

js/bootstrap-carousel.js

@@ -25,12 +25,29 @@
  /* CAROUSEL CLASS DEFINITION
   * ========================= */
 
-  var Carousel = function () {
-
+  var Carousel = function (element) {
+    this.$element = $(element)
+    this.cycle()
   }
 
   Carousel.prototype = {
 
+    cycle: function () {
+      this.interval = setInterval($.proxy(this.right, this), 500)
+    }
+
+  , pause: function () {
+      clearInterval(this.interval)
+    }
+
+  , right: function () {
+
+    }
+
+  , left: function () {
+
+    }
+
   }
 
 

lib/modals.less

@@ -22,6 +22,8 @@
   top: 50%;
   left: 50%;
   z-index: 11000;
+  max-height: 500px;
+  overflow: auto;
   width: 560px;
   margin: -250px 0 0 -250px;
   background-color: @white;

lib/thumbnails.less

@@ -32,3 +32,11 @@ a.thumbnail:hover {
 .thumbnail .caption {
   padding: 9px;
 }
+
+.carousel .item {
+  display: none;
+}
+
+.carousel .active {
+  display: block;
+}
\ No newline at end of file