jquerytools-www/demos/scrollable/multiple-scrollables.htm at master · nylen/jquerytools-www · GitHub

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
<%-- :mode=jsp: --%>
<%@ include file="../standalone.jsf" %>

	<style>
	<c:set var="css">
	/* root element for single scroll */
	.scroll {
		position:relative;
		overflow:hidden;
		width: 394px;
		height: 266px;
		float:left;
	}

	/* root element for the scroll pics */
	.scroll .pics {
		width:20000em;
		position:absolute;
		clear:both;
	}

	/* single scroll item */
	.pics div {
		float:left;
		cursor:pointer;
		width:400px !important;
		height:300px;
		margin:0px;
	}

	/* possible settings for the active scroll */
	.scroll.active {

	}
	</c:set>
	${css}
	</style>

</head>

<body>

<!-- scroll #1 -->
<div class="scroll">
	<div class="pics">
		<div style="background-image:url(http://farm1.static.flickr.com/114/299183878_4feac12b04.jpg)"></div>
		<div style="background-image:url(http://farm1.static.flickr.com/200/507751258_5f13e3d802.jpg)"></div>
		<div style="background-image:url(http://farm1.static.flickr.com/30/37446217_14bc95631a.jpg)"></div>
	</div>
</div>

<!-- scroll #4 -->
<div class="scroll">
	<div class="pics">
		<div style="background-image:url(http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg)"></div>
		<div style="background-image:url(http://farm1.static.flickr.com/164/399223606_b875ddf797.jpg)"></div>
		<div style="background-image:url(http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg)"></div>
	</div>
</div>

<!-- scroll #3 -->
<div class="scroll">
	<div class="pics">
		<div style="background-image:url(http://farm4.static.flickr.com/3155/2636513939_cd75b704ec.jpg)"></div>
		<div style="background-image:url(http://farm1.static.flickr.com/40/122343298_22333fb8e3.jpg)"></div>
		<div style="background-image:url(http://farm4.static.flickr.com/3105/2618870872_cf22d3cdb1.jpg)"></div>
	</div>
</div>

<!-- scroll #4 -->
<div class="scroll">
	<div class="pics">
		<div style="background-image:url(http://farm4.static.flickr.com/153/399232237_6928a527c1.jpg)"></div>
		<div style="background-image:url(http://farm1.static.flickr.com/50/117346182_1fded507fa.jpg)"></div>
		<div style="background-image:url(http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75.jpg)"></div>
	</div>
</div>

<br clear="all" />

<script>
$(function() {
<c:set var="js">
// enable circular scrollables with a click handler
$(".scroll").scrollable({ circular: true }).click(function() {
	$(this).data("scrollable").next();
});
</c:set>
${js}
});
</script>