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

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …

WordPressが勝手に挿入する「pタグ」を自動挿入させない方法

この記事は約 1 分で読めます。 WordPressには「auto paragraph」という、自動でpタグを挿入してくれる機能があります。 そのため、意図しない見た目になってしまうことが、時々起きて …

no image

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

WordPress オリジナルテーマでデザインをカテゴリごとに変更したい時

この記事は約 1 分で読めます。 オリジナルテーマを自分で作成していて、それぞれのカテゴリーごとにテンプレートを変えたり、デザインを変えたりしたい時。 いろいろな方法があると思います。 「bodyにカ …

no image

WordPress the_excerpt()を使った抜粋にチャレンジ

今回は、「抜粋」をテンプレートタグthe_excerpt()を使って実現する方法にチャレンジしてみました。