• かちびと.net

    画像を画面いっぱいに広げてフェードエフェクトで切り替えるスライドを実装するjQueryプラグイン・slideshowify.jsのご紹介。、フルスクリーンのスライドショーを実装するjQueryプラグインです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

画像を画面いっぱいに広げてフェードエフェクトで切り替えるスライドを実装するjQueryプラグイン・slideshowify.js

スポンサーリンク

地味に良さそうだったので備忘録。画面
いっぱいに画像を広げてフェードエフェ
クトでスライドショーを実装できるjQuery
プラグイン・slideshowify.jsです。この
手のプラグインは沢山あるので選択肢
の一つとして・・

なんとなくよく見かけた画像のフルスクリーン表示を実装します。この見せ方は良い写真や画像なら飲食店やアパレル系などでは訴求力もあるし、よく見かけるのも当然といえば当然かもしれません。

slideshowify.js

キャプチャ見ても全然ピンと来ないと思いますのでSampleご覧下さい。

Sample

基本的には直接貼られた画像をスライド化します。※画像はmark sebastian氏より(CC-BY)

指定されたセレクタ外のコンテンツはpositionプロパティによって画像上に配置されている形となります。スライドしている画像はdisplay:none;を使用していますので各々の画像にリンクは貼れません。

コード

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.slideshowify.js"></script>
<script type="text/javascript"> $("img").slideshowify(); </script>

本体とプラグインを読み込んでセレクタを書くだけです。

	containerId   : "slideshowify-bg", // このプラグイン内でスライドに付けるdivのid
	containerCss  : {// 画像の設定あんまり変えないでいいと思います
		"position" : "absolute",
		"overflow" : "hidden",
		"z-index"  : "-2",
		"left"     : "0",
		"top"      : "0",
		"width"    : "100%",
		"height"   : "100%"
	},
	transition    : "into", // "into"か"toBg"。toBGはフェード無しに設定します
	direction     : "alternate", // "default か "alternate"
	fadeInSpeed   : 2000,
	fadeOutSpeed  : 2000,
	aniSpeedMin   : 6000,  // アニメーションのスピード
	aniSpeedMax   : 8000,  // アニメーションのスピード
	afterFadeIn   : function(){},
	beforeFadeOut : function(){}

細かい設定はslideshowify.js開ければ上記設定がありますので便宜変更してください。

IE7まで動作しますので実用的ではありますね。以下よりどうぞ。

slideshowify.js

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services