|
|
(53 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
| |
- | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> | | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> |
- |
| |
- |
| |
- | <!--THIS STYLE SHEET IS FOR THE SAFETY PAGE -->
| |
| | | |
| <head> | | <head> |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> | + | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| + | <style media="screen" type="text/css"> |
| | | |
- | <style type="text/css">
| + | #pictable { |
| + | margin-left:5%; |
| + | margin-right:5%; |
| + | margin-bottom:5%; |
| + | margin-top:-2.5%; |
| + | } |
| | | |
- | /*Make sure your page contains a valid doctype at the top*/
| + | #pictable img { |
- | #simplegallery1{ //CSS for Simple Gallery Example 1 | + | width:100px; |
- | position: relative; /*keep this intact*/
| + | height:100px; |
- | visibility: hidden; /*keep this intact*/
| + | position:relative; |
- | border: 10px solid darkred;
| + | z-index:50; |
| } | | } |
| | | |
- | #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined) | + | #pictable table { |
- | text-align: left;
| + | float:left; |
- | padding: 2px 5px;
| + | |
| } | | } |
| | | |
- | </style>
| + | #bigsection { |
| + | width: 60%; |
| + | height: 57%; |
| + | overflow:hidden; |
| + | float:right; |
| + | padding-left:57%; |
| + | position:fixed; |
| + | margin-top:-2.5%; |
| + | margin-right:5%; |
| + | z-index:49; |
| + | color:#fff; |
| + | } |
| | | |
- | <!-- replaced src="simplegallery.js" with the URL of the script -- hope it works! -->
| + | .bigpic { |
| + | clear:both; |
| + | font-size:1em; |
| + | color:#fff; |
| + | margin-top: 0%; |
| + | } |
| | | |
- | <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/simplegallery.js.">
| + | .bigpic img { |
| + | /*width: 324px; |
| + | height: 243px;*/ |
| + | width: 60%; |
| + | height: 55%; |
| + | } |
| | | |
- | /***********************************************
| + | .safe { |
- | * Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
| + | font-size:1em; |
- | * This notice MUST stay intact for legal use
| + | color:#fff; |
- | * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
| + | margin-left: 5%; |
- | ***********************************************/
| + | margin-right: 5%; |
| + | margin-bottom: 5%; |
| + | margin-top: -3%; |
| + | } |
| | | |
- | </script>
| + | .safe h2 { |
| + | color:#fff; |
| + | } |
| | | |
- | <script type="text/javascript"> | + | </style> |
- | | + | |
- | var mygallery=new simpleGallery({
| + | |
- | wrapperid: "simplegallery1", //ID of main gallery container,
| + | |
- | dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
| + | |
- | imagearray: [
| + | |
- | ["farnbody.jpg", "", "_new", "There's nothing like a nice swim in the Summer."],
| + | |
- | ["Cieslabody.jpg", "", "", ""]
| + | |
- | ],
| + | |
- | autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
| + | |
- | persist: false, //remember last viewed slide and recall within same session?
| + | |
- | fadeduration: 500, //transition duration (milliseconds)
| + | |
- | oninit:function(){ //event that fires when gallery has initialized/ ready to run
| + | |
- | //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
| + | |
- | },
| + | |
- | onslide:function(curslide, i){ //event that fires after each slide is shown
| + | |
- | //Keyword "this": references current gallery instance
| + | |
- | //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
| + | |
- | //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
| + | |
- | }
| + | |
- | })
| + | |
- | | + | |
- | </script>
| + | |
| </head> | | </head> |
| | | |
| <body> | | <body> |
- | <div id="simplegallery1"></div>
| + | |
| + | |
| </body> | | </body> |
| </html> | | </html> |