Question

I’m using a full-screen image gallery on my website, however I’m trying to style the thumbnails that allow me to navigate true the different images. The tumbnails are generated with the JS file. I managed to style them as triangle’s with a normal and hover state.

My question, I want to add an ACTIVE to this that shows a black triangle when that certain images is displayed. How can I do this?

JS file

<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;
    }

Answer 1

Question is answered by Shefqet Avdullau

Javascript

var slider;
var images = [
    "IMAGES LINK",
    "IMAGES LINK",
    "IMAGES LINK"
];
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');

                    /* added by Shefqet Avdullau */
                    $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor');
                    $.backstretch(images[index], {speed: transitionSpeed});

                    startIntervals = function (){
                        intervalSetTime = setInterval(function() {
                        index = (index >= images.length - 1) ? 0 : index + 1;

                        /* added by me */
                        $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor');

                        $.backstretch(images[index]);
                        slider.goToNextSlide()
                    }, imageIntervals)};

                    startIntervals();                    
                });
            }
        });
    });
});

function goToContent(slideNum){
    clearInterval(intervalSetTime);
    index = slideNum;
    /* added by Shefqet Avdullau */
    $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor');

    $.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;
};

CSS

/* THUMB SECTION */

#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;
}

/* added by Shefqet Avdullau */

#thumb-container a.current_anchor img,

#thumb-container img:hover,
#thumb-container img.displayed {
    float:left;
    border:0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid  #6bcade;
}