Ik maak gebruik van een full-screen image gallery met thumbnails die je in staat stellen om verschillende afbeeldingen te selecteren. De thumbnails worden aangemaakt via het stukje javascript hieronder.
Nu ben ik bezig deze thumbnails aan het stijlen en probeer ik een ACTIVE state toe te voegen. De normale state en hover state werken inmiddels, alleen de active state krijg ik niet werkend.
Ik heb al geprobeerd te werken met "#thumb-container img:active" alleen dit mocht niet baten.
Graag jullie advies.
Javascript
<script type="text/javascript">
var slider;
var images = [
"images/productie/1.jpg",
"images/productie/2.jpg",
"images/productie/3.jpg",
"images/productie/4.jpg",
"images/productie/5.jpg"
];
var index = 0;
var transitionSpeed = 500;
var imageIntervals = 5000;
var startIntervals;
var intervalSetTime;
var contentOpen = false;
$(document).ready(function(){
slider = $('#slider1').bxSlider({
mode: 'fade',
controls: false,
pause: imageIntervals
});
for (i=0;i<=images.length - 1;i++){
$('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
}
$(function() {
$.preload(images, {
init: function(loaded, total) {
$("#indicator").html("<img src='images/load.gif' />");
},
loaded_all: function(loaded, total) {
$('#indicator').fadeOut('slow', function() {
$('#left-side').fadeIn('slow');
$('#thumb-container').fadeIn('slow');
$.backstretch(images[index], {speed: transitionSpeed});
startIntervals = function (){
intervalSetTime = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
slider.goToNextSlide()
}, imageIntervals)};
startIntervals();
});
}
});
});
});
function goToContent(slideNum){
clearInterval(intervalSetTime);
index = slideNum;
$.backstretch(images[index]);
slider.goToSlide(slideNum);
if (contentOpen == false){
startIntervals();
}
};
function showContent(){
$('.content-bg').fadeIn('slow');
clearInterval(intervalSetTime);
contentOpen = true;
};
function closeContent(){
$('.content-bg').fadeOut('slow');
startIntervals();
contentOpen = false;
};
</script>
CSS
#thumb-container{
display:none;
}
#thumb-container img{
float:left;
border:0;
width: 0;
height: 0;
margin:2px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
}
#thumb-container img:hover{
float:left;
border:0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
