-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (95 loc) · 3.41 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jSlidingBox</title>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<!-- CUSTOM -->
<style>
#actions {
margin:30px auto;
width:720px;
height:400px;
background:#222;
overflow:hidden;
}
#actions .actionItem {
position:relative;
display:block;
width:240px;
height:400px;
overflow:hidden;
float:left;
text-decoration:none;
curosr:pointer;
}
#actions .actionItem .imgThumb { margin:0; }
#actions .actionItem .content {
position:absolute;
top:290px;
left:0;
padding:10px 20px;
min-height:90px;
width:200px;
height:auto;
background:#333;
}
/*#actions .actionItem:hover .content { background:#F60; }*/
#actions .actionItemAlt .content { background:#444; }
#actions .actionItem h4,
#actions .actionItem p { margin:0; padding:0 0 15px 0; color:#fff; }
</style>
<!-- JQUERY LIB -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.hoverIntent.minified.js"></script>
<script src="jquery.animate-colors-min.js"></script>
<!-- jSlidingBox -->
<script src="jSlidingBox.js"></script>
<!-- CUSTOM -->
<script>
$(document).ready(function(){
initSlideBox('.actionItem',300,'#FF6600','#000000');
});
</script>
</head>
<body>
<div id="container">
<!-- HEADER -->
<h1>jSlidingBox.js</h1>
<p><strong>Caption sliding box with flexible content height and smart sliding</strong></p>
<p>Last update: 2012-02-21</p>
<hr><!-- HEADER ends -->
<div id="actions">
<a class="actionItem" href="">
<img class="imgThumb" src="http://placehold.it/240x290" width="240" height="290" border="0" alt="" >
<div class="content">
<h4 class="heading">Heading (min) </h4>
<div class="hoverContent">
<p>Pellentesque habitant morbi.</p>
</div>
</div>
</a>
<a class="actionItem actionItemAlt" href="">
<img class="imgThumb" src="http://placehold.it/240x290/bbbbbb" width="240" height="290" border="0" alt="" >
<div class="content">
<h4 class="heading">Heading (normal) </h4>
<div class="hoverContent">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</a>
<a class="actionItem" href="">
<img class="imgThumb" src="http://placehold.it/240x290" width="240" height="290" border="0" alt="" >
<div class="content">
<h4 class="heading">Heading (max) </h4>
<div class="hoverContent">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>