|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
| |
| | | | |
| - | <style>
| |
| - | div.bgcarousel{ /* CSS for main carousel container */
| |
| - | background: black url(http://www.dynamicdrive.com/dynamicindex14/ajaxload.gif) center center no-repeat;
| |
| - | /* loading gif while caoursel is loading */
| |
| - | width:700px; /* default dimensions of carousel */
| |
| - | height:500px;
| |
| - | }
| |
| - |
| |
| - | img.navbutton{ /* CSS for the nav buttons */
| |
| - | margin:5px;
| |
| - | opacity:0.7;
| |
| - | }
| |
| - |
| |
| - | div.slide{ /* CSS for each image's DIV container within main container */
| |
| - | background-color: black;
| |
| - | background-position: center center; /* center image within carousel */
| |
| - | background-repeat: no-repeat;
| |
| - | background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
| |
| - | color: black;
| |
| - | }
| |
| - |
| |
| - | div.selectedslide{ /* CSS for currently selected slide */
| |
| - | }
| |
| - |
| |
| - | div.slide div.desc{ /* DIV that contains the textual description inside .slide */
| |
| - | position: absolute;
| |
| - | color: white;
| |
| - | left: 40px;
| |
| - | top: 100px;
| |
| - | width:200px;
| |
| - | padding: 10px;
| |
| - | font: bold 16px sans-serif, Arial;
| |
| - | text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
| |
| - | z-index:5;
| |
| - | }
| |
| - |
| |
| - | div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
| |
| - | }
| |
| - |
| |
| - | div.slide div.desc h2{
| |
| - | font-size:150%;
| |
| - | margin:0;
| |
| - | }
| |
| - |
| |
| - | div.slide div.desc a{
| |
| - | color:yellow;
| |
| - | text-decoration:none;
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - | <script src="http://www.dynamicdrive.com/dynamicindex14/bgcarousel.js" type="text/javascript">
| |
| - | /***********************************************
| |
| - | * Background Image Carousel- © Dynamic Drive (www.dynamicdrive.com)
| |
| - | * This notice MUST stay intact for legal use
| |
| - | * Visit http://www.dynamicdrive.com/ for this script and 100s more.
| |
| - | ***********************************************/
| |
| - | </script>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | var firstbgcarousel=new bgCarousel({
| |
| - | wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
| |
| - |
| |
| - | imagearray: //["image_path", "optional description"]
| |
| - | [
| |
| - | ["https://static.igem.org/mediawiki/2012/3/3e/Blue_Water-_Main_Image_copy.png", ' '],
| |
| - | ["https://static.igem.org/mediawiki/2012/9/9c/Regional_Photo.jpg", ' '],
| |
| - | ["https://static.igem.org/mediawiki/2012/3/3f/Production_Pipeline.png", ' ']
| |
| - | //<--no trailing comma after very last image element!
| |
| - | ],
| |
| - |
| |
| - | displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
| |
| - | navbuttons: ['http://www.dynamicdrive.com/dynamicindex14/left.gif', 'http://www.dynamicdrive.com/dynamicindex14/right.gif', 'http://www.dynamicdrive.com/dynamicindex14/up.gif', 'http://www.dynamicdrive.com/dynamicindex14/down.gif'], // path to nav images
| |
| - | activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
| |
| - | orientation: 'h', //Valid values: "h" or "v"
| |
| - | persist: true, //remember last viewed slide and recall within same session?
| |
| - | slideduration: 500 //transition duration (milliseconds)
| |
| - | })
| |
| - | </script>
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| - | <br /><br />
| |
| - | </body>
| |
| - | </html>
| |
"
