-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcarousel-nested.html
142 lines (140 loc) · 6.59 KB
/
carousel-nested.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jCarousel inside a carousel</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.msCarousel-min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mscarousel.css" />
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.arrowholder{float:right; width:24px; padding:0 3px 0 0}
#btnPrevious, #btnNext{float:left; position:relative; top:5px; cursor:pointer; z-index:23}
#btnNext{top:153px}
.message {
position:relative;
top:-55px;
left:0;
display:none;
background:#000;
color:#fff;
height:55px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px
}
.message div {
padding:5px;
}
.message a, .message a:visited {
color:#fff
}
pre, code {
width:600px;
overflow-x:auto;
overflow-y:hidden;
background:#333;
color:#FFF;
padding:5px;
line-height:1.6em
}
.mstoplinks{padding:3px; border-bottom:2px solid #c3c3c3;}
.mstoplinks a, .mstoplinks a:visited{color:#003366; text-decoration:none; border-right:1px solid #c3c3c3; padding:0 10px}
.mstoplinks a.active, .mstoplinks a.active:visited{color:#003366; text-decoration:none; border-right:1px solid #c3c3c3; padding:0 10px;border-bottom:1px solid #c3c3c3; border-left:1px solid #c3c3c3; }
.version{font-size:12px; color:#EE3C95;}
</style>
</head>
<body>
<div style="clear:both" class="mstoplinks">
<p><a href="index.html">Normal - Horizontal & Vertical</a> <a href="carousel-hidden-feature.html">Hidden Feature</a> <a href="autoScroll.html">Auto Scroll</a> <a href="carousel-nested.html" class="active">Nested Carousel</a> <a href="carousel-with-number.html">Carousel with number</a> <a href="gallery.html">Carousel - Big Image Gallery</a> <a href="http://www.marghoobsuleman.com/jquery-ms-carousel">Help</a></p>
</div>
<h1>jQuery Carousel inside a carousel <sup id="ver" class="version"></sup></h1>
<div id="carouseldiv" style="border:2px solid #c3c3c3; background-color:#FFFFFF">
<div class="set"> <img src="images/menu1-h.jpg" width="30" height="198" /><img src="images/menu-img-1.jpg" width="486" height="198" />
<div class="message">
<div>Drupal is a free and open source content management system (CMS) written in PHP and distributed under the GNU General Public License. ...</div>
</div>
</div>
<div class="set">
<div id="verticalCarousel" style="background-color:#000">
<div class="arrowholder">
<div id="btnPrevious"><img src="images/btnArrowTop.gif" width="24" height="20" alt="Previous" /> </div>
<div id="btnNext"><img src="images/btnArrowBtm.gif" width="24" height="20" alt="Previous" /></div>
</div>
<div class="set">
<div style="background:#C77B3F"><img src="images/menu1.jpg" width="198" height="29" /></div>
<img src="images/menu-img-1.jpg" width="486" height="198" /></div>
<div class="set">
<div style="background:#FFC732"><img src="images/menu2.jpg" width="198" height="29" /></div>
<img src="images/menu-img-2.jpg" width="486" height="198" /></div>
<div class="set">
<div style="background:#007C90"> <img src="images/menu3.jpg" width="198" height="29" /></div>
<img src="images/menu-img-3.jpg" width="486" height="198" /></div>
<div class="set">
<div style="background:#AD6F08"> <img src="images/menu4.jpg" width="198" height="29" /></div>
<img src="images/menu-img-4.jpg" width="486" height="198" /></div>
<div class="set">
<div style="background:#387855"> <img src="images/menu5.jpg" width="198" height="29" /></div>
<img src="images/menu-img-5.jpg" width="486" height="198" /></div>
<div class="set">
<div style="background:#8C4B2D"> <img src="images/menu6.jpg" width="198" height="29" /></div>
<img src="images/menu-img-6.jpg" width="486" height="198" /></div>
</div>
</div>
<div class="set"> <img src="images/menu3-h.jpg" width="30" height="198" /><img src="images/menu-img-3.jpg" width="486" height="198" />
<div class="message">
<div>unique shirts by suleman, shirts for men, men apparels.<br>
Visit: <a href="http://www.giftlelo.com/">http://www.giftlelo.com/</a></div>
</div>
</div>
<div class="set"> <img src="images/menu4-h.jpg" width="30" height="198" /><img src="images/menu-img-4.jpg" width="486" height="198" />
<div class="message">
<div> In computer science, a graph is an abstract data structure that is meant to implement the graph concept from mathematics. </div>
</div>
</div>
<div class="set"> <img src="images/menu5-h.jpg" width="30" height="198" /><img src="images/menu-img-5.jpg" width="486" height="198" />
<div class="message">
<div> The second generation of the World Wide Web, especially the movement away from static webpages to dynamic and shareable content and social networking </div>
</div>
</div>
<div class="set"> <img src="images/menu6-h.jpg" width="30" height="198" /><img src="images/menu-img-6.jpg" width="486" height="198" />
<div class="message">
<div> ActionScript is Adobe Flash's own embedded scripting language. It has a JavaScript like structure and has developed into a flexible and powerful platform for Flash games and interactive multimedia. </div>
</div>
</div>
</div>
<div style="clear:both; padding:10px; border-bottom:1px solid #c3c3c3; margin-bottom:10px;">
<h3>Go to slide #2 and See a vertical carousel</h3>
<input name="previous" id="previous" type="button" value="Previous" />
<input name="next" id="next" type="button" value="Next" />
</div>
<script type="text/javascript">
$(document).ready(function() {
try {
var oHandler = $("#carouseldiv").msCarousel({boxClass:'div.set', width:516, height:198, scrollSpeed:500, showMessage:true, messageClass:'.message', messageOpacity:0.8}).data("msCarousel");
$("#next").click(function() {
oHandler.next();
});
$("#previous").click(function() {
oHandler.previous();
});
oHandlerInsider = $("#verticalCarousel").msCarousel({boxClass:'div.set', width:516, height:198, scrollSpeed:500, vertical:true}).data("msCarousel");
//alert(oHandlerInsider);
$("#btnNext").click(function() {
oHandlerInsider.next();
});
$("#btnPrevious").click(function() {
oHandlerInsider.previous();
});
//no use
$("#ver").html("v"+oHandler.getVersion());
} catch(e) {
alert(e.message);
}
})
</script>
</body>
</html>