|
|
(16 intermediate revisions not shown) |
Line 1: |
Line 1: |
| {{AUC_Turkey}} | | {{AUC_Turkey}} |
- |
| |
- | <html>
| |
- | <head>
| |
- | <script type="text/javascript" src="http://www.twospy.com/galleriffic/js/jquery.galleriffic.js"></script>
| |
- | <style type="text/css">
| |
- | div#page html, body {
| |
- | margin:0;
| |
- | padding:0;
| |
- | }
| |
- | div#page body{
| |
- | text-align: center;
| |
- | font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
| |
- | background-color: #eee;
| |
- | color: #444;
| |
- | font-size: 75%;
| |
- | }
| |
- | div#page a{
| |
- | color: #27D;
| |
- | text-decoration: none;
| |
- | }
| |
- | div#page a:focus, a:hover, a:active {
| |
- | text-decoration: underline;
| |
- | }
| |
- | div#page p, li {
| |
- | line-height: 1.8em;
| |
- | }
| |
- | div#page h1, h2 {
| |
- | font-family: "Trebuchet MS", Verdana, sans-serif;
| |
- | margin: 0 0 10px 0;
| |
- | letter-spacing:-1px;
| |
- | }
| |
- | div#page h1 {
| |
- | padding: 0;
| |
- | font-size: 3em;
| |
- | color: #333;
| |
- | }
| |
- | div#page h2 {
| |
- | padding-top: 10px;
| |
- | font-size:2em;
| |
- | }
| |
- | div#page pre {
| |
- | font-size: 1.2em;
| |
- | line-height: 1.2em;
| |
- | overflow-x: auto;
| |
- | }
| |
- | div#page {
| |
- | width: 7500px;
| |
- | margin: 0 auto;
| |
- | text-align: left;
| |
- | }
| |
- | div#page div#container {
| |
- | padding: 20px;
| |
- | }
| |
- | div#page div#ads {
| |
- | clear: both;
| |
- | padding: 12px 0 12px 66px;
| |
- | }
| |
- | div#page div#footer {
| |
- | clear: both;
| |
- | color: #777;
| |
- | margin: 0 auto;
| |
- | padding: 20px 0 40px;
| |
- | text-align: center;
| |
- | }
| |
- | div#page div.content {
| |
- | /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
| |
- | display: none;
| |
- | float: right;
| |
- | width: 550px;
| |
- | }
| |
- | div#page div.content a, div.navigation a {
| |
- | text-decoration: none;
| |
- | color: #777;
| |
- | }
| |
- | div#page div.content a:focus, div.content a:hover, div.content a:active {
| |
- | text-decoration: underline;
| |
- | }
| |
- | div#page div.controls {
| |
- | margin-top: 5px;
| |
- | height: 23px;
| |
- | displaY:none;
| |
- | }
| |
- | div#page div.controls a {
| |
- | padding: 5px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | div#page div.slideshow-container {
| |
- | position: relative;
| |
- | clear: both;
| |
- | height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
- | }
| |
- | div#page div.loader {
| |
- | position: absolute;
| |
- | top: 0;
| |
- | left: 0;
| |
- | background-image: url('loader.gif');
| |
- | background-repeat: no-repeat;
| |
- | background-position: center;
| |
- | width: 550px;
| |
- | height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
- | }
| |
- | div#page div.slideshow {
| |
- |
| |
- | }
| |
- | div#page div.slideshow span.image-wrapper {
| |
- | display: block;
| |
- | position: absolute;
| |
- | top: 0;
| |
- | left: 0;
| |
- | }
| |
- | div#page div.slideshow a.advance-link {
| |
- | display: block;
| |
- | width: 550px;
| |
- | height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
- | line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
- | text-align: center;
| |
- | }
| |
- | div#page div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
| |
- | text-decoration: none;
| |
- | }
| |
- | div#page div.slideshow img {
| |
- | vertical-align: middle;
| |
- | border: 1px solid #ccc;
| |
- | }
| |
- | div#page div.download {
| |
- | display:none;
| |
- | }
| |
- | div#page div.caption-container {
| |
- | position: relative;
| |
- | clear: left;
| |
- | height: 75px;
| |
- | }
| |
- | div#page span.image-caption {
| |
- | display: block;
| |
- | position: absolute;
| |
- | width: 550px;
| |
- | top: 0;
| |
- | left: 0;
| |
- | }
| |
- | div#page div.caption {
| |
- | padding: 12px;
| |
- | }
| |
- | div#page div.image-title {
| |
- | font-weight: bold;
| |
- | font-size: 1.4em;
| |
- | }
| |
- | div#page div.image-desc {
| |
- | line-height: 1.3em;
| |
- | padding-top: 12px;
| |
- | }
| |
- | div#page div.navigation {
| |
- | /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
| |
- | }
| |
- | div#page ul.thumbs {
| |
- | clear: both;
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | }
| |
- | div#page ul.thumbs li {
| |
- | float: left;
| |
- | padding: 0;
| |
- | margin: 5px 10px 5px 0;
| |
- | list-style: none;
| |
- | }
| |
- | div#page a.thumb {
| |
- | padding: 2px;
| |
- | display: block;
| |
- | border: 1px solid #ccc;
| |
- | }
| |
- | div#page ul.thumbs li.selected a.thumb {
| |
- | background: #000;
| |
- | }
| |
- | div#page a.thumb:focus {
| |
- | outline: none;
| |
- | }
| |
- | div#page ul.thumbs img {
| |
- | border: none;
| |
- | display: block;
| |
- | }
| |
- | div#page div.pagination {
| |
- | clear: both;
| |
- | }
| |
- | div#page div.navigation div.top {
| |
- | margin-bottom: 12px;
| |
- | height: 11px;
| |
- | }
| |
- | div#page div.navigation div.bottom {
| |
- | margin-top: 12px;
| |
- | }
| |
- | div#page div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
| |
- | display: block;
| |
- | float: left;
| |
- | margin-right: 2px;
| |
- | padding: 4px 7px 2px 7px;
| |
- | border: 1px solid #ccc;
| |
- | }
| |
- | div#page div.pagination a:hover {
| |
- | background-color: #eee;
| |
- | text-decoration: none;
| |
- | }
| |
- | div#page div.pagination span.current {
| |
- | font-weight: bold;
| |
- | background-color: #000;
| |
- | border-color: #000;
| |
- | color: #fff;
| |
- | }
| |
- | div#page div.pagination span.ellipsis {
| |
- | border: none;
| |
- | padding: 5px 0 3px 2px;
| |
- | }
| |
- | width:750px;
| |
- | border-style:none;
| |
- | background:none;
| |
- | }
| |
- | </style>
| |
- | <script type="text/javascript">
| |
- | ;(function($) {
| |
- | $.fn.opacityrollover = function(settings) {
| |
- |
| |
- | };
| |
- | })(jQuery);
| |
- |
| |
- | </script>
| |
- | <!-- We only want the thunbnails to display when javascript is disabled -->
| |
- | <script type="text/javascript">
| |
- | document.write('<style>.noscript { display: none; }</style>');
| |
- | </script>
| |
- | </head>
| |
- | <body>
| |
- | <div id="page">
| |
- | <div id="container">
| |
- | <h1><a href="index.html">Galleriffic</a></h1>
| |
- | <h2>Thumbnail rollover effects and slideshow crossfades</h2>
| |
- |
| |
- | <!-- Start Advanced Gallery Html Containers -->
| |
- | <div id="gallery" class="content">
| |
- | <div id="controls" class="controls"></div>
| |
- | <div class="slideshow-container">
| |
- | <div id="loading" class="loader"></div>
| |
- | <div id="slideshow" class="slideshow"></div>
| |
- | </div>
| |
- | <div id="caption" class="caption-container"></div>
| |
- | </div>
| |
- | <div id="thumbs" class="navigation">
| |
- | <ul class="thumbs noscript">
| |
- | <li>
| |
- | <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
| |
- | <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #0</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
| |
- | <img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | Any html can be placed here ...
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
| |
- | <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #2</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
| |
- | <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #3</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
| |
- | <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #4</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
| |
- | <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #5</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
| |
- | <img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #6</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
| |
- | <img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #7</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
| |
- | <img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #8</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
| |
- | <img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #9</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
| |
- | <img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #10</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
| |
- | <img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #11</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
| |
- | <img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #12</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
| |
- | <img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #13</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
| |
- | <img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #14</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
| |
- | <img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #15</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
| |
- | <img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #16</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
| |
- | <img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #17</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
| |
- | <img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #18</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
| |
- | <img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #19</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
| |
- | <img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #20</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
| |
- | <img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #21</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
| |
- | <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #22</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- |
| |
- | <li>
| |
- | <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
| |
- | <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
| |
- | </a>
| |
- | <div class="caption">
| |
- | <div class="download">
| |
- | <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
| |
- | </div>
| |
- | <div class="image-title">Title #23</div>
| |
- | <div class="image-desc">Description</div>
| |
- | </div>
| |
- | </li>
| |
- | </ul>
| |
- | </div>
| |
- | <div style="clear: both;"></div>
| |
- | </div>
| |
- | </div>
| |
- | <div id="footer">© 2009 Trent Foley</div>
| |
- | <script type="text/javascript">
| |
- | jQuery(document).ready(function($) {
| |
- | // We only want these styles applied when javascript is enabled
| |
- | $('div.navigation').css({'width' : '150px', 'float' : 'left'});
| |
- | $('div.content').css('display', 'block');
| |
- |
| |
- | // Initially set opacity on thumbs and add
| |
- | // additional styling for hover effect on thumbs
| |
- | var onMouseOutOpacity = 1.0;
| |
- | $('#thumbs ul.thumbs li').opacityrollover({
| |
- | mouseOutOpacity: onMouseOutOpacity,
| |
- | mouseOverOpacity: 1.0,
| |
- | fadeSpeed: 'fast',
| |
- | exemptionSelector: '.selected'
| |
- | });
| |
- |
| |
- | // Initialize Advanced Galleriffic Gallery
| |
- | var gallery = $('#thumbs').galleriffic({
| |
- | delay: 2500,
| |
- | numThumbs: 15,
| |
- | preloadAhead: 10,
| |
- | enableTopPager: true,
| |
- | enableBottomPager: true,
| |
- | maxPagesToShow: 7,
| |
- | imageContainerSel: '#slideshow',
| |
- | controlsContainerSel: '#controls',
| |
- | captionContainerSel: '#caption',
| |
- | loadingContainerSel: '#loading',
| |
- | renderSSControls: true,
| |
- | renderNavControls: true,
| |
- | playLinkText: 'Play Slideshow',
| |
- | pauseLinkText: 'Pause Slideshow',
| |
- | prevLinkText: '‹ Previous Photo',
| |
- | nextLinkText: 'Next Photo ›',
| |
- | nextPageLinkText: 'Next ›',
| |
- | prevPageLinkText: '‹ Prev',
| |
- | enableHistory: false,
| |
- | autoStart: false,
| |
- | syncTransitions: true,
| |
- | defaultTransitionDuration: 900,
| |
- | onSlideChange: function(prevIndex, nextIndex) {
| |
- | // 'this' refers to the gallery, which is an extension of $('#thumbs')
| |
- | this.find('ul.thumbs').children()
| |
- | .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
| |
- | .eq(nextIndex).fadeTo('fast', 1.0);
| |
- | },
| |
- | onPageTransitionOut: function(callback) {
| |
- | this.fadeTo('fast', 0.0, callback);
| |
- | },
| |
- | onPageTransitionIn: function() {
| |
- | this.fadeTo('fast', 1.0);
| |
- | }
| |
- | });
| |
- | });
| |
- | </script>
| |
- | </body>
| |
- | </html>
| |