Talk:Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<a href="http://www.baidu.com"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" onmouseover="this.src='http://www.codefans.net/jscss/demoimg/wall_s5.jpg'" border="0" /></a>
+
<!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>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>Image Preview with jQuery</title>
 +
<meta name="description" content="Easiest jQuery Tooltip Ever">
 +
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
 +
<script type="text/javascript">
 +
this.imagePreview = function(){
 +
xOffset = 10;
 +
yOffset = 30;
 +
$("a.preview").hover(function(e){
 +
this.t = this.title;
 +
this.title = "";
 +
var c = (this.t != "") ? "<br/>" + this.t : "";
 +
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
 +
$("#preview")
 +
.css("top",(e.pageY - xOffset) + "px")
 +
.css("left",(e.pageX + yOffset) + "px")
 +
.fadeIn("fast");
 +
    },
 +
function(){
 +
this.title = this.t;
 +
$("#preview").remove();
 +
    });
 +
$("a.preview").mousemove(function(e){
 +
$("#preview")
 +
.css("top",(e.pageY - xOffset) + "px")
 +
.css("left",(e.pageX + yOffset) + "px");
 +
});
 +
};
 +
// starting the script on page load
 +
$(document).ready(function(){
 +
imagePreview();
 +
});
 +
</script>
 +
</meta>
 +
<style>
 +
body {
 +
margin:0;
 +
padding:40px;
 +
background:#fff;
 +
font:80% Arial, Helvetica, sans-serif;
 +
color:#555;
 +
line-height:180%;
 +
}
 +
 
 +
h1{
 +
font-size:180%;
 +
font-weight:normal;
 +
color:#555;
 +
}
 +
h2{
 +
clear:both;
 +
font-size:160%;
 +
font-weight:normal;
 +
color:#555;
 +
margin:0;
 +
padding:.5em 0;
 +
}
 +
a{
 +
text-decoration:none;
 +
color:#f30;
 +
}
 +
p{
 +
clear:both;
 +
margin:0;
 +
padding:.5em 0;
 +
}
 +
pre{
 +
display:block;
 +
font:100% "Courier New", Courier, monospace;
 +
padding:10px;
 +
border:1px solid #bae2f0;
 +
background:#e3f4f9;
 +
margin:.5em 0;
 +
overflow:auto;
 +
width:800px;
 +
}
 +
 
 +
img{border:none;}
 +
ul,li{
 +
margin:0;
 +
padding:0;
 +
}
 +
li{
 +
list-style:none;
 +
float:left;
 +
display:inline;
 +
margin-right:10px;
 +
}
 +
 
 +
#preview{
 +
position:absolute;
 +
border:1px solid #ccc;
 +
background:#333;
 +
padding:5px;
 +
display:none;
 +
color:#fff;
 +
}
 +
 
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
<h1>Easy Image Preview with jQuery</h1>
 +
<h2>Image gallery  (without caption)</h2>
 +
<ul>
 +
<li><a href="/jscss/demoimg/wall1.jpg" class="preview"><img src="/jscss/demoimg/wall_s1.jpg" alt="gallery thumbnail" /></a></li>
 +
<li><a href="/jscss/demoimg/wall4.jpg" class="preview"><img src="/jscss/demoimg/wall_s4.jpg" alt="gallery thumbnail" /></a></li>
 +
</ul>
 +
<h2>Image gallery (with caption)</h2>
 +
<ul>
 +
<li><a href="/jscss/demoimg/wall3.jpg" class="preview" title="Autumn"><img src="/jscss/demoimg/wall_s3.jpg" alt="gallery thumbnail" /></a></li>
 +
<li><a href="/jscss/demoimg/wall4.jpg" class="preview" title="Skiing on a mountain"><img src="/jscss/demoimg/wall_s4.jpg" alt="gallery thumbnail" /></a></li>
 +
</ul>
 +
</body>
 +
</html>

Revision as of 09:45, 6 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Image Preview with jQuery

Easy Image Preview with jQuery

Image gallery (without caption)

  • gallery thumbnail
  • gallery thumbnail

Image gallery (with caption)

  • gallery thumbnail
  • gallery thumbnail

Retrieved from "http://2014.igem.org/Talk:Team:LZU-China/tempfortest"