Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
Line 682: Line 682:
background: #bdda57;
background: #bdda57;
}
}
 +
 +
 +
/*on hover stuff*/
 +
 +
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
 +
 +
.thumbnailWrapper ul {
 +
list-style-type: none; /* remove the default style for list items (the circles) */
 +
margin:0px; /* remove default margin */
 +
padding:0px; /* remove default padding */
 +
}
 +
.thumbnailWrapper ul li {
 +
float:left; /* important: left float */
 +
position:relative; /* so we can use top and left positioning */
 +
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
 +
}
 +
.thumbnailWrapper ul li a img {
 +
width:200px; /* not important, the pics we use here are too big */
 +
position:relative; /* so we can use top and left positioning */
 +
border:none; /* remove the default blue border */
 +
}
 +
.caption{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:100%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
    background:#444444;
 +
color:white;
 +
opacity:1;
 +
 +
}
 +
.caption .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
</style>
</style>
Line 957: Line 997:
         </script>
         </script>
-
 
+
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
 +
<script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
//set and get some variables
 +
var thumbnail = {
 +
imgIncrease : 0, /* the image increase in pixels (for zoom) */
 +
effectDuration : 400, /* the duration of the effect (zoom and caption) */
 +
/*
 +
get the width and height of the images. Going to use those
 +
for 2 things:
 +
make the list items same size
 +
get the images back to normal after the zoom
 +
*/
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
 +
};
 +
 +
//make the list items same size as the images
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
 +
});
 +
 +
//when mouse over the list item...
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
 +
/* increase the image width for the zoom effect*/
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
/* we need to change the left and top position in order to
 +
have the zoom effect, so we are moving them to a negative
 +
position of the half of the imgIncrease */
 +
left: thumbnail.imgIncrease/2*(-1),
 +
top: thumbnail.imgIncrease/2*(-1)
 +
 +
},{
 +
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
//show the caption using slideDown event
 +
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
//when mouse leave...
 +
}, function(){
 +
 +
//find the image and animate it...
 +
$(this).find('img').animate({
 +
 +
/* get it back to original size (zoom out) */
 +
width: thumbnail.imgWidth,
 +
/* get left and top positions back to normal */
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.caption').slideUp(thumbnail.effectDuration);
 +
 +
});
 +
 +
});
 +
</script>
</html>
</html>

Revision as of 03:43, 12 September 2012


UNAM-Genomics_Mexico

Retrieved from "http://2012.igem.org/Template:Team:UNAM_Genomics_Mexico/Templates/menulike"