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

	<!-- styling -->
	<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/css/scrollable-navig.css" />

<%--{{{ style --%>
<style>
/* root element for the entire scrollable setup */
div.scrollable {
	position:relative;
	overflow:hidden;
	width: 646px;
	height:300px;
}

/*
	root element for scrollable items. It is
	absolutely positioned and given a large width.
*/
#thumbs {
	position:absolute;
	width:20000em;
	clear:both;
	border:1px solid #222;
}

/* custom positioning for navigational links */
a.prev, a.next {
	margin-top:118px;
}

<c:set var="css">
/* single item */
#thumbs div {
	float:left;
	width:214px;
	height:300px;
	background:#333 url(${cdn}/img/global/gradient/h150.png) repeat-x 0 146px;
	color:#fff;
	border-left:1px solid #333;
	cursor:pointer;
}

/* style when mouse is over the item */
#thumbs div.hover {
	background-color:#444;
}

/* style when element is active (clicked) */
#thumbs div.active {
	background-color:#066;
	cursor:default;
}
</c:set>

${css}

#thumbs h3, #thumbs p, #thumbs span {
	margin:13px;
	font-family:"bitstream vera sans";
	font-size:13px;
	color:#fff;
}

#thumbs h3 em {
	font-style:normal;
	color:yellow;
}
</style>

<%--}}}--%>

</head>

<body>

<!-- navigator -->
<div class="navi"></div>

<!-- prev link -->
<a class="prev"></a>

<!-- root element for scrollable -->
<div class="scrollable">

	<div id="thumbs">

		<c:forEach begin="3" end="15" var="i">
			<div>

				<img src="${cdn}/img/demos/photos/thumb${i + 2}.jpg" />

				<h3><em>${i - 2}. </em>An example title</h3>

				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
					tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
				</p>

				<span class="blue">${i * 20} sec</span>

			</div>
		</c:forEach>

	</div>

</div>

<!-- next link -->
<a class="next"></a>

<!-- let rest of the page float normally -->
<br clear="all" />

<!-- javascript coding -->
<c:set var="js">
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {

	// initialize scrollable
	$("div.scrollable").scrollable({ items: '#thumbs', hoverClass: 'hover' });

});
</script>
</c:set>

${js}