Team:Arizona State/template header
From 2012.igem.org
(Difference between revisions)
(Created page with "{{ASU_Header}} <html> <div id="TopContainer"> <div id="Header" class="ColorBlue"> <img id="Logo" class="Slide" src="https://static.igem.org/mediawiki/2011/thumb/7/76/Michigan...") |
Ethan ward (Talk | contribs) |
||
(22 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <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 /> | ||
+ | <div id="mybgcarousel" class="bgcarousel"></div> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 07:23, 25 October 2012