Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
Line 686: Line 686:
/*on hover stuff*/
/*on hover stuff*/
-
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
+
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
.thumbnailWrapper ul {  
.thumbnailWrapper ul {  
Line 699: Line 699:
}
}
.thumbnailWrapper ul li a img {  
.thumbnailWrapper ul li a img {  
-
/* not important, the pics we use here are too big */
+
width:200px; /* not important, the pics we use here are too big */
position:relative; /* so we can use top and left positioning */
position:relative; /* so we can use top and left positioning */
border:none; /* remove the default blue border */
border:none; /* remove the default blue border */
}
}
-
.caption{
+
.captiongray{
position:absolute; /* needed for positioning */
position:absolute; /* needed for positioning */
bottom:0px; /* bottom of the list item (container) */
bottom:0px; /* bottom of the list item (container) */
Line 713: Line 713:
     background:#444444;
     background:#444444;
color:white;
color:white;
-
opacity:1;
+
opacity:0.8;
}
}
-
.caption .captionInside{
+
.captiongray .captionInside{
/* just styling */
/* just styling */
padding:10px;
padding:10px;
Line 722: Line 722:
}
}
.clear { clear:both; } /* to clear the float after the last item */
.clear { clear:both; } /* to clear the float after the last item */
-
 
+
 +
.captionmorado{
 +
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:#600080;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionmorado .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionmoradoclaro{
 +
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:#6600ff;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionmoradoclaro .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionnaranja{
 +
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:#ff751a;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionnaranja .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionrojo{
 +
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:#cc0000;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionrojo .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionrosa{
 +
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:#cc0099;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionrosa .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionverde{
 +
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:#009966;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionverde .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionaqua{
 +
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:#009a9a;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionaqua .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionazul{
 +
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:#5d8aa8 ;
 +
color:white;
 +
opacity:0.8;
 +
 +
}
 +
.captionazul .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item *
</style>
</style>
</head>
</head>
Line 1,001: Line 1,160:
$(window).load(function(){
$(window).load(function(){
-
//set and get some variables
 
var thumbnail = {
var thumbnail = {
-
imgIncrease : 0, /* the image increase in pixels (for zoom) */
+
imgIncrease : 0,
-
effectDuration : 400, /* the duration of the effect (zoom and caption) */
+
effectDuration : 400,
-
/*
+
-
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(),  
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),  
-
imgHeight : $('.thumbnailWrapper ul li').find('img').height()  
+
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captiongray:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captiongray').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
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({  
$('.thumbnailWrapper ul li').css({  
'width' : thumbnail.imgWidth,  
'width' : thumbnail.imgWidth,  
-
'height' : thumbnail.imgHeight  
+
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionmorado:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionmorado').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
      <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
});
});
-
//when mouse over the list item...
 
$('.thumbnailWrapper ul li').hover(function(){
$('.thumbnailWrapper ul li').hover(function(){
$(this).find('img').stop().animate({
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
-
/* increase the image width for the zoom effect*/
+
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionmoradoclaro:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionmoradoclaro').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
-
/* we need to change the left and top position in order to
+
left: thumbnail.imgIncrease/2*(0),
-
have the zoom effect, so we are moving them to a negative
+
top: thumbnail.imgIncrease/2*(0)
-
position of the half of the imgIncrease */
+
-
left: thumbnail.imgIncrease/2*(-1),
+
-
top: thumbnail.imgIncrease/2*(-1)
+
},{  
},{  
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
});
 +
 +
$(this).find('.captionnaranja:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionnaranja').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
"duration": thumbnail.effectDuration,
"duration": thumbnail.effectDuration,
"queue": false
"queue": false
Line 1,044: Line 1,370:
});
});
-
//show the caption using slideDown event
+
$(this).find('.captionrojo:not(:animated)').slideDown(thumbnail.effectDuration);
-
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
+
-
//when mouse leave...
 
}, function(){
}, function(){
-
//find the image and animate it...
 
$(this).find('img').animate({
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
-
/* get it back to original size (zoom out) */
+
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionrojo').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionrosa:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
width: thumbnail.imgWidth,
width: thumbnail.imgWidth,
-
/* get left and top positions back to normal */
 
left: 0,
left: 0,
top: 0
top: 0
Line 1,062: Line 1,428:
//hide the caption using slideUp event
//hide the caption using slideUp event
-
$(this).find('.caption').slideUp(thumbnail.effectDuration);
+
$(this).find('.captionrosa').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
});
});
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionverde:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionverde').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionaqua:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionaqua').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionazul:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionazul').slideUp(thumbnail.effectDuration);
 +
});
});
});
</script>
</script>

Revision as of 07:53, 12 September 2012


UNAM-Genomics_Mexico

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