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でシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …

no image

WordPress管理画面の不正アクセス防止に「Simple Login Lockdown」

この記事は約 1 分で読めます。 WordPressの管理画面にログインするには、ユーザー名とパスワードさえ合っていれば誰でもどこでも入る事が出来ます。 特に推測しやすいパスワードにしていた場合、全然 …

no image

WordPress 「Contact Form7」で送信完了画面と自動送信メールを試してみた

この記事は約 2 分で読めます。 WordPressの「Contact Form7」は、お問い合せフォームを簡単に取り付ける事が出来るという便利なプラグインです。 以前から利用しているのですが、最近ま …

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

Facebookページで「30いいね!」を獲得したら出てくる「インサイト」画面。

この記事は約 1 分で読めます。 ゆるゆると更新していたFacebookページ。 ようやく「いいね!」の数が30を超えました。 すると、今まで見る事が出来なかった「インサイト」という項目が表示されるよ …