Webの記録

jQuery「Supersized」でフルスクリーンのスライドショーを簡単設置

投稿日:

この記事は約 4 分で読めます。

Supersized

大きな画像をフルスクリーンでスライドするjQueryライブラリ「Supersized」を試してみました。

画面のサイズが変わっても、画像の縦横比を維持したままキレイに表示できるというライブラリです。

簡単に設置ができるだけでなく、オプションがあり表示の仕方を変えられるという点でも、メモとして残しておきたいライブラリです。

特徴

  • 画像の縦横比を維持したまま、様々なブラウザのサイズに対応
  • 私が試した環境ではIE7以上で表示(タブレット系でも表示可。横にして見た方がキレイです)
  • スライドの表示時間、スライドの切り替え効果などの設定ができる
  • オプションでスライドのナビゲーション表示を設定できる
  • ライセンス:MIT / GPL

※詳しくは、「Supersized」でご確認ください。デモもあります!

Supersized

設置方法

Supersized」から「Supersized」ダウンロードします。

フォルダの中に「core」・「flickr」・「slideshow」と3種類のフォルダがあります。好みに応じて同梱のサンプルhtmlを参考に設置します。

設置例

headerの記述例
(1行目はサイトの為のスタイルシート。2行目以降を参考にしてください)

<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/supersized.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>

続けて、スライドの設定例

<script type="text/javascript">
jQuery(function($){
    $.supersized({
        slide_interval : 5000, //1画像の表示時間
        transition : 1, //切り替え効果
        transition_speed : 300, //切り替えスピード
        slides : [
            { image : 'img/01.jpg' },
            { image : 'img/02.jpg' },
            { image : 'img/05.jpg' },
	   { image : 'img/04.jpg' }
        ]
    });
});
</script>

上記の記述だけで、フェード処理・サムネイルなしのシンプルなフルスクリーンスライドが完成します。

※細かな設定方法は「Supersized」のドキュメンテーションを参考にすると良いです。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ6【single.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今のところ、「index.php」「header.php」「sidebar.php」「footer. …

no image

Evernote Webクリッパーを入れてみた♪

この記事は約 1 分で読めます。Web上で興味を持ったページの情報をそのまま手軽にEvernoteに保存する方法を試してみたいと思います。 日頃使っているEvernoteの便利な使い方その2です。(2 …

no image

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

この記事は約 1 分で読めます。WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。 今までのテーマは、デフォルトであった「twentyten」や「cor …

『WordPress閲覧しているページが使用しているテンプレートがひと目でわかる!』便利プラグイン「Show Current Template」

この記事は約 1 分で読めます。 WordPressのテンプレートを制作・カスタマイズをしていて、「表示しているページがどのテンプレートを読んでるんだろう」と思ったことはないですか? 「Show Cu …

no image

WordPressプラグイン「NIVO slider light」でリッチなスライドショー簡単設置

この記事は約 1 分で読めます。 以前「jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪」で、「jquery.nivo.slider.js」というjQueryライ …