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.

関連記事

no image

Yahoo!アクセス解析を設定してみました!

この記事は約 1 分で読めます。 2013年10月30日にリリースされた「Yahoo!アクセス解析」。 まだまだリリースされて日が浅いのでGoogle Analyticsほどの資料が見つからないのです …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

Basic認証を簡単に設置する方法

この記事は約 1 分で読めます。 特定の人にだけ公開する場合、IDとパスワードを用意する「Basic認証」という方法でアクセス制限をするのができます。 「Basic認証」で必要な「.htaccess」 …

no image

MAMPでMySQLが起動しない時

この記事は約 1 分で読めます。 MAMPを起動した時、Apacheはちゃんと起動されているのにMySQLが起動しないことがあります。 いろいろな原因はありそうですが、とりあえず調べた内容でなんとか無 …