0

私は自分のWebサイトでフルスクリーンの画像ギャラリーを使用していますが、さまざまな画像を実際にナビゲートできるようにサムネイルのスタイルを設定しようとしています。タンブネイルはJSファイルで生成されます。私はそれらを通常のホバー状態の三角形としてスタイリングすることができました。

私の質問ですが、特定の画像が表示されたときに黒い三角形を表示するアクティブをこれに追加したいと思います。これどうやってするの？

JSファイル

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

2 に答える 2

1

displayed質問に対する最後の説明コメントで、 JavaScriptを使用して、サムネイル画像にそれぞれのCSSクラス（例）を追加および削除する必要があると思います。そして、最後のルールセレクターを次のように変更します。

#thumb-container img:hover, #thumb-container img.displayed
于 2012-10-19T10:26:06.010 に答える
0

質問はShefqetAvdullauによって回答されます

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;
}
于 2012-10-26T07:00:02.407 に答える