This repository has been archived by the owner on Jul 18, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
51 lines (40 loc) · 2.72 KB
/
example.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example SlidePanel</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/javascript" href="assets/slidepanel.css" />
<script type="text/javascript" src="assets/slidepanel.js"></script>
<script type="text/javascript">
jQuery(function($) {
// runs when the document is done rendering
// activates the SlidePanel plugin for all elements with class 'SlidePanelInsert'
$('.SlidePanelInsert').slidePanel();
});
</script>
</head>
<body>
<!-- These two assets do all the work! Make sure to include them -->
<link rel="stylesheet" type="text/css" href="assets/slidepanel.css">
<script type="text/javascript" src="assets/slidepanel.js"></script>
<div class="SlidePanelInsert left hover" >
<div style="width:80px;" class="links innerBorder" ><!--
--><a style="width:80px;height:60px;border-top: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;" href="#" ><img src="images/kitten1_thumb.jpg" height="120" width="80"></a><!--
--><a style="width:80px;height:60px;border-top: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;" href="#" ><img src="images/kitten2_thumb.jpg" height="120" width="80"></a><!--
--><a style="width:80px;height:60px;border-top: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;" href="#" ><img src="images/kitten3_thumb.jpg" height="120" width="80"></a><!--
--><a style="width:80px;height:60px;border-top: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;" href="#" ><img src="images/kitten4_thumb.jpg" height="120" width="80"></a><!--
--><a style="width:80px;height:60px;border-top: 1px solid #000000;border-bottom: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;" href="#" ><img src="images/kitten5_thumb.jpg" height="120" width="80"></a></div>
<!-- This style="..." attribute determines the size of the panels -->
<div style="width: 400px; height: 300px;" class="panelWrapper" >
<div class="panelContainer" >
<div class="panel" ><img src="images/kitten1.jpg"></div>
<div class="panel" ><img src="images/kitten2.jpg"></div>
<div class="panel" ><img src="images/kitten3.jpg"></div>
<div class="panel" ><img src="images/kitten4.jpg"></div>
<div class="panel" ><img src="images/kitten5.jpg"></div>
</div>
</div>
</div>
</body>
</html>