diff options
| author | Kyle K <kylek389@gmail.com> | 2013-06-15 19:52:17 -0500 |
|---|---|---|
| committer | Kyle Kaminski <kyle@kkaminsk.com> | 2013-06-15 19:52:17 -0500 |
| commit | f5f461aaf9f08951fa3990e49b51a076f7036b16 (patch) | |
| tree | deaf01c5633ef17b885d00546e7ea085ab1d1652 /jquery-img-rotator.xhtml | |
| download | websandbox-f5f461aaf9f08951fa3990e49b51a076f7036b16.tar.gz websandbox-f5f461aaf9f08951fa3990e49b51a076f7036b16.tar.bz2 websandbox-f5f461aaf9f08951fa3990e49b51a076f7036b16.zip | |
initial commit
Diffstat (limited to 'jquery-img-rotator.xhtml')
| -rw-r--r-- | jquery-img-rotator.xhtml | 88 |
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> + |