From 223de0ebfdbc1cc92b8591c2da03a3dc7e1a55de Mon Sep 17 00:00:00 2001
From: Manolo Carrasco <manolo@apache.org>
Date: Mon, 21 Jun 2010 09:12:59 +0000
Subject: New Sample Module (Image Zoom) to demostrate Effects plugin features.

---
 .../gwtquery/samples/GwtQueryImageZoom.gwt.xml     |   6 ++
 .../samples/client/GwtQueryEffectsModule.java      |  13 +--
 .../gwtquery/samples/client/GwtQueryImageZoom.java |  31 ++++++
 .../gwtquery/samples/public/GwtQueryImageZoom.html | 108 +++++++++++++++++++++
 .../gwtquery/samples/public/images/zoom/thumb1.jpg | Bin 0 -> 12047 bytes
 .../gwtquery/samples/public/images/zoom/thumb2.jpg | Bin 0 -> 10128 bytes
 .../gwtquery/samples/public/images/zoom/thumb3.jpg | Bin 0 -> 11655 bytes
 .../gwtquery/samples/public/images/zoom/thumb4.jpg | Bin 0 -> 8609 bytes
 .../gwtquery/samples/public/images/zoom/thumb5.jpg | Bin 0 -> 12261 bytes
 .../gwtquery/samples/public/images/zoom/thumb6.jpg | Bin 0 -> 12163 bytes
 .../gwtquery/samples/public/images/zoom/thumb7.jpg | Bin 0 -> 11417 bytes
 .../gwtquery/samples/public/images/zoom/thumb8.jpg | Bin 0 -> 11801 bytes
 .../gwtquery/samples/public/images/zoom/thumb9.jpg | Bin 0 -> 11950 bytes
 .../samples/public/images/zoom/thumb_bg.png        | Bin 0 -> 2208 bytes
 samples/src/main/webapp/index.html                 |   1 +
 15 files changed, 151 insertions(+), 8 deletions(-)
 create mode 100644 samples/src/main/java/gwtquery/samples/GwtQueryImageZoom.gwt.xml
 create mode 100644 samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java
 create mode 100644 samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb1.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb2.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb3.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb4.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb5.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb6.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb7.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb8.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb9.jpg
 create mode 100644 samples/src/main/java/gwtquery/samples/public/images/zoom/thumb_bg.png

(limited to 'samples/src')

diff --git a/samples/src/main/java/gwtquery/samples/GwtQueryImageZoom.gwt.xml b/samples/src/main/java/gwtquery/samples/GwtQueryImageZoom.gwt.xml
new file mode 100644
index 00000000..233f3321
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/GwtQueryImageZoom.gwt.xml
@@ -0,0 +1,6 @@
+<module>
+    <inherits name='com.google.gwt.query.Query'/>
+    <inherits name='gwtquery.Plugins'/>
+    <entry-point class='gwtquery.samples.client.GwtQueryImageZoom'/>
+</module>
+    
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java
index 80ac00df..0c484f24 100644
--- a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java
@@ -32,6 +32,7 @@ public class GwtQueryEffectsModule implements EntryPoint {
     $(".note").append(" Hello");
     
     final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects);
+    final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects);
     
     $("#b0").width(150).css("font-size", "10px").toggle(new Function() {
       public void f(Element e) {
@@ -83,23 +84,19 @@ public class GwtQueryEffectsModule implements EntryPoint {
     
     $("#b2").toggle(new Function() {
       public void f(Element e) {
-        $(".a").toggle();
-      }
-    }, new Function() {
-      public void f(Element e) {
-        a.as(Effects.Effects).clipUp();
+        b.as(Effects.Effects).clipUp();
       }
     }, new Function() {
       public void f(Element e) {
-        a.as(Effects.Effects).clipDown();
+        b.as(Effects.Effects).clipDown();
       }
     }, new Function() {
       public void f(Element e) {
-        a.as(Effects.Effects).clipDisappear();
+        b.as(Effects.Effects).clipDisappear();
       }
     }, new Function() {
       public void f(Element e) {
-        a.as(Effects.Effects).clipAppear();
+        b.as(Effects.Effects).clipAppear();
       }
     });
     
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java
new file mode 100644
index 00000000..84aafdf9
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java
@@ -0,0 +1,31 @@
+package gwtquery.samples.client;
+
+import static com.google.gwt.query.client.GQuery.$;
+
+import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.query.client.Function;
+import com.google.gwt.query.client.plugins.Effects;
+
+/**
+ * @author Manolo Carrasco
+ */
+public class GwtQueryImageZoom implements EntryPoint {
+
+  public void onModuleLoad() {
+    // Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka
+    // http://www.sohtanaka.com/web-design/examples/image-zoom/
+    $("ul.thumb li").hover(new Function() {
+      public void f(Element e) {
+      $(e).css("z-index", "10").find("img").addClass("hover")
+        .as(Effects.Effects).stop().as(Effects.Effects)
+        .animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px'", 200);
+      }} , new Function() {
+        public void f(Element e) {
+      $(e).css("z-index", "0").find("img").removeClass("hover")
+        .as(Effects.Effects).stop().as(Effects.Effects)
+        .animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'", 600);
+    }});
+    
+  }
+}
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html
new file mode 100644
index 00000000..9c01206d
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryImageZoom.html
@@ -0,0 +1,108 @@
+<!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="gwtquery.samples.GwtQueryImageZoom.nocache.js"></script>
+</head>
+
+<body>
+<div class="container">
+<br/>
+ Soh Tanaka's Fancy Thumbnail Hover Effect ported to GwtQuery
+<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>
+<!-- Original jQuery code 
+<script language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
+<script type="text/javascript"> 
+	$(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>
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb1.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb1.jpg
new file mode 100644
index 00000000..553aa432
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb1.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb2.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb2.jpg
new file mode 100644
index 00000000..3d1bbb8c
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb2.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb3.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb3.jpg
new file mode 100644
index 00000000..53fb0cb2
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb3.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb4.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb4.jpg
new file mode 100644
index 00000000..7a983c2e
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb4.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb5.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb5.jpg
new file mode 100644
index 00000000..c33ad5e6
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb5.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb6.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb6.jpg
new file mode 100644
index 00000000..21ef8c41
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb6.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb7.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb7.jpg
new file mode 100644
index 00000000..08520559
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb7.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb8.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb8.jpg
new file mode 100644
index 00000000..20fa88f6
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb8.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb9.jpg b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb9.jpg
new file mode 100644
index 00000000..a215481d
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb9.jpg differ
diff --git a/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb_bg.png b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb_bg.png
new file mode 100644
index 00000000..6068e4e9
Binary files /dev/null and b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb_bg.png differ
diff --git a/samples/src/main/webapp/index.html b/samples/src/main/webapp/index.html
index 6f17887d..22bf44fd 100644
--- a/samples/src/main/webapp/index.html
+++ b/samples/src/main/webapp/index.html
@@ -17,6 +17,7 @@
 <li><a href="javascript:goTo('gwtquery.samples.GwtQueryWidgets/GwtQueryWidgets.html')">gwtquery.samples.GwtQueryWidgets/GwtQueryWidgets.html</a></li>
 <li><a href="javascript:goTo('gwtquery.samples.GwtQueryPlugin/GwtQueryPlugin.html')">gwtquery.samples.GwtQueryPlugin/GwtQueryPlugin.html</a></li>
 <li><a href="javascript:goTo('gwtquery.samples.GwtQueryBench/GwtQueryBench.html')">gwtquery.samples.GwtQueryBench/GwtQueryBench.html</a></li>
+<li><a href="javascript:goTo('gwtquery.samples.GwtQueryImageZoom/GwtQueryImageZoom.html')">gwtquery.samples.GwtQueryImageZomm/GwtQueryImageZoom.html</a></li>
     </ul>
   </body>
 </html>
-- 
cgit v1.2.3