POPSブログ

jQuery Tabs/5

187

  Category:  jquery2012/12/23 pops 

分類上、一応はTabsに属するものと思いますが、画像専用のクロスフェード及びスライドのエフェクトが可能なものにしてみました。

 

画像専用Tabs、クロスフェード、スライド形式

下記サンプルのように、簡単に作れます。IE6非対応となっていますが、作動はします。CSS関係(擬似クラス:hoverを使用)が対応していないだけです。現在ではIE6に対応しなくとも良いと思います。CSSは自由ですから合わせてください。
尚、このサンプルでは角丸処理をCSS3で行っていますので、CSS3対応ブラウザのみ角丸になります。


Tabs による画像切り替え D (クロスフェード、スライド形式)


Tabメニューを配置しただけで、単なるPHOTOビューアーにすぎません。


Example D

ボタンを押しエフェクトが完全に終了するまで、次ぎのボタンは機能しません。


  • PHOTO1
  • PHOTO2
  • PHOTO3
  • PHOTO4
1 ボタンを押しフェードが完全に終了するまで、次ぎのボタンは機能しません。
2 透過陰影処理のPNG画像は、IE6以外は問題なくフェード表示出来るようです。(但し構造がサンプルと同じ場合、構造が違えばどうなるかは表示して見ないと判らない)
3 EM要素のためリンクもかけます。リンクテスト: LINK

▼ 下のボタンで少し変化を見ることができます。


エフェクトの切替 : fade left right top bottom :初期値 fade

フェード速度の切替 : 400 600 1000 :初期値 600


 

フェード形式、効率化JS


Tabメニューに対応したコンテンツを切り替え表示するだけですから、色々な書き方があると思いますので、一例です。


HTML

次ぎのように記述します。説明文が不要ならば、<em>説明文</em> の部分は削除します。

注意、以前のものと構造が違います。ID名も違います。( #tab-menu #image-block )

active open close クラスの記入の必要はありません。開きたい箇所はJSで設定します。


<ul id="tab-menu">
	<li>題目1</li>
	<li>題目2</li>
	<li>題目3</li>
	<li>題目4</li>
</ul>
<div id="image-block">
	<div class="tabs-image"><img src="画像URL"><em>説明文</em></div>
	<div class="tabs-image"><img src="画像URL"><em>説明文</em></div>
	<div class="tabs-image"><img src="画像URL"><em>説明文</em></div>
	<div class="tabs-image"><img src="画像URL"><em>説明文</em></div>
</div>

em要素で説明文など記載出来ます。またリンクも可能です。


JS

必要な設定はJS上部参照。

tabs03.js (注釈文削除、注釈文のあるJSはこの下にあります)


//tabs03.js
//日本語、フェード表示

(function($){

	$(function () {

		//大きさはCSSと合わせる
		var box_W=640;
		var box_H=300;
		//最初に開く指定場所番号
		var select_no=0;
		//フェード速度
		var speed=600;
		//エフェクトタイプ、0=fade 1=left 2=right 3=top 4=bottom
		var move_type=0;

		//--------------------------------------

		var fade_flag=false;
		var no=0;
		var keep_no=select_no;
		var imgurls=[];
		var posXs=[0,box_W,-box_W,0,0,0,0,0,0,0];
		var posYs=[0,0,0,-box_H,box_H,0,0,0,0,0];

		//object
		var tabindex=$("#tab-menu");
		var tabblock=$("#image-block");

		//image-url取得
		$(".tabs-image").each(function (i) {
			imgurls[i]=$(this).children("img").attr('src');
		});

		//TOP層
		tabblock.append('<div id="image-top"><img /></div>');
		var imagetop=$("#image-top");//object

		imagetop.css({'top':0,'left':box_W});
		tabindex.find("li").eq(select_no).addClass("active");
		$(".tabs-image").addClass("close").eq(select_no).addClass("open");


		//click-action
		tabindex.find("li").click(function() {

			if (fade_flag) {return false;}
			no=tabindex.find("li").index(this);
			if (no == keep_no) {return false;}
			tabindex.find("li").removeClass("active");
			$(this).addClass("active");

			fade_flag=true;
			imagetop.css({'top':0,'left':box_W});
			imagetop.children("img").empty().attr({src:imgurls[no]});
			//opacity
			var opacity_v=0;
			if (move_type > 0) {opacity_v=1;}
			imagetop.css({'opacity':opacity_v,'top':posYs[move_type],'left':posXs[move_type]});

			//TOPアニメ
			imagetop.animate({'top':0,'left':0,'opacity':1},speed,function(){

				$(".tabs-image").eq(keep_no).removeClass("open");
				$(".tabs-image").eq(no).addClass("open");
				imagetop.css({'top':0,'left':box_W});
				keep_no=no;
				fade_flag=false;
			});

		});

		//hover-action
		tabblock.hover(function(e) {
			if (!fade_flag) {
				$(this).find(".tabs-image").eq(no).find("em").css({'display':'block'});
			}
		},
		function() {

			$(this).find(".tabs-image").eq(no).find("em").css({'display':'none'});

		});

	});

})(jQuery);


JS 注釈文有りの原型、上のJSと同じです。


//tabs03.js
//日本語、フェード表示

(function($){

	$(function () {

		//大きさはCSSと合わせる
		var box_W=640;
		var box_H=300;
		//最初に開く指定場所番号
		var select_no=0;
		//フェード速度
		var speed=600;
		//エフェクトタイプ、0=fade 1=left 2=right 3=top 4=bottom
		var move_type=0;

		//--------------------------------------

		//フェード(エフェクト)中判定フラグ
		var fade_flag=false;
		//押された番号
		var no=0;
		//表示番号
		var keep_no=select_no;
		var imgurls=[];
		//初期位置
		var posXs=[0,box_W,-box_W,0,0,0,0,0,0,0];
		var posYs=[0,0,0,-box_H,box_H,0,0,0,0,0];

		//object
		var tabindex=$("#tab-menu");
		var tabblock=$("#image-block");

		//image-url取得
		$(".tabs-image").each(function (i) {
			imgurls[i]=$(this).children("img").attr('src');
		});

		//TOP画像層を作る
		tabblock.append('<div id="image-top"><img /></div>');
		var imagetop=$("#image-top");//object

		//TOP画像層を欄外に移動
		imagetop.css({'top':0,'left':box_W});
		//コンテンツ、メニュー、指定番号で表示
		tabindex.find("li").eq(select_no).addClass("active");
		$(".tabs-image").addClass("close").eq(select_no).addClass("open");

		//タブメニューclick-action
		tabindex.find("li").click(function() {

			//フェード(エフェクト)中ならclickを受け付けない
			if (fade_flag) {return false;}
			//タブメニュー番号取得、CSS切り替え
			no=tabindex.find("li").index(this);
			//現在表示しているなら処理しない
			if (no == keep_no) {return false;}
			//active処理
			tabindex.find("li").removeClass("active");
			$(this).addClass("active");

			//クロスフェード開始、フェード(エフェクト)フラグを設定
			fade_flag=true;
			//一旦隠す、欄外に移動
			imagetop.css({'top':0,'left':box_W});
			//TOP画像挿入
			imagetop.children("img").empty().attr({src:imgurls[no]});
			//初期opacity決定
			var opacity_v=0;
			if (move_type > 0) {opacity_v=1;}
			//初期位置に移動
			imagetop.css({'opacity':opacity_v,'top':posYs[move_type],'left':posXs[move_type]});

			//TOP画像アニメ
			imagetop.animate({'top':0,'left':0,'opacity':1},speed,function(){
				//古い画像けす
				$(".tabs-image").eq(keep_no).removeClass("open");
				//指定箇所新しい画像表示
				$(".tabs-image").eq(no).addClass("open");
				//TOP画像欄外に移動
				imagetop.css({'top':0,'left':box_W});
				//番号更新
				keep_no=no;
				//fade終了、フェード(エフェクト)フラグを戻す
				fade_flag=false;
			});

		});

		//hover-action emテキスト表示
		tabblock.hover(function(e) {
			//アニメ中以外表示
			if (!fade_flag) {
				$(this).find(".tabs-image").eq(no).find("em").css({'display':'block'});
			}
		},
		function() {

			$(this).find(".tabs-image").eq(no).find("em").css({'display':'none'});

		});

	});

})(jQuery);

複雑なため注釈を多くしています。注釈文を削除すれば少々早くなります。


CSS

注意、画像コンテンツ部分に「外枠有り」( #image-block )。

tabs03.css


/* tabs03.css 日本語 */

/* tab-menu  */
ul#tab-menu {
display:inline-block;
list-style:none;
width:100%;
height:20px;
margin:0;
padding:0;
}
#tab-menu li {
display:inline;
list-style:none;
width:60px;
height:20px;
line-height:20px;
font-size:11px;
font-weight:bold;
text-align:center;
margin-right:2px;
border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-top-left:5px;
-webkit-border-radius-top-right:5px;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}
#tab-menu li.active {
background-color:#EEEEEE;
}
#tab-menu li:hover {
color:#FFFFFF;
background-color:#FF1493;
}

/* image-block */
#image-block {
position:relative;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
overflow:hidden;
}
#image-block img {
border:0;
width:100%;
height:100%;
}

/* top */
#image-block #image-top {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
}

/* tabs-image */
#image-block .tabs-image {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
}
#image-block .tabs-image.close {
display:none;
}
#image-block .tabs-image.open {
display:block;
}

/* em */
#image-block .tabs-image em {
display:none;
position:absolute;
left:0;bottom:0;
width:630px;
padding:5px;
height:auto;
font-style:normal;
font-size:11px;
/font-size:70%;/*IE67*/
color:#FFFFFF;
background:url("/main/images/block_alpha50.png") repeat;
float:left;
overflow:hidden;
}
#image-block .tabs-image em a:hover {
color:#FF0000;
}

サンプルですので、必要に応じて修正ください。


簡単な解説


1. 画像専用になります。エフェクトは「クロスフェード」及び「スライド」の中から選定できます。
2. em要素に説明文などを記入できます。またリンクを組むことが可能です。
3. ボタンを押して「フェード」が終了するまで、次ぎのボタンは機能しません。
4. フェード速度をJS先頭で設定できます。(JS先頭部分参照)
5. CSSはサンプルです。使用者のコンテンツ、ページの環境に合わせて修正します。
6. JS先頭で画像の大きさ及び、最初に開く位置を指定ください。一番目は 0 になります。


「クロスフェード」等のために画像の最上層に#image-top層を加えています。この層に画像を入れる時、ブラウザにより一瞬表示してしまうのを防ぐために、一度欄外に移動して画像を挿入しています。


説明文表示のBOXの背景画像について

BOXの背景を透過させると、IE678及びChromeで中のテキストも透過して読みにくくなりますので、アルファチャンネルPNG画像を背景にいれました。背景画像を使用したくない場合は、下記のようにして下さい。


● 背景画像を使用
#808080のアルファチャンネルPNG画像です。透明度50%になります。


#image-block .tabs-image em {

中略

color:#FFFFFF;
background:url("/main/images/block_alpha50.png") repeat;
}

● 背景画像を使用しない
必ずしも透明度の設定は必要ではない。使用者の自由です。


#image-block .tabs-image em {

中略

color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
background-color:#000000;
}

背景用PNG32透過画像

block_alpha50.png 10x10 アルファチャンネル50%透過 :


以上です。

 


[ この記事のURL ]


タグ:jquery , memo , series , Tabs

[ jQuery Tabs シリーズ記事 ]

jQuery Tabs/62012.12.25
jQuery Tabs/52012.12.23
jQuery Tabs/42012.12.22
jQuery Tabs/32012.12.21
jQuery Tabs/22012.12.20
jQuery Tabs/12012.12.20

 

ブログ記事一覧



[1]