File: //proc/self/root/home/awaldron/public_html/archive/ras/application/views/vGallerific.php
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>R.A. Snoznik Photo Gallery : <?=$g['gal_title']?></title>
<link rel="stylesheet" href="/css/basic.css" type="text/css" />
<link rel="stylesheet" href="/css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/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">
<!-- 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">
<?php
foreach ($g['images'] as $img) {
echo '<li> '.EOL;
echo ' <a class="thumb" href="/gallery/lg_'.$img['photo_file'].'" title="'.$img['photo_title'].'"> '.EOL;
echo ' <img src="/gallery/tn_'.$img['photo_file'].'" alt="'.$img['photo_title'].'" /> '.EOL;
echo ' </a> '.EOL;
//echo ' <div class="caption"> '.EOL;
//echo ' <div class="download"> '.EOL;
//echo ' <a href="/gallery/lg_'.$img['photo_file'].'">Download Original</a> '.EOL;
//echo ' </div> '.EOL;
//echo ' <div class="image-title">'.$img['photo_title'].'</div> '.EOL;
//echo ' <div class="image-desc">'.$img['photo_desc'].'</div> '.EOL;
//echo ' </div> '.EOL;
echo '</li> '.EOL;
}
?>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</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: 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>