Permalink
Browse files

new file: loopedslider0.5.1/example-1.html

	new file:   loopedslider0.5.1/example-2.html
	new file:   loopedslider0.5.1/example-3.html
	new file:   loopedslider0.5.1/image-01.jpg
	new file:   loopedslider0.5.1/image-02.jpg
	new file:   loopedslider0.5.1/image-03.jpg
	new file:   loopedslider0.5.1/image-04.jpg
	new file:   loopedslider0.5.1/loopedslider.js
	new file:   loopedslider0.5.1/loopedslider.min.js
  • Loading branch information...
1 parent 71a4d8d commit e6befb11c4663dff37c3081233b7e529d95638ec @nathansearles nathansearles committed May 6, 2009
@@ -0,0 +1,56 @@
+<!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>loopedSlider jQuery Plugin</title>
+
+ <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="loopedslider.js" type="text/javascript" charset="utf-8"></script>
+
+ <style type="text/css" media="screen">
+ /*
+ * Required
+ */
+ .container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
+ .slides { position:absolute; top:0; left:0; }
+ .slides div { position:absolute; top:0; width:500px; display:none; }
+ /*
+ * Optional
+ */
+ #loopedSlider,#newsSlider { margin:0 auto; width:500px; position:relative; clear:both; }
+ ul.pagination { list-style:none; padding:0; margin:0; }
+ ul.pagination li { float:left; }
+ ul.pagination li a { padding:2px 4px; }
+ ul.pagination li.active a { background:blue; color:white; }
+ </style>
+</head>
+
+<body>
+<div id="loopedSlider">
+ <div class="container">
+ <div class="slides">
+ <div><img src="image-01.jpg" width="500" height="375" alt="First Image" /></div>
+ <div><img src="image-02.jpg" width="500" height="375" alt="Second Image" /></div>
+ <div><img src="image-03.jpg" width="500" height="375" alt="Third Image" /></div>
+ <div><img src="image-04.jpg" width="500" height="375" alt="Fourth Image" /></div>
+ </div>
+ </div>
+ <a href="#" class="previous">previous</a>
+ <a href="#" class="next">next</a>
+ <ul class="pagination">
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ </ul>
+</div>
+<script type="text/javascript" charset="utf-8">
+ $(function(){
+ $('#loopedSlider').loopedSlider();
+ });
+</script>
+</body>
+</html>
@@ -0,0 +1,78 @@
+<!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>loopedSlider jQuery Plugin</title>
+
+ <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="loopedslider.js" type="text/javascript" charset="utf-8"></script>
+
+ <style type="text/css" media="screen">
+ /*
+ * Required
+ */
+ .container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
+ .slides { position:absolute; top:0; left:0; list-style:none; padding:0; margin:0; }
+ .slides li { position:absolute; top:0; width:500px; display:none; padding:0; margin:0; }
+ /*
+ * Optional
+ */
+ #loopedSlider,#newsSlider { margin:0 auto; width:500px; position:relative; clear:both; }
+ .slides li { padding-bottom:20px; }
+ ul.pagination { list-style:none; padding:0; margin:0; }
+ ul.pagination li { float:left; }
+ ul.pagination li a { padding:2px 4px; }
+ ul.pagination li.active a { background:blue; color:white; }
+ </style>
+</head>
+
+<body>
+<div id="loopedSlider">
+ <div class="container">
+ <ul class="slides">
+ <li>
+ <h1>Slide 1</h1>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.</p>
+ <p>Ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait.</p>
+ </li>
+ <li>
+ <h1>Slide 2</h1>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.</p>
+ <p>Vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut.</p>
+ <p>Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore.</p>
+ </li>
+ <li>
+ <h1>Slide 3</h1>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis.</p>
+ </li>
+ <li>
+ <h1>Slide 4</h1>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.</p>
+ <p>Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
+ <p>Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p>
+ <p>Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem.</p>
+ <p>Iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.</p>
+ </li>
+ </ul>
+ </div>
+ <a href="#" class="previous">previous</a>
+ <a href="#" class="next">next</a>
+ <ul class="pagination">
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ </ul>
+</div>
+<script type="text/javascript" charset="utf-8">
+ $(function(){
+ $('#loopedSlider').loopedSlider({
+ autoHeight: 500
+ });
+ });
+</script>
+</body>
+</html>
@@ -0,0 +1,80 @@
+<!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>loopedSlider jQuery Plugin</title>
+
+ <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="loopedslider.js" type="text/javascript" charset="utf-8"></script>
+
+ <style type="text/css" media="screen">
+ /*
+ * Required
+ */
+ .container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
+ div.slides { position:absolute; top:0; left:0; }
+ ul.slides { position:absolute; top:0; left:0; list-style:none; padding:0; margin:0; }
+ div.slides div,ul.slides li { position:absolute; top:0; width:500px; display:none; padding:0; margin:0; }
+ /*
+ * Optional
+ */
+ #loopedSlider,#newsSlider { margin:0 auto; width:500px; position:relative; clear:both; }
+ ul.pagination { list-style:none; padding:0; margin:0; }
+ ul.pagination li { float:left; }
+ ul.pagination li a { padding:2px 4px; }
+ ul.pagination li.active a { background:blue; color:white; }
+ </style>
+</head>
+
+<body>
+<div id="loopedSlider">
+ <div class="container">
+ <div class="slides">
+ <div><img src="image-01.jpg" width="500" height="375" alt="First Image" /></div>
+ <div><img src="image-02.jpg" width="500" height="375" alt="Second Image" /></div>
+ <div><img src="image-03.jpg" width="500" height="375" alt="Third Image" /></div>
+ <div><img src="image-04.jpg" width="500" height="375" alt="Fourth Image" /></div>
+ </div>
+ </div>
+ <a href="#" class="previous">previous</a>
+ <a href="#" class="next">next</a>
+ <ul class="pagination">
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ </ul>
+</div>
+<div id="newsSlider">
+ <div class="container">
+ <ul class="slides">
+ <li><img src="image-01.jpg" width="500" height="375" alt="First Image" /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
+ <li><img src="image-02.jpg" width="500" height="375" alt="Second Image" /></li>
+ <li><img src="image-03.jpg" width="500" height="375" alt="Third Image" /></li>
+ <li><img src="image-04.jpg" width="500" height="375" alt="Fourth Image" /></li>
+ </ul>
+ </div>
+ <a href="#" class="previous">previous</a>
+ <a href="#" class="next">next</a>
+ <ul class="pagination">
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ <li><a href="#">4</a></li>
+ </ul>
+</div>
+<script type="text/javascript" charset="utf-8">
+ $(function(){
+ $('#loopedSlider').loopedSlider({
+ autoStart: 5000
+ });
+ $('#newsSlider').loopedSlider({
+ autoHeight: 400
+ });
+ });
+</script>
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit e6befb1

Please sign in to comment.