Template:Mexico-UNAM-CINVESTAV-ROTATOR

From 2010.igem.org

(Difference between revisions)
 
(4 intermediate revisions not shown)
Line 2: Line 2:
<head>
<head>
<style type="text/css">
<style type="text/css">
-
body {
+
.slideshow { height: 232px; width: 232px; margin: 0 }
-
margin:0;
+
.slideshow img { padding: 0px; border: 0px solid #ccc; background-color: #eee; }
-
padding:0;
+
-
color: #4E3D4E;
+
-
font: normal 0.6em sans-serif, Arial;
+
-
background-color: #EDEDED;
+
-
width: 100%;
+
-
}
+
</style>
</style>
-
 
+
<!-- include jQuery library -->
-
<style type="text/css">
+
-
/* rotator in-page placement */
+
-
    div#rotator {
+
-
position:relative;
+
-
height:0px;
+
-
margin-left: 0px;
+
-
}
+
-
/* rotator css */
+
-
div#rotator ul li {
+
-
float:left;
+
-
position:absolute;
+
-
list-style: none;
+
-
}
+
-
/* rotator image style */
+
-
div#rotator ul li img {
+
-
border:1px solid #ccc;
+
-
padding: 4px;
+
-
background: #FFF;
+
-
}
+
-
    div#rotator ul li.show {
+
-
z-index:500
+
-
}
+
-
</style>
+
-
 
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-
 
+
<!-- include Cycle plugin -->
 +
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
<script type="text/javascript">
-
 
+
$(document).ready(function() {
-
function theRotator() {
+
    $('.slideshow').cycle({
-
//Set the opacity of all images to 0
+
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
-
$('div#rotator ul li').css({opacity: 0.0});
+
});
-
+
-
//Get the first image and display it (gets set to full opacity)
+
-
$('div#rotator ul li:first').css({opacity: 1.0});
+
-
+
-
//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
+
-
setInterval('rotate()',6000);
+
-
+
-
}
+
-
 
+
-
function rotate() {
+
-
//Get the first image
+
-
var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));
+
-
 
+
-
//Get next image, when it reaches the end, rotate it back to the first image
+
-
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
+
-
+
-
//Set the fade in effect for the next image, the show class has higher z-index
+
-
next.css({opacity: 0.0})
+
-
.addClass('show')
+
-
.animate({opacity: 1.0}, 1000);
+
-
 
+
-
//Hide the current image
+
-
current.animate({opacity: 0.0}, 1000)
+
-
.removeClass('show');
+
-
+
-
};
+
-
 
+
-
$(document).ready(function() {
+
-
//Load the slideshow
+
-
theRotator();
+
});
});
-
 
</script>
</script>
-
 
</head>
</head>
<body>
<body>
-
<h1>Jquery Auto Image Rotator</h1>
+
<div class="slideshow">
-
 
+
<img src="https://static.igem.org/mediawiki/2010/7/77/Mx-Logo01.gif" />
-
<div id="rotator">
+
                <img src="https://static.igem.org/mediawiki/2010/f/fd/Mural-rectoria-cabecera.png" />
-
  <ul>
+
<img src="https://static.igem.org/mediawiki/2010/d/d8/Mx-Logo02.gif" />
-
    <li class="show"><img src="https://static.igem.org/mediawiki/2010/7/77/Mx-Logo01.gif"/></a></li>
+
                <img src="https://static.igem.org/mediawiki/2010/d/dc/Mx-Logo03.gif" />
-
    <li><a href="http://www.alohatechsupport.net/"><img src="https://static.igem.org/mediawiki/2010/d/d8/Mx-Logo02.gif"   alt="pic2" /></a></li>
+
                <img src="https://static.igem.org/mediawiki/2010/b/b0/Mx-Logo04.gif" />
-
    <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="https://static.igem.org/mediawiki/2010/d/dc/Mx-Logo03.gif"   alt="pic3" /></a></li>
+
-
    <li><a href="#"><img src="https://static.igem.org/mediawiki/2010/b/b0/Mx-Logo04.gif"    /></a></li>
 
-
  </ul>
 
-
</div>
 
 +
</div>
</body>
</body>
</html>
</html>

Latest revision as of 02:59, 28 October 2010

Retrieved from "http://2010.igem.org/Template:Mexico-UNAM-CINVESTAV-ROTATOR"