Apple-style Slideshow


Description: Appleのスライドショーのようなギャラリーを構築するチュートリアルです。デモではcss3と、IE7のハックを用いているので汎用的とは言えませんが、軽量なコードで手軽に実装可能です。
Sample: demo
Tutorial: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
License: 個人商用OKだけど、再配布や販売は不可

Sample

Note

$(document).ready(function(){

	var totWidth=0;
	var positions = new Array();

	$('#slides .slide').each(function(i){

		positions[i]= totWidth;
		totWidth += $(this).width();

		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
	});

	$('#slides').width(totWidth);

	$('#menu ul li a').click(function(e,keepScroll){

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');

			var pos = $(this).parent().prevAll('.menuItem').length;
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

			e.preventDefault();
			if(!keepScroll) clearInterval(itvl);
	});

	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;

		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);
		current++;
	}
	var changeEvery = 10;
	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
});

軽量なコードで実装できます

Related snippet :

  • Description: 画像にマウスオーバーするとアニメーションしながら拡大します。サムネイルにインパクトを与えたり、メニューとしても使えそうです。MacのDockライクな ...
  • Description: マウスオーバーで可愛いアイコンが降り、離すと裏から戻る、というアニメーションのグローバルメニューです。ユニークでインパクト有ります。 Sa ...
  • Description: 多くの形に対応できる高機能コンテンツスライダープラグインです。テキストなどや画像ギャラリー、上記画像のようなサムネイルギャラリーなども構築可能。表示 ...
  • Description: 美しいサイドアウトナビゲーションです。マウスを乗せる事でアイコンがスライドインします。また、メニュー全体をposition: fixed;で固定させ ...
  • Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられ ...
  • Description: サムネイルに応じて画像がスライドします。ナビゲーションも一緒にスライドするのは印象的でいいですね。動作も軽快で汎用性がありそうです。コードも軽量でc ...
  • Description: iTuneライクなスライダーを手軽なコードで実装します。IEだとちょっと微妙ですね・・・サムネイル付きで画像の切り替わりと連動してサムネイルも動きま ...