1

Malsupのカルーセルを使用して、Web ページにカルーセルを追加しました。さらにやりたいことは、カルーセルに動的に供給される画像に各画像のファイル名を自動的に追加することです。画像は定期的に変更しますが、画像の量も変わる可能性があります。誰かが各画像のファイル名を画像の下部 (おそらく画像の上に重ねて表示) または画像の下の「Alt」名が表示されるスペースに追加する方法を提案できれば非常にありがたいです。

皆さんが与えることができる助けを前もって感謝します。
乾杯、デビッド

マークアップは次のとおりです。

    <div id="slideshow" class="pics">
        <img src="sliderimages/ride_4481.jpg" width="400" height="300" /> 
        <img src="sliderimages/ride_4482.jpg" width="400" height="300" />

次のように CSS スタイリングを使用します。

     .pics {
            height: 332px;
            width: 432px;
            padding: 0;
            margin: 10px auto;
            display: block;
            border: 1px solid #ccc;
            border-radius: 8px;
        } 

        .pics img {
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #eee;
            width: 400px;
            height: 300px;
            top: 0;
            left: 0;
            border-radius: 8px;
        }

スライドショーを実行するスクリプトは次のとおりです (リマインダーとして役立つコメントがたくさんあります:

    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>

    <script type="text/javascript"> 

    $(document).ready(function() { 
        // start slideshow 
        $('#slideshow').cycle({ 
                fx:      'cover',
            easing: 'easeOutBounce',
            pause: 1,
            speed: 1000,
                timeout:  1500,
            before:   onBefore 
        }); 

        var slidesAdded = false; 

        function onBefore(curr, next, opts) { 
            // Make sure not to call addSlide before it is defined 
            if (!opts.addSlide || slidesAdded) 
                return; 
            // Add slides for images 3 - 8 or whatever number of slides you want to add. Just amend the var i=3; < x; i++ functions below where x is any number.
            // Also ensure you have this number of pictures available or you will get grey placeholders instead!
                // Slides can be a DOM element, a jQuery object, or a string 
             for (var i=3; i < 3; i++) 
             opts.addSlide('<img src="sliderimages/ride_448'+i+'.jpg" width="400" height="300" />');
            slidesAdded = true; 
        }; 
    });

</script>
4

2 に答える 2

1

after:キャプション テキストを置き換える関数を設定するには、イベントを使用する必要があります。次のコードは、http://jquery.malsup.com/cycle/caption.htmlから取得したものです。

$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        var name = this.src.split('/');
        $('#caption').html(name[name.length-1]);
    }
});

ワーキングデモ

JavaScript の残りの部分が何をしているのか完全にはわかりません。カルーセルのイベント前に画像を追加するのはなぜですか?

画像をファイル名に置き換えたい場合は、次のコードを使用します。

$('#slideshow img').each(function( index ) {
    var name = this.src.split('/');
    this.alt = name[name.length-1];
});

$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        //use the alt tag of the image, which we previously set to the filename above
        $('#caption').html(this.alt);
    }
});

ワーキングデモ

JavaScript 関数がスライダーに画像を追加していると推測していonBeforeますが、最初は html マークアップで画像を定義するだけでよいため、その理由はわかりません。何らかの理由でそうである場合 (最初に ajax 経由で画像をリクエストする場合があります)。その動作デモも追加しました。

編集

他の質問が突然閉じられたのを見て...

異なる画像セットをセットアップするには、2 つの方法があります。配列を設定するか、できれば画像セットを記述する JSON を設定するか、画像セットの選択時に Ajax リクエストを介してデータを遅延ロードすることができます。基本的なアレイのセットアップについては既に説明しました。

JSON を使用すると、すべての乗り物を定義できます - http://jsfiddle.net/f9g5G/10/ :

var pictures = {
    ride_443: { 
        ride: 443,
        linkText: "443",
        images: [
            "images/medium/ride_443%20(1).jpg",
            "images/medium/ride_443%20(2).jpg",
            "images/medium/ride_443%20(3).jpg",
            "images/medium/ride_443%20(4).jpg",
            "images/medium/ride_443%20(5).jpg"
        ]
    },
    ride_425: { 
        ride: 425,
        linkText: "443",
        images: [
            "images/medium/ride_425%20(1).jpg",
            "images/medium/ride_425%20(2).jpg"
        ]
    },
    ride_plentong2013: { 
        ride: "plentong2013",
        linkText: "Plentong 2013",
        images: [
            "images/medium/plentong1.jpg",
            "images/medium/plentong2.jpg",
            "images/medium/plentong3.jpg"
        ]
    }
}

または、AJAX を使用してそれらをロードすることもできます。例として既存の XML ポイントを使用しますが、Same Origin Policyのために AJAX 呼び出しをシミュレートする必要があったことに注意してください。質問がある場合はお知らせください。マークアップのアンカー リンクは、今回は jQuery ではなくサーバー コードから生成されると仮定しました。これは、現在ページにあるレイアウトと一致させ、年ごとにグループ化するためです。

http://jsfiddle.net/QzbZ7/

var getSliderData = function(group) {
    $.ajax({
        url: "/gallery/ride_" + group + "/resources/group.xml",
        dataType: "xml",
        success: function(data) {
            setUpSliders($(data), group);
        }
    });
};

//create the slider
var setUpSliders = function($data, group) {

    var imgBase = "/gallery/ride_" + group + "/resources/";

    $description.html($data.find("galleryDescription").text());

    $data.find("mediaGroup > media > item").each(function() {
        var $this = $(this);
        $slideshow.append( 
            $('<img>', { 
                src: imgBase + $this.find("renditions > rendition[size=medium]").attr("src"), 
                alt: $this.find("title").text()
            })
        )
    });

    //set up the slider
    $slideshow.cycle({
        fx:       'fadeZoom',
        timeout:   2000,
        before:     function() { $caption.hide(); },
        after:     function() { $caption.html(this.alt).fadeIn(); }
    });

};

//set up initial slider:
var initialSlider = 443;
getSliderData(initialSlider);
于 2013-05-30T04:22:12.840 に答える