I'm having a problem with the selected element in Galleriffic. When an image is selected it is not highlighting the correct thumb, it's highlighting the previous one.
Edited to remove a soon to be dead link of the website.
JS:
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '100%', 'clear' : 'both'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = .7;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: false,
renderNavControls: false,
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>
CSS
div.slideshow a.advance-link {
display: block;
width: 820px;
height: 388px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 0px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.download {
float: right;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
text-align: left;
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
background-color: #FFF;
}
ul.thumbs li {
display:inline;
margin-right: 10px;
padding: 0;
list-style: none;
}
a.thumb {
display:inline-block;
text-decoration: none;
}
ul.thumbs li.selected a.thumb {
color: #0C3
}
a.thumb:focus {
outline: none;
text-decoration: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
padding-top: 10px;
margin-top: 10px;
text-align: center;
background-color: #fff;
}
div.navigation div.bottom {
text-align: center;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
}
There was an indexing problem, the was considered like an index which was causing it to start off at the wrong place.
Solved it! :)