1

縦型のサムネイルを使用してフォト ギャラリーを作成しました。マウス ホバーをエミュレートし、サムネイルでイベントをクリックして、クリックしたように自動的にアニメーション化するにはどうすればよいでしょうか。

http://misslebanon2010.com/urbana/new/index.phpでこれまでに行ったギャラリーをご覧ください。

上下にスクロールできることに気付いた場合は、サムネイルをクリックして、中央に大きな写真と説明を表示することもできます。問題は、どうすれば自動的に再生できるかです。

JCarousel Plugin を試してみましたが、手動で使用すると本来の方法で再生されません

<script type="text/javascript">
$(document).ready(function () {
        //jCarousel Plugin
    $('#thumbs-carousel').jcarousel({
        vertical: true,
        scroll: 1,
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });

//Combine jCarousel with Image Display
$('#slideshow-carousel li a').hover(
    function () {

        if (!$(this).has('span').length) {
            $('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
            $(this).stop(true, true).children('img').css({'border':'2px orange solid'});
        }       
    },
    function () {

        $('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
        $('#slideshow-carousel li a').each(function () {

            if ($(this).has('span').length) $(this).children('img').css({'border':'2px orange solid'});


        });

    }
).click(function () {

    $('span.arrow').remove();  
    $('#frtitle').html($(this).find("img").attr('title'));
    $('#desc').html($(this).find("img").attr('alt'));         
    $(this).append('<span class="arrow"></span>');
    $('#slideshow-main li').removeClass('active');        
    $('#slideshow-main li.' + $(this).attr('rel')).addClass('active');  

    return false;
    });


});
    function mycarousel_initCallback(carousel) {

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    }

</script>
4

0 に答える 0