Supersized

Supersizedは背景画像をブラウザの全画面に表示し、ブラウザのリサイズに合わせて画像もリサイズでき、しかもスライドショーとして再生できるJavaScriptです。jQuery PlugIn。

名称
Supersized
配布元
Build Internet
必要なモジュール
jQuery
動作確認済みブラウザ
Mac:Firefox 3.6.3, Safari 4.0.5/5.0, Google Chrome 5.0.375.55, Opera 10.53
Win:IE 8, Firefox 3.6.3, Safari 4.0.4/5.0, Google Chrome 5.0.375.55, Opera 10.53, IE 7/6(IETester)
ライセンス
不明(特に記述なし)

デモ

設置方法

まずはサンプルを元に、基本的な設置の方法です。

  1. Build InternetからSupersizedをダウンロードします。
    ダウンロードファイルを解凍すると「default.php」「slideright.php」「topclean.php」などがあります。
    これらの拡張子を「.htm」に変更すると、ブラウザでサンプルを確認できます
  2. 例として下記のフォルダ構成で設置します。
    [設置フォルダ]
     ├ default.htm
     ├ [js]
     │ └ supersized.2.0.js
     ├ [css]
     │ └ supersized.css
     └ [images]
       ├ ダウンロード時に付属していた画像
       └ スライドショー表示する画像
    supersized.cssは「default.php」内に記述されていたcssを外部ファイルとして保存したものです。
  3. head要素内に、読み込むJavascriptやCSSファイルのパスを記述します。
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    	<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
    	<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
    	<script type="text/javascript" src="js/supersized.2.0.js"></script>
    	<link rel="stylesheet" href="css/supersized.css" media="screen" />
  4. 続けてhead要素内に以下を記述します。
    <script type="text/javascript">
    	$(function(){
    	$.fn.supersized.options = {
    	startwidth: 640,
    	startheight: 480,
    	vertical_center: 1,
    	slideshow: 1,
    	navigation: 1,
    	transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
    	pause_hover: 0,
    	slide_counter: 1,
    	slide_captions: 1,
    	slide_interval: 5000
    	};
    	$('#supersize').supersized();
    	});
    	</script>
  5. body要素内は「default.php」内に記述されていたものをそのまま流用し、画像ファイルのみ変更しました。
    <!--Loading display while images load-->
    	<div id="loading"> </div>
    
    	<!--Slides-->
    	<div id="supersize">
    	<a href="#"><img src="images/opendoorB2_1.jpg" title="BAR OPEN DOOR B2"/></a>
    	<a href="#"><img src="images/opendoorB2_2.jpg" title="Umeda, Osaka, Japan"/></a>
    	<a href="#"><img src="images/opendoorB2_3.jpg" title="大阪市北区梅田1-3-1"/></a>
    	<a href="#"><img src="images/opendoorB2_4.jpg" title="大阪駅前第一ビルB2F"/></a>
    	<a href="#"><img src="images/opendoorB2_5.jpg" title="BAR OPEN DOOR B2"/></a>
    	</div>
    
    	<!--Content area that hovers on top-->
    	<div id="content">
    	<div id="contentframe">
    
    	<div id="slidecounter"><!--Slide counter-->
    	<span class="slidenumber"></span>/<span class="totalslides"></span>
    	</div>
    	<div id="slidecaption"><!--Slide captions displayed here--></div>
    	<!--Logo-->
    	<a href="http://www.buildinternet.com" class="stamp"><img src="images/supersizedblackmini.gif"/></a>
    	<!--Navigation-->
    	<div id="navigation">
    	<a href="#" id="prevslide"><img src="images/back_dull.gif"/></a><a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a><a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a>
    	</div>
    
    	</div>
    	</div>
    	スライドする画像にはa要素でマークアップされていますが、a要素を削除するとスライド表示はされないようです。

オプション

オプションとデフォルト値は以下です。

各オプションは on/off を切り替えられます。1はon、2はoffです。

startwidth: 4,
	startheight: 3,
	vertical_center: 1,
	slideshow: 1,
	navigation:1,
	transition: 1,
	pause_hover: 0,
	slide_counter: 1,
	slide_captions: 1,
	slide_interval: 5000
startwidth, startheight
これらの設定値は画像をリサイズする際の縦横比の計算に使われます。
使用する画像は歪曲を防ぐために、比率が同じでなければなりません。(例:1280 x 960, 1024 x 768)
デフォルトは 4:3 です。
vertical_center
「1」にすると、垂直方向にセンター配置します。「0」にすると top left コーナーからリサイズ/表示されます。
slideshow
スライドショーの on/off を切り替えます。キャプション、カウンター、ナビゲーションは読み込まれます。
navigation
ナビゲーションの on/off を切り替えます。
off(「0」) にするとpause/play(一時停止/再生)や次へ/前へなどのバビゲーションが非表示になります。(ナビゲーションで使用されているボタンの画像は images フォルダの中にあります)
transition
スライドを切り替える際のエフェクト(効果)を制御します。
0:エフェクト無し
1:フェード(デフォルト)
2:上からスライドしてきます。
3:右からスライドしてきます。
4:下からスライドしてきます。
5:左からスライドしてきます。
pause_hover
マウスカーソルが画像の上にある間、スライドショーは一時停止します。
また上記「navigation」が on の場合は pause(一時停止)ボタンがアクティブになります。
slide_counter
スライドのカウンターの on/off を切り替えます。
Supersizedスクリプトは「#slide_counter」を見て、現在のスライド番号を「.slidenumber」に、総スライド数を「.totalslides」に設定します。
配布元では「#slide_counter」と記述されていますが、「default.php」を見ると<div id="slidecounter">となっています。
slide_captions
スライドキャプションの on/off を切り替えます。
キャプションは現在の画像(img要素)の title 属性を「#slidecaption」に表示します。
slide_interval
スライドを切り替えるまでの時間を1,000分の1単位で変更できます。
デフォルトは5秒(5000)です。

カスタマイズしたサンプルはこちらをご覧ください。(画像の上でクリックすると、このページに戻ります。)

  1. HTMLから作者ロゴを削除
  2. オプションを以下に変更
    startwidth: 4,
    	startheight: 3,
    	vertical_center: 1,
    	slideshow: 1,
    	navigation:0,
    	transition: 1,
    	pause_hover: 0,
    	slide_counter: 0,
    	slide_captions: 1,
    	slide_interval: 7000
  3. キャプション表示部の背景を半透明するため、cssの #content を以下に変更
     background-color: #0e203b; /* CSS2 */
    	filter: alpha(opacity=50); /* for IE6, IE7, IE8 */
    	-moz-opacity: 0.5; /* for Netscape, Firefox1.5 Ealier */
    	-khtml-opacity: 0.5; /* for Safari (1.x) */
    	opacity: 0.5; /* CSS3 for Over FF3, Safari3, Opera10 */
    	/* background:#262626 no-repeat 90%; 変更前 */
    上記の設定はCSS Transparency Settings for All Browsersを参考にしました。
  4. 上記オプションで slide_counter:0 にしても / は表示されるため、cssの #slidecounterdisplay: none; を追加
    #slidecounter{
    	display: none;
    	以下はそのまま
    	}

CAMERA

公開日

ページトップに戻る