jQueryプラグイン「VEGAS」にテキストを追加して背景の切り替えに合わせてテキストも切り替える｜ Mana Design Lab.

背景画像のスライドができる美しいjQueryプラグイン「VEGAS」にテキストを追加して背景の切り替えに合わせてテキストも切り替えるやり方。

まず「vegas.js」をプチ改造。
340行目付近に下記を追加して、オプション「overlaytext」を使えるようにする。

overlaytext = this._options('overlaytext'),

1	overlaytext = this._options('overlaytext'),

「overlaytext」に任意のテキストを指定できるようになる。
下記のような感じ。

$("#fullScreenSlider").vegas({
    preload : true,/*load then show image*/
    autoplay: true,
    loop: true,
    shuffle: false,
    cover: true,
    transition: 'fade', /*animation-effect*/
    transitionDuration: 5000, /*animation duration*/
    delay: 12000, /*slide duration*/
    overlay: 'vegas/overlays/01.png' /*overlay background*/

    slides: [
        { src: "/images/1.jpg", overlaytext: "Text for slider 1." },
        { src: "/images/2.jpg", overlaytext: "Text for slider 2." },
        { src: "/images/3.jpg", overlaytext: "Text for slider 3." },
        { src: "/images/4.jpg", overlaytext: "Text for slider 4." }
    ],

    walk: function (index, slideSettings) {
        $('#vegasSliderInner').html(slideSettings.overlaytext);
    }
});

$("#fullScreenSlider").vegas({

preload : true,/*load then show image*/

autoplay: true,

loop: true,

shuffle: false,

cover: true,

transition: 'fade', /*animation-effect*/

transitionDuration: 5000, /*animation duration*/

delay: 12000, /*slide duration*/

overlay: 'vegas/overlays/01.png' /*overlay background*/

slides: [

{ src: "/images/1.jpg", overlaytext: "Text for slider 1." },

{ src: "/images/2.jpg", overlaytext: "Text for slider 2." },

{ src: "/images/3.jpg", overlaytext: "Text for slider 3." },

{ src: "/images/4.jpg", overlaytext: "Text for slider 4." }

walk: function (index, slideSettings) {

$('#vegasSliderInner').html(slideSettings.overlaytext);

}

});

オプションの「walk」で任意の要素にテキスト「overlaytext」を追加する。
このままだとテキストがパッパと切り替わってしまうので、必要に応じてフェイド処理を追加すると良い。

関連記事