-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.html
96 lines (80 loc) · 4.19 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Visualizations of Jot Programs</title>
<script src="./js/jquery-1.10.2.min.js"></script>
<script src="./js/jquery.jqzoom-core-pack.js"></script>
<link rel="stylesheet" href="./css/jquery.jqzoom.css" type="text/css">
<style>
body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}
ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
border:1px solid red;
}
.jqzoom{
text-decoration:none;
float:left;
}
</style>
<script>
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:false,
preloadImages:false,
alwaysOn:false,
zoomWidth: 500,
zoomHeight: 500,
xOffset:90,
yOffset:0,
position:'right',
title:true,
showEffect:'fadein',
hideEffect:'fadeout',
fadeinSpeed:'fast',
fadeoutSpeed:'fast'
});
//$('.jqzoom').jqzoom();
});
</script>
</head>
<body>
<br> <br> <br>
<center><H1> Tarpit Visualizations Gallery </H1></center>
<div class="clearfix" id="content" style="margin-top:50px;margin-left:50px;height:500px;width:300px;" >
<div class="clearfix">
<a href="imgProd/1024-1024-ao-nf.bmp" class="jqzoom" rel='gal1' title='Tarpit Visualizations'>
<img src="imgProd/256-256-ao-nf.bmp" title='Jot Visualizations' style="border: 4px solid #666;">
</a>
</div>
<br>
<div class="clearfix">
<ul id="thumblist" class="clearfix" >
<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-ao-nf.bmp',largeimage: './imgProd/1024-1024-ao-nf.bmp'}"><img src='imgProd/thumbs/128-128-ao-nf.bmp'> </a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-cbn.bmp',largeimage: './imgProd/1024-1024-cbn.bmp'}"><img src='imgProd/thumbs/128-128-cbn.bmp'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-cbv.bmp',largeimage: './imgProd/1024-1024-cbv.bmp'}"><img src='imgProd/thumbs/128-128-cbv.bmp'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-ha-nf.bmp',largeimage: './imgProd/1024-1024-ha-nf.bmp'}"><img src='imgProd/thumbs/128-128-ha-nf.bmp'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-hn.bmp',largeimage: './imgProd/1024-1024-hn.bmp'}"><img src='imgProd/thumbs/128-128-hn.bmp'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-hnf.bmp',largeimage: './imgProd/1024-1024-hnf.bmp'}"><img src='imgProd/thumbs/128-128-hnf.bmp'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-whnf.bmp',largeimage: './imgProd/1024-1024-whnf.bmp'}"><img src='imgProd/thumbs/128-128-whnf.bmp'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-big-big-ao.bmp',largeimage: './imgProd/1024-1024-big-big-ao.bmp'}"><img src='imgProd/thumbs/128-128-big-big-ao.bmp'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/256-256-big-big-bn.bmp',largeimage: './imgProd/1024-1024-big-big-bn.bmp'}"><img src='imgProd/thumbs/128-128-big-big-bn.bmp'></a></li>
</ul>
</div>
</div>
</body>
</html>