jQueryプラグインsupersizedを利用してオープニング画面をつくる

電脳備忘録

ページを開いたときにフェードインするスライドショー(全画面)を実行し、スライドが終わったらトップページに遷移させるようにしてほしいといわれて対応したときのメモ。ようはオープニング画面を表示させた後にトップ画面を表示させたいということですね。

全画面スライドが可能なjQueryプラグインを探し、高機能でIEでも動くsupersizedでスライドショーを実装。「skip」ボタンを押したらトップ画面に遷移するようにしました。

この仕様だと「skip」ボタンを押さない限りループし続けるので、当然といえば当然ですが、全ての画像をスライド表示したらループさせずにトップページに遷移させてほしいという要望が出てきました。で、その機能を実装しようとしたのですが日本語の文献が見つからず、最後は英語サイトを転々としてなんとか下記のエントリーを見つけて解決することができました。

jquery supersized stop_loop redirect?
$(function(){
var interval = 5000,
speed = 1000,
slideArray = [
{image : '/img/slideshow/photo_01.jpg'},
{image : '/img/slideshow/photo_02.jpg'},
{image : '/img/slideshow/photo_03.jpg'},
{image : '/img/slideshow/photo_04.jpg'},
{image : '/img/slideshow/photo_05.jpg'}
]; // add your slides to this array
$.supersized({
slideshow : 1,
autoplay : 1,
start_slide : 1,
stop_loop : true, // Pauses slideshow on last slide
random: 0,
slides : slideArray,
slide_interval : interval,
transition : 1,
transition_speed : speed
});
setTimeout(function() {
window.location = "/index.html";
}, (interval + speed) * slideArray.length);
});

ブランドショップ等のサイトではこういった機能を実装してほしいという要望がそれなりにありそうな気がします。
サンプルはこちら

広告

ブログの維持費に充てるでございます・・・。