GPL-LICENSE.txt MIT-LICENSE.txt examples/basic.html examples/doc.css examples/example.html @@ -5,42 +5,11 @@ <script src="lib/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> <script src="lib/jquery.carousel.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="lib/reset.css" type="text/css" media="screen" title="no title" charset="utf-8"> - <link rel="stylesheet" href="doc/doc.css" type="text/css" media="screen" title="no title" charset="utf-8"> + <link rel="stylesheet" href="examples/doc.css" type="text/css" media="screen" title="no title" charset="utf-8"> <style type="text/css" media="screen"> - .disabled, .locked { - cursor: default; - color: #bbb; - } - - ul#simple { - position: relative; - } - ul#simple li { - float: left; - width: 200px; - background: #eee; - - } - .button { - cursor: pointer; - } - - .example { - clear: both; - } - - .example .carousel { - border: 1px solid #aaa; - float: left; - display: inline; - } - - .example span { - float: left; - } - - #next, #prev { - margin: 0 1em; + ul { + list-style: disc inside; + margin: 1em; } </style> @@ -64,15 +33,17 @@ <h2>Contents</h2> <ol id="contents"> <li><a href="#introduction">Introduction</a></li> - <li><a href="#introduction">Basic Examples</a></li> - <li><a href="doc/example.html">Extended Example</a></li> + <li><a href="#requirements">Requirements</a></li> + <li><a href="#requirements">Configurations</a></li> + <li><a href="examples/basic.html">Basic Examples</a></li> + <li><a href="examples/example.html">Extended Example</a></li> </ol> <h2 id="introduction">Introduction</h2> <p> Carousel is a very simple <a href="http://jquery.com/">jQuery</a> plugin that will modify any list of items into a horizontal scrolling carousel. There are a few configuration options, but it has purposely been kept feature light to provide a easily adaptable plugin that you can tailer to your specific requirements. </p> - <h2>Requirements</h2> + <h2 id="requirements">Requirements</h2> <p> The dependencies needed to run use it have also kept to a minimum. All you need to do to create a carousel is the following: </p> @@ -81,17 +52,18 @@ <li>Include the jquery.carousel plugin</li> <li>Explicitly give the list items a width and set their margin and padding to 0</li> </ul> - <code> <p> Once these requirements are met you can call the carousel function (specifying a next and previous button) </p> - $("#calendar").carousel({ - nextButton: "#next_week_link", - prevButton: "#previous_week_link", - index: 1, - animateDuration: 1000 - }); - </code> + <code> +<pre> +$("#calendar").carousel({ + nextButton: "#next_week_link", + prevButton: "#previous_week_link", + index: 1, + animateDuration: 1000 +}); +</pre></code> <h2>Configuration</h2> <p> @@ -125,26 +97,5 @@ </tr> </table> - - <h2>Basic Examples</h2> - <div class="example"> - <h3>A Simple Example</h3> - <span id="prev" class="button">prev</span> - <ul id="simple"> - <li>one.0</li> - <li>one.1</li> - <li>one.2</li> - </ul> - <span id="next" class="button">next</span> - </div> - <script type="text/javascript" charset="utf-8"> - $(function() { - $("#simple").carousel({ - nextButton: "#next", - prevButton: "#prev", - index: 1 - }); - }); - </script> </body> </html> \ No newline at end of file index.html @@ -6,7 +6,7 @@ * and GPL (GPL-LICENSE.txt) licenses. * * A jQuery plugn - * http://jquery.com + * http://neophiliac.net */ (function($){ $.fn.carousel = function(options) { @@ -28,7 +28,7 @@ list.css("position", "relative"); list.css("width", list.children().length * listItemWidth); list.css("left", "-" + (listItemWidth * options.index) +"px"); - container.css("width", listItemWidth).css("overflow", "hidden");; + container.addClass("carousel").css("width", listItemWidth).css("overflow", "hidden");; nextButton.bind("click", nextButtonClick); prevButton.bind("click", previousButtonClick); lib/jquery.carousel.js doc/doc.css doc/example.html b3ff84ca16ea65b3c0d3607f8fb1e1d05fa8f0f0 Michael Jones michael.daniel.jones@gmail.com http://github.com/mikejones/carousel/commit/ff7aa915adbdd579dbd7419c3f0487eaa4421113 ff7aa915adbdd579dbd7419c3f0487eaa4421113 2008-11-11T01:01:05-08:00 2008-11-11T01:01:05-08:00 tidied up documentation a bit more 3aab42c0bcc2c674c8403dffaea2993a3deec850 Michael Jones michael.daniel.jones@gmail.com