From 2010.igem.org

Revision as of 07:43, 27 October 2010

<style type="text/css"> .slideshow { height:auto; width: 224px; margin-left:200px; margin-top:40px; position:relative} .slideshow img { padding: 15px; border: 0px solid #ccc; background-color:transparent; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"> </script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

<script type="text/javascript"> $(document).ready(function() {

   $('.slideshow').cycle({

fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... });

//Here I am declaring the functions for the menu behavior "Miguel Leonardo"

$("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

$("ul.topnav li span").click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up });

//Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" });

}); </script>

               <img src="Example.jpg" width="500" height="224" />
               <img src="Example.jpg" width="500" height="224" />
               <img src="Example.jpg" width="500" height="224" />