1 files changed, 88 insertions, 0 deletions
diff --git a/jquery-img-rotator.xhtml b/jquery-img-rotator.xhtml
new file mode 100644
index 0000000..cea34b8
--- /dev/null
+++ b/jquery-img-rotator.xhtml
@@ -0,0 +1,88 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Image Rotator</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<style type="text/css">
+    #imglist {
+        position: relative;
+        width: 630px;
+        height: 420px;
+    }
+    <!-- div tags inside of #imglist block -->
+    #imglist div {
+        position: absolute;
+        z-index: 0;
+    }
+    #imglist div.previous {
+        z-index: 1;
+    }
+    #imglist div.current {
+        z-index: 2;
+    }
+    #tooltip1 {
+        position: absolute;
+        display: none;
+        opacity: 0.0;
+    }
+</style>
+<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
+<script type="text/javascript">
+<![CDATA[
+    $(function() {
+        $("#viewlarger").hover(
+            function() {
+                var offset = $("#viewlarger").offset();
+                console.log(JSON.stringify(offset));
+                $("#tooltip1").css({top: offset.top, left: offset.left}).css("display", "block").animate({opacity: 1.0}, 300);
+            },
+            function() {
+                $("#tooltip1").animate({opacity: 0.0}, 300, function() {
+                    $(this).css("display", "none");
+                });
+            }
+        );
+
+        setInterval(rotateImages, 4000);
+    });
+
+    function rotateImages() {
+        var currImg = $('#imglist div.current');
+        var nextImg = currImg.next();
+        if (nextImg.length == 0)
+            nextImg = $("#imglist div:first");
+
+        <!-- current img is now 1 step underneath the next img -->
+        currImg.removeClass("current").addClass("previous");
+        <!-- next img is now at the top of stack, and is transparent, so previous still stays on for some interval -->
+        nextImg.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000,
+            function() {
+                currImg.removeClass("previous"); <!-- remember that we started with only 1 div having current class --->
+            });
+    }
+    
+]]>
+</script>
+</head>
+<body>
+<h1>Image Rotator</h1>
+<div id="imglist">
+  <div class="current"><img class="imgslides" src="subbies/img1.jpg" alt="img1" width="630" height="420px" /></div>
+  <div><img class="imgslides" src="subbies/img2.jpg" alt="img2" width="630px" height="420px" /></div>
+  <div><img class="imgslides" src="subbies/img3.jpg" alt="img3" width="630px" height="420px" /></div>
+  <div><img class="imgslides" src="subbies/img4.jpg" alt="img4" width="630px" height="420px" /></div>
+</div>
+<h1>Tooltip</h1>
+<p>this is my dream ride:<br />
+<a id="viewlarger" href="subbies/img1.jpg"><img src="subbies/img1.jpg" alt="img1" width="150px" height="100px" /></a><br />
+hover to enlarge<br />
+Line 2<br />
+Line 3<br />
+</p>
+<div id="tooltip1">
+<img src="subbies/img1.jpg" alt="img1" />
+</div>
+</body>
+</html>
+