Difference between revisions of "Template:Oxford"

Line 36: Line 36:
 
</script>
 
</script>
  
 +
<script>
 +
$(".cruzi-magnify").ready(function(){
 +
 +
var native_width = 0;
 +
var native_height = 0;
 +
 +
alert("function run");
 +
 +
//Now the mousemove function
 +
$(".cruzi-magnify").mousemove(function(e){
 +
//When the user hovers on the image, the script will first calculate
 +
//the native dimensions if they don't exist. Only after the native dimensions
 +
//are available, the script will show the zoomed version.
 +
if(!native_width && !native_height)
 +
{
 +
//This will create a new image object with the same image as that in .cruzi-small
 +
//We cannot directly get the dimensions from .cruzi-small because of the
 +
//width specified to 200px in the html. To get the actual dimensions we have
 +
//created this image object.
 +
var image_object = new Image();
 +
image_object.src = "https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png";
 +
 +
//This code is wrapped in the .load function which is important.
 +
//width and height of the object would return 0 if accessed before
 +
//the image gets loaded.
 +
native_width = image_object.width;
 +
native_height = image_object.height;
 +
}
 +
else
 +
{
 +
//x/y coordinates of the mouse
 +
//This is the position of .magnify with respect to the document.
 +
var magnify_offset = $(this).offset();
 +
//We will deduct the positions of .magnify from the mouse positions with
 +
//respect to the document to get the mouse positions with respect to the
 +
//container(.magnify)
 +
var mx = e.pageX - magnify_offset.left;
 +
var my = e.pageY - magnify_offset.top;
 +
 +
//Finally the code to fade out the glass if the mouse is outside the container
 +
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
 +
{
 +
$(".cruzi-large").fadeIn(100);
 +
}
 +
else
 +
{
 +
$(".cruzi-large").fadeOut(100);
 +
}
 +
if($(".cruzi-large").is(":visible"))
 +
{
 +
//The background position of .cruzi-large will be changed according to the position
 +
//of the mouse over the .cruzi-small image. So we will get the ratio of the pixel
 +
//under the mouse pointer with respect to the image and use that to position the
 +
//large image inside the magnifying glass
 +
var rx = Math.round(mx/$(".cruzi-small").width()*native_width - $(".cruzi-large").width()/2)*-1;
 +
var ry = Math.round(my/$(".cruzi-small").height()*native_height - $(".cruzi-large").height()/2)*-1;
 +
var bgp = rx + "px " + ry + "px";
 +
 +
//Time to move the magnifying glass with the mouse
 +
var px = mx - $(".cruzi-large").width()/2;
 +
var py = my - $(".cruzi-large").height()/2;
 +
//Now the glass moves with the mouse
 +
//The logic is to deduct half of the glass's width and height from the
 +
//mouse coordinates to place it with its center at the mouse coordinates
 +
 +
//If you hover on the image now, you should see the magnifying glass in action
 +
$(".cruzi-large").css({left: px, top: py, backgroundPosition: bgp});
 +
}
 +
if(mx > 352 && mx < 364 && my > 197 && my < 210)
 +
{
 +
//alert("Yay! You've found the Trypansosoma cruzi!");
 +
$(".cruzi-message").fadeIn(1000);
 +
}
 +
}
 +
})
 +
})
 +
</script>
  
 
<style>
 
<style>

Revision as of 13:53, 3 July 2017

Oxford