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

diff --git a/samples/pom.xml b/samples/pom.xml
index 0e1b5ebc56c5ead95a30aa6896830d6dc254d8c0..b4f3be736abefd2598ecca57141c98f5fdd4ce1f 100644 (file)
--- a/samples/pom.xml
+++ b/samples/pom.xml
@@ -45,6 +45,7 @@
                         <module>gwtquery.samples.GwtQueryDemo</module>
                         <module>gwtquery.samples.GwtQueryPlugin</module>
                         <module>gwtquery.samples.GwtQueryWidgets</module>
+                       <module>gwtquery.samples.GwtQueryImageZoom</module>
                     </modules>
                 </configuration>
                 <executions>
@@ -66,6 +67,7 @@
                   <fileset><directory>src/main/webapp/gwtquery.samples.GwtQueryPlugin</directory></fileset>
                   <fileset><directory>src/main/webapp/gwtquery.samples.GwtQuerySample</directory></fileset>
                   <fileset><directory>src/main/webapp/gwtquery.samples.GwtQueryWidgets</directory></fileset>
+                  <fileset><directory>src/main/webapp/gwtquery.samples.GwtQueryImageZoom</directory></fileset>
                   <fileset><directory>src/main/webapp/test</directory></fileset>
                   <fileset><directory>src/main/webapp/WEB-INF/classes</directory></fileset>
                   <fileset><directory>tomcat</directory></fileset>

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 (file)
index 0000000..233f332
--- /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 80ac00df37a609a5f5b0a36f3851f891b987c117..0c484f24cebb47cf55478bf9f8f01f4b98709905 100644 (file)
--- 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");\r
     \r
     final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects);\r
+    final Effects b = $(".b > div:nth-child(odd)").as(Effects.Effects);\r
     \r
     $("#b0").width(150).css("font-size", "10px").toggle(new Function() {\r
       public void f(Element e) {\r
@@ -83,23 +84,19 @@ public class GwtQueryEffectsModule implements EntryPoint {
     \r
     $("#b2").toggle(new Function() {\r
       public void f(Element e) {\r
-        $(".a").toggle();\r
-      }\r
-    }, new Function() {\r
-      public void f(Element e) {\r
-        a.as(Effects.Effects).clipUp();\r
+        b.as(Effects.Effects).clipUp();\r
       }\r
     }, new Function() {\r
       public void f(Element e) {\r
-        a.as(Effects.Effects).clipDown();\r
+        b.as(Effects.Effects).clipDown();\r
       }\r
     }, new Function() {\r
       public void f(Element e) {\r
-        a.as(Effects.Effects).clipDisappear();\r
+        b.as(Effects.Effects).clipDisappear();\r
       }\r
     }, new Function() {\r
       public void f(Element e) {\r
-        a.as(Effects.Effects).clipAppear();\r
+        b.as(Effects.Effects).clipAppear();\r
       }\r
     });\r
     \r

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 (file)
index 0000000..84aafdf
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryImageZoom.java
@@ -0,0 +1,31 @@
+package gwtquery.samples.client;\r
+\r
+import static com.google.gwt.query.client.GQuery.$;\r
+\r
+import com.google.gwt.core.client.EntryPoint;\r
+import com.google.gwt.dom.client.Element;\r
+import com.google.gwt.query.client.Function;\r
+import com.google.gwt.query.client.plugins.Effects;\r
+\r
+/**\r
+ * @author Manolo Carrasco\r
+ */\r
+public class GwtQueryImageZoom implements EntryPoint {\r
+\r
+  public void onModuleLoad() {\r
+    // Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka\r
+    // http://www.sohtanaka.com/web-design/examples/image-zoom/\r
+    $("ul.thumb li").hover(new Function() {\r
+      public void f(Element e) {\r
+      $(e).css("z-index", "10").find("img").addClass("hover")\r
+        .as(Effects.Effects).stop().as(Effects.Effects)\r
+        .animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px'", 200);\r
+      }} , new Function() {\r
+        public void f(Element e) {\r
+      $(e).css("z-index", "0").find("img").removeClass("hover")\r
+        .as(Effects.Effects).stop().as(Effects.Effects)\r
+        .animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', width: '100px', height: '100px', padding: '5px'", 600);\r
+    }});\r
+    \r
+  }\r
+}
\ 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 (file)
index 0000000..9c01206
--- /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 (file)
index 0000000..553aa43
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 (file)
index 0000000..3d1bbb8
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 (file)
index 0000000..53fb0cb
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 (file)
index 0000000..7a983c2
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 (file)
index 0000000..c33ad5e
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 (file)
index 0000000..21ef8c4
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 (file)
index 0000000..0852055
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 (file)
index 0000000..20fa88f
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 (file)
index 0000000..a215481
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 (file)
index 0000000..6068e4e
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 6f17887d00c4692e53b402edccfb7df6dadf4f6f..22bf44fd69c0f3cde934d1bac256a56ebd0f55ec 100644 (file)
--- 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>