Adding an example which works with jsquery

author: Manolo Carrasco <manolo@apache.org> 2011-09-05 18:43:12 +0000
committer: Manolo Carrasco <manolo@apache.org> 2011-09-05 18:43:12 +0000
commit: 49cf7964a7ad1e4b34bc7ae53dbd219fa123e4e7 (patch)
tree: 580424cb65e0769f8f2899a40cfffa1c1bc867f7 /jsquery
parent: 987ce7f17fab929ca21e38289b4b88dea6fd2ee3 (diff)
download: gwtquery-49cf7964a7ad1e4b34bc7ae53dbd219fa123e4e7.tar.gz
gwtquery-49cf7964a7ad1e4b34bc7ae53dbd219fa123e4e7.zip
11 files changed, 105 insertions, 0 deletions
diff --git a/jsquery/samples/images/zoom/thumb1.jpg b/jsquery/samples/images/zoom/thumb1.jpg
new file mode 100644
index 00000000..553aa432
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb1.jpg
diff --git a/jsquery/samples/images/zoom/thumb2.jpg b/jsquery/samples/images/zoom/thumb2.jpg
new file mode 100644
index 00000000..3d1bbb8c
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb2.jpg
diff --git a/jsquery/samples/images/zoom/thumb3.jpg b/jsquery/samples/images/zoom/thumb3.jpg
new file mode 100644
index 00000000..53fb0cb2
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb3.jpg
diff --git a/jsquery/samples/images/zoom/thumb4.jpg b/jsquery/samples/images/zoom/thumb4.jpg
new file mode 100644
index 00000000..7a983c2e
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb4.jpg
diff --git a/jsquery/samples/images/zoom/thumb5.jpg b/jsquery/samples/images/zoom/thumb5.jpg
new file mode 100644
index 00000000..c33ad5e6
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb5.jpg
diff --git a/jsquery/samples/images/zoom/thumb6.jpg b/jsquery/samples/images/zoom/thumb6.jpg
new file mode 100644
index 00000000..21ef8c41
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb6.jpg
diff --git a/jsquery/samples/images/zoom/thumb7.jpg b/jsquery/samples/images/zoom/thumb7.jpg
new file mode 100644
index 00000000..08520559
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb7.jpg
diff --git a/jsquery/samples/images/zoom/thumb8.jpg b/jsquery/samples/images/zoom/thumb8.jpg
new file mode 100644
index 00000000..20fa88f6
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb8.jpg
diff --git a/jsquery/samples/images/zoom/thumb9.jpg b/jsquery/samples/images/zoom/thumb9.jpg
new file mode 100644
index 00000000..a215481d
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb9.jpg
diff --git a/jsquery/samples/images/zoom/thumb_bg.png b/jsquery/samples/images/zoom/thumb_bg.png
new file mode 100644
index 00000000..6068e4e9
--- /dev/null
+++ b/jsquery/samples/images/zoom/thumb_bg.png
diff --git a/jsquery/samples/zoom.html b/jsquery/samples/zoom.html
new file mode 100644
index 00000000..d4d2f9a1
--- /dev/null
+++ b/jsquery/samples/zoom.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<title>GwtQuery: Fancy Thumbnail Hover Effect</title>
+<style type="text/css">
+	body {
+		font-family: verdana;
+		margin: 0; 
+		padding: 0;
+	}
+	* {
+	    margin: 0; 
+	    padding: 0;
+	}
+	img {
+	    border: none;
+	}
+	.container {
+		height: 360px;
+		width: 360px;
+		margin: -180px 0 0 -180px;
+		top: 40%; left: 50%;
+		position: absolute;
+	}
+	ul.thumb {
+		float: left;
+		list-style: none;
+		margin: 0; padding: 10px;
+		width: 360px;
+	}
+	ul.thumb li {
+		margin: 0; padding: 5px;
+		float: left;
+		position: relative;
+		width: 110px;
+		height: 110px;
+	}
+	ul.thumb li img {
+		width: 100px; height: 100px;
+		border: 1px solid #ddd;
+		padding: 5px;
+		background: #f0f0f0;
+		position: absolute;
+		left: 0; top: 0;
+		-ms-interpolation-mode: bicubic; 
+	}
+	ul.thumb li img.hover {
+		background:url(images/zoom/thumb_bg.png) no-repeat center center;
+		border: none;
+	}
+</style>
+ <script language="javascript" src="../target/jsquery-1.1.0-SNAPSHOT/jsquery/jsquery.nocache.js" ></script>
+</head>
+
+<body>
+<div class="container">
+<br/>
+ Soh Tanaka's Fancy Thumbnail Hover Effect, it works with jquery and JsQuery.
+<br/>
+<br/>
+<ul class="thumb">
+	<li><a href="#"><img src="images/zoom/thumb1.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb2.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb3.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb4.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb5.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb6.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb7.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb8.jpg" alt="" /></a></li>
+	<li><a href="#"><img src="images/zoom/thumb9.jpg" alt="" /></a></li>
+</ul>
+</div>
+<script> 
+$(document).ready(function(){
+	$('ul.thumb li').hover(function() {
+		$(this).css({'z-index' : '10'});
+		$(this).find('img').addClass("hover").stop()
+			.animate({
+				marginTop: '-110px', 
+				marginLeft: '-110px', 
+				top: '50%', 
+				left: '50%', 
+				width: '174px', 
+				height: '174px',
+				padding: '20px' 
+			}, 200);
+		
+		} , function() {
+		$(this).css({'z-index' : '0'});
+		$(this).find('img').removeClass("hover").stop()
+			.animate({
+				marginTop: '0', 
+				marginLeft: '0',
+				top: '0', 
+				left: '0', 
+				width: '100px', 
+				height: '100px', 
+				padding: '5px'
+			}, 400);
+	});
+});
+</script> 
+</body>
+</html>
author	Manolo Carrasco <manolo@apache.org>	2011-09-05 18:43:12 +0000
committer	Manolo Carrasco <manolo@apache.org>	2011-09-05 18:43:12 +0000
commit	49cf7964a7ad1e4b34bc7ae53dbd219fa123e4e7 (patch)
tree	580424cb65e0769f8f2899a40cfffa1c1bc867f7 /jsquery
parent	987ce7f17fab929ca21e38289b4b88dea6fd2ee3 (diff)
download	gwtquery-49cf7964a7ad1e4b34bc7ae53dbd219fa123e4e7.tar.gz gwtquery-49cf7964a7ad1e4b34bc7ae53dbd219fa123e4e7.zip