initial

andrebrov · Dec 23, 2010 · 6691556 · 6691556
commit 6691556
Show file tree

Hide file tree

Showing 12 changed files with 4,877 additions and 0 deletions.
diff --git a/README b/README
diff --git a/css/carousel.css b/css/carousel.css
@@ -0,0 +1,170 @@
+.carousel {
+  height: auto;
+  border : 0px solid #000;
+  position : relative;
+  overflow : hidden;
+}
+
+.carousel a {
+  color : #363F53;
+  text-decoration:none;
+}
+
+.carousel li div {
+    font-size:1.0em;  
+}  
+
+.carousel-id {
+    text-align : center;
+    height : 18px;
+    color : #FFF;
+    float : left;
+    text-decoration:none; 
+}
+
+.carousel-id a {
+  cursor : pointer;
+  color : #FFF;
+  text-decoration : none;
+}
+
+.carousel-id a:hover {
+  text-decoration : underline;
+}
+
+.carousel-item-title {
+  color : #333;
+  font-size:1.2em;
+  height: 1.5em;
+}
+
+.carousel a:hover {
+  text-decoration : underline;
+}
+
+.carousel-control {
+  z-index: 9900;
+  position:absolute;
+}
+
+.carousel-control img {
+  height : 55px;
+  width : 45px;
+}
+
+.carousel-control img:hover {
+  height : 50px;
+  width : 50px;
+}
+
+.carousel-left {
+  left :0px;
+}
+
+.carousel-right {
+  right :0px;
+}
+
+.carousel-item {
+  float : left;
+  z-index : 2;
+  background : #FFF;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7x;
+  -opera-border-radius: 7px;
+  border-radius: 7px;
+  border : 0;
+  overflow : hidden;
+}
+
+.carousel-content {  
+  font-size:.8em;
+  z-index :1;
+  position : relative;
+  overflow : hidden;
+}
+
+.carousel-content-scroller  {
+  z-index :1;    
+  position : absolute;
+  overflow-x:hidden;
+  overflow-y:hidden;     
+}
+
+.carousel-item-content {
+  height : 65px;
+  overflow : hidden;    
+}
+
+.carousel-nav {    
+    display:none;        
+    height : 25px;
+}
+
+.carousel-mid {
+    margin-left : auto;
+    margin-right : auto;
+    height : 1.5em;
+}
+
+.carousel-item-selected {
+  background : #99D481;
+}
+
+.carousel-item-content {
+    padding:0 0.5em;
+    position:relative;
+    top:5px;
+}
+
+.carousel-title {
+    padding:0 0.5em;
+    font-size:12px;
+    position:relative;
+}
+
+.carousel-id {
+    width : 15px;
+    height : 20px;
+    margin-left : 3px;
+    margin-right : 3px;
+    padding-left : 2px;
+    padding-right : 2px;
+    cursor : pointer;
+}
+
+/*Carousel themes*/
+.carousel-theme {
+    font-family: Arial,sans-serif;
+    background: #fff;
+    border: 0;
+    padding:5px;
+}
+
+.carousel-item-theme {
+    border: 1px solid #333 !important;
+    background:#fff;
+    position:relative;
+}
+
+.carousel-title-theme {
+    color:#fff;
+}
+
+.carousel-title-theme a:link, .carousel-title-theme a:visited {
+    color: #333;
+}
+
+.carousel-id-theme {
+    background:#333;
+    border: 1px solid #000 !important;
+	-moz-border-radius: 7px;
+  -webkit-border-radius: 7x;
+  -opera-border-radius: 7px;
+  border-radius: 7px;
+}
+
+.carousel-id-selected-theme {
+    color:#333;
+    background : #FFF;
+}
diff --git a/css/jquery.mobile-1.0a2.css b/css/jquery.mobile-1.0a2.css
diff --git a/images/1.jpg b/images/1.jpg
diff --git a/images/2.jpg b/images/2.jpg
diff --git a/images/3.jpg b/images/3.jpg
diff --git a/images/4.jpg b/images/4.jpg
diff --git a/images/5.jpg b/images/5.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+    <head>
+        <style type="text/css" media="screen">@import "css/jquery.mobile-1.0a2.css";</style>        
+        <link rel="stylesheet" href="css/carousel.css" type="text/css"/>
+		<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>				
+        <script src="js/jquery.mobile-1.0a2.js" type="application/x-javascript" charset="utf-8"></script>			
+        <script src="js/carousel.js"></script>		
+        <title>Touch Carousel</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <style>
+          a {
+            color : #333;
+          }
+        </style>										
+    </head>
+    <body>
+		<div data-role="page" id="main_page" data-theme="b">
+			<div data-role="content" >	
+				<div id="content" style="height:100%;width:300px;">                    					
+					<div style="height:100%;width:300px;">
+					<!-- start carousel widget html --> 
+						<div style="height:460px;width:300px;">
+							<div  id="carousel" class="carousel">							
+								<div id="carousel_scrollpane" class="carousel-content">
+									<div id="carousel_content" class="carousel-content-scroller"> </div>
+								</div>
+								<div id="carousel_nav" class="carousel-nav">
+									<div id="carousel_mid" class="carousel-mid"></div>
+								</div>
+							</div>
+						</div><!-- end carousel widget html -->
+					<!-- template used for the carousel items -->
+					<div id="carousel_template" style="display:none">
+						<div class="carousel-item">
+							<div style="height:2em;font-size:1.5em;padding-bottom:15px;">@{title}</div>
+							<div id="carousel_item_@{id}" >
+								<div style="float:left;width:100%"><img src="@{image}" /></div>				      								
+							</div>
+						</div>
+				    </div>
+					<script>
+			var carousel = new $.widgets.Carousel( {
+			 	uuid : "carousel",
+				args : { "scrollInterval" : 600,"itemWidth":290
+				},
+				  	value : [
+							{ "title" : "Tron.Legacy",
+					  	      "image" : "images/1.jpg"
+					  	    },
+					  	    { "title" : "Yogi Bear",
+					  	      "image" : "images/2.jpg"
+					  	    },
+					  	    { "title" : "The Chronicles of Narnia: The Voyage of the Dawn Treader",
+					  	      "image" : "images/3.jpg"
+					  	    },
+					  	    { "title" : "The Fighter",
+					  	      "image" : "images/4.jpg"
+					  	    },
+					  	    { "title" : "Tangled",
+					  	      "image" : "images/5.jpg"
+					  	    }
+					]
+				});					  
+		</script>		
+					<!-- end item template -->								
+				</div> <!-- content -->
+			</div>
+        </div>
+    </body>
+</html>