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

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …

no image

WordPressテスト環境をXAMPPで作ってみた♪ for Windows

この記事は約 2 分で読めます。 WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をWindowsのパソコンに作りました。 「XAMPP for Window …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

no image

Facebookの個人プロフィールに勤務先のFacebookページをリンクさせる方法

この記事は約 1 分で読めます。 Facebookの個人プロフィールに、勤務先を入れた時に勤務先のFacebookページとうまくリンクされない事があります。 案外、ココがクリックされているようで・・・ …

no image

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …