<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>{{title}} - {{album.title}}</title>
<link rel="stylesheet" href="static/css/basic.css" type="text/css" />
<link rel="stylesheet" href="static/css/galleriffic-galala.css"
type="text/css" />
<script type="text/javascript" src="static/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="static/js/jquery.history.js"></script>
<script type="text/javascript" src="static/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="static/js/jquery.opacityrollover.js"></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">{{title}}</a>
— {{album.title}}
</h1>
<hr />
<!-- 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">
%for i in album.images:
<li>
<a class="thumb"
name="{{i.normalpath.split('/')[-1]}}"
href="{{i.normalpath}}"
title="{{i.title}}">
<img src="{{i.thumbpath}}"
alt="{{i.title}}"/>
</a>
<div class="caption">
<div class="download">
<a href="{{i.normalpath}}">original</a>
</div>
<div class="image-title">{{i.title}}</div>
<div class="image-desc">
{{i.description}}
</div>
</div>
</li>
%end
</ul>
</div>
<!-- End Advanced Gallery Html Containers -->
<div style="clear: both;"></div>
</div>
</div>
<div id="footer">Galala!</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '200px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#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: 12,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 4,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Presentación',
pauseLinkText: 'Pausa',
prevLinkText: '‹ anterior',
nextLinkText: 'siguiente ›',
nextPageLinkText: '››',
prevPageLinkText: '‹‹',
enableHistory: true,
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);
}
});
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
});
</script>
</body>
</html>