New Sample Module (Image Zoom) to demostrate Effects plugin features.

15 files changed, 151 insertions, 8 deletions

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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb1.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb2.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb3.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb4.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb5.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb6.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb7.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb8.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb9.jpg
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
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/images/zoom/thumb_bg.png
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>