"
User:Lucas.schirmer
From 2009.igem.org
(Difference between revisions)
| Line 3: | Line 3: | ||
<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/jquery.min.js"></script> | <script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/jquery.min.js"></script> | ||
| - | <script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/ | + | <script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/cloud-carousel.js"></script> |
| + | <script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/slimbox/js/slimbox2.js"></script> | ||
<script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/navigation/menu.js"></script> | <script type="text/JavaScript" src="http://endo.bio.tu-dresden.de/igem/scripthost/navigation/menu.js"></script> | ||
| + | <link media="screen" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/slimbox/css/slimbox2.css" rel="stylesheet"> | ||
| + | <link media="screen" type="text/css" href="http://endo.bio.tu-dresden.de/igem/scripthost/navigation/menu.css" rel="stylesheet"> | ||
| + | <script type="text/JavaScript"> | ||
| + | $(document).ready(function(){ | ||
| + | |||
| + | // This initialises carousels on the container elements specified, in this case, carousel1. | ||
| + | $("#carousel1").CloudCarousel( | ||
| + | { | ||
| + | xPos: 400, | ||
| + | xRadius:300, | ||
| + | yPos: 120, | ||
| + | buttonLeft: $("#left-but"), | ||
| + | buttonRight: $("#right-but"), | ||
| + | altBox: $("#alt-text"), | ||
| + | titleBox: $("#title-text") | ||
| + | } | ||
| + | ); | ||
| + | }); | ||
| + | |||
| + | </script> | ||
| + | |||
</head> | </head> | ||
<body> | <body> | ||
| + | <!-- This is the container for the carousel. --> | ||
| + | <div id = "carousel1" style="width:800px; height:500px;background:#000;overflow:scroll;"> | ||
| + | <!-- Define left and right buttons. --> | ||
| + | <input id="left-but" type="button" value="Left" /> | ||
| + | <input id="right-but" type="button" value="Right" /> | ||
| + | |||
| + | <!-- All images with class of "cloudcarousel" will be turned into carousel items --> | ||
| + | <!-- You can place links around these images --> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/8/8e/BiotecDresden_Circle_Adi.jpg" rel="lightbox" title="Image of Adi"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/8/8e/BiotecDresden_Circle_Adi.jpg/300px-BiotecDresden_Circle_Adi.jpg" alt="Image of Adi" title="Image of Adi" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/b/bf/BiotecDresden_Circle_Svea.jpg" rel="lightbox" title="Image of Svea"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/b/bf/BiotecDresden_Circle_Svea.jpg/300px-BiotecDresden_Circle_Svea.jpg" alt="Image of Svea" title="Image of Svea" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/5/54/BiotecDresden_Circle_Sarah.jpg" rel="lightbox" title="Image ofSarah"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/5/54/BiotecDresden_Circle_Sarah.jpg/300px-BiotecDresden_Circle_Sarah.jpg" alt="Image of Sarah" title="Image of Sarah" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/a/a4/BiotecDresden_Circle_Mareike.jpg" rel="lightbox" title="Image of Mareike"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/a/a4/BiotecDresden_Circle_Mareike.jpg/300px-BiotecDresden_Circle_Mareike.jpg" alt="Image of Mareike" title="Image of Mareike" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/f/f0/BiotecDresden_Circle_Habib.jpg" rel="lightbox" title="Image of Habib"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/f/f0/BiotecDresden_Circle_Habib.jpg/300px-BiotecDresden_Circle_Habib.jpg" alt="Image of Habib" title="Image of Habib" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/0/07/BiotecDresden_Circle_Jon.jpg" rel="lightbox" title="Image of Jon"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/0/07/BiotecDresden_Circle_Jon.jpg/300px-BiotecDresden_Circle_Jon.jpg" alt="Image of Jon" title="Image of Jon" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/e/e8/BiotecDresden_Circle_Charanya.jpg" rel="lightbox" title="Image of Charanya"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/e/e8/BiotecDresden_Circle_Charanya.jpg/300px-BiotecDresden_Circle_Charanya.jpg" alt="Image of Charanya" title="Image o Charanya" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/5/51/BiotecDresden_Circle_Rahul.jpg" rel="lightbox" title="Image of Rahul"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/5/51/BiotecDresden_Circle_Rahul.jpg/300px-BiotecDresden_Circle_Rahul.jpg" alt="Image of Rahul" title="Image of Rahul" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/3/35/BiotecDresden_Circle_Viktor.jpg" rel="lightbox" title="Image of Viktor"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/3/35/BiotecDresden_Circle_Viktor.jpg/300px-BiotecDresden_Circle_Viktor.jpg" alt="Image of Viktor" title="Image of Viktor" /></a> | ||
| + | <a href="https://static.igem.org/mediawiki/igem.org/2/27/BiotecDresden_Circle_Lucas.jpg" rel="lightbox" title="Image of Lucas"><img class = "cloudcarousel" src="https://static.igem.org/mediawiki/igem.org/thumb/2/27/BiotecDresden_Circle_Lucas.jpg/300px-BiotecDresden_Circle_Lucas.jpg" alt="Image of Lucas" title="Image of Lucas" /></a> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <!-- Define elements to accept the alt and title text from the images. --> | ||
| + | <p id="title-text"></p> | ||
| + | <p id="alt-text"></p> | ||
<h2>Menu Idea</h2> | <h2>Menu Idea</h2> | ||
<a href="http://apycom.com/menus/1-dim-gray.html">more ideas</a> | <a href="http://apycom.com/menus/1-dim-gray.html">more ideas</a> | ||
Revision as of 17:08, 16 June 2010
