POPSブログ

jQueryホリゾンタルアコーディオン/3

109

  Category:  jquery2012/05/31 pops 

Hoyzontal Accordion (Menu hoverタイプ)大型画像専用。前ページの記事「ホリゾンタルアコーディオン1」を大型画像を使用する場合に使い易いようにしました。設定はJS側で行い、CSS記述を簡略化しています。


jQueryホリゾンタルアコーディオン(Menu hoverタイプ) 大型画像使用

大型に画像を挿入して「メニュー」に使用することを前提に最適化しました。画像の大きさを指定できるようにしました。
(画像の縮小)、ページの横幅など変更しても、新しい画像サイズのものをUPせず、楽にページにあわせることが可能になります。


サンプル

簡易方式の「ホリゾンタルアコーディオン」です。現在、5枚構成、中央配置、大きさ640px になります。



1番目初期オープン状態、クリック(<a></a>)の設定はしていますが、クリックしても別ページには飛びません。



HoyzontalAccordionMenu (hoverタイプ) 大型画像使用の説明

CSSでの設定は、大まかな収容位置の大きさのみの変更で、そのほかのサイズなどはJS側で変更します。JSの上方部分をよく読んでください。


  • 構成、JSの内容は popswicks-a.js とほぼ同じものです。大型画像の使用に最適化しています。
  • HTMLおよびCSSの記述を簡略化しています。画像専用です、背景画像は使用できません。
  • 「li要素」にホバーした場合に hovered_wicks クラスが与えられます。現在これのCSS設定はしていない。
  • 横幅、重なり余白など指定できますので、レイアウトが楽になります。(画像枚数5-10枚くらいの場合)
  • 使用する画像横幅の計算を下記により、概略決定してから画像を作ってください。(JSで画像サイズ変更は可能ですが、そのままの大きさのほうがキレイです。お断り:ブラウザの種類により画像の品質が違います。IE6,7ではギザギザになります)
  • 大型画像専用ですが、小型画像にも使用は可能です。設定のほとんどをJSで行っているだけです。
  • この状態では「オールブラウザ対応」です。HTML CSS JS の書き換えなどは使用者の責任で行ってください。

設定方法

説明、そのほかの資料は「jQueryホリゾンタルアコーディオン1」の記事を参照ください。ほぼ同じです。

【参照】前ページの記事: jQueryホリゾンタルアコーディオン1


全体の幅の計算方法(ul要素の幅)

ul要素の幅 = li要素の幅 + 重なり余白の幅 x (li要素の合計数 - 1) で算出できます。

重なり余白などは通常自動計算されて、マスクの大きさも修正されます。場合によっては横幅が1ピクセル小さくなる場合があります。通常はありませんが、事前に画像の幅など考慮せず数多く並べた場合には、マスクでカットされ全て表示されない場合があります。

簡易説明図


1. JS上方の説明を読んでんでください。
2. 余白、全体の幅、画像枚数などを考慮して、画像の大きさを決定ください。
3. 背景色指定は通常画像で隠れますので必要ありません、ほとんど使用することはないと思いますが、画像を小さくして(または小さな画像)配置する場合ですが。使用者が画像周りのCSSを変更ください。
4. 1,2枚の画像の増減が有っても余白の幅が変わるだけです。見栄えが悪い場合は全体の幅(ul)などを変更ください。


設置方法

動作にはjQuery(v1.4以上)が必要です。事前にCSSを読み込み、jQuery、該当JSの順序で読み込みます。標準的なjQueryの設置と同じです。
なお、このサンプルでは jquery-1.6.4.min.js が使用されています。


HTML

上記サンプル、当方の設定例、状況に応じ背景画像URLなどの書き方を変更ください。


<div id="popswicks-wrap">
	<ul id="popswicks">
	<li title="GOTO-PAGE1"><a href="javascript:void(0);"><img src="/main/images/toyota_car01.jpg" /></a></li>
	<li title="GOTO-PAGE2"><a href="javascript:void(0);"><img src="/main/images/toyota_car02.jpg" /></a></li>
	<li title="GOTO-PAGE3"><a href="javascript:void(0);"><img src="/main/images/toyota_car03.jpg" /></a></li>
	<li title="GOTO-PAGE4"><a href="javascript:void(0);"><img src="/main/images/toyota_car04.jpg" /></a></li>
	<li title="GOTO-PAGE5"><a href="javascript:void(0);"><img src="/main/images/toyota_car05.jpg" /></a></li>
	</ul>
</div>

初期状態で「オープンさせたい要素」には actived_wicks クラスをあたえます。JSで設定を優先させる場合はCSSのクラス設定はしないでください。この例ではJSで設定しています。
注意、画像1番目を指定する場合は、0を記入します、2番目は1です。li要素数より大きすぎる場合は最後の画像がオープンします。


JS

簡易記述方式、popswicks-c.js 7KB


//popswicks-c.js
//簡易記述HoyzontalAccordion
//POPS WEB KOUBOU

(function($){

  $(function(){

	//全体の幅を決めるか、または重なりを決めるかで少し形態が違ってくる
	//幅などの大きさ情報
	//BOX情報、CSSに記載されていれば原則記入の必要はない
	var boxWidth = 640;//中の収容BOX幅 ul
	var boxHeight = 260;//中の収容BOX高さul

	//収容item幅 li/自動修正されます
	var itemWidth = 520;
	var itemHeight = 260;

	//余白は固定しない場合自動修正されます
	var boxSpace_W = 24;
	//余白を固定する use/固定する場合は全体を自動修正
	var set_space_use = '';

	//画像サイズ修正されます
	var imgWidth = 520;//画像サイズ幅
	var imgHeight = 260;//画像サイズ高さ
	//画像を縮小する場合収容item幅を画像サイズにあわせる use
	var set_image_use = '';

	//COLOR
	var bgcolor=['#068E9A','#02C8BC','#8FA308','#D0B002','#F89C78','#F08C9F','#D185B7','#068E9A','#02C8BC','#8FA308','#D0B002','#F89C78','#F08C9F','#D185B7'];
	//li要素の背景色を染めるか use	
	var bgcolor_use = '';

	//速度、余白
	var duration = 500;//アニメ速度
	var len_max = 0;//要素最大数

	//position関連変数
	var position_st = [];//初期標準位置保存配列
	var position_op = [];//オープン位置保存配列
	var position_cl = [];//クローズ位置保存配列
	var hoverflag = 0;//ul要素にhoverしているかの判定
	var index = 0;

	//初期に開閉したい要素を指定、0からの番号に注意/CSSでの設定も可能
	//オープン番号指定がない場合は1番目(open_no=0)をオープン/-1の場合は初期標準(standerd位置)にする
	var open_no = 0;
	//Hover-Outの時standerd位置に戻すか use
	var standerd_use = 'use';

	//収容BOX大きさ修正、そのままで使用ください
	var set_v_use = 'use';

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

	//初期化init
	function init () {

		//BOX非表示
		$("#popswicks").css({'display':'none'});

		//基本的な大きさを算出設定
		//要素の数
		len_max = $('#popswicks li').length;

		//収容item幅を画像サイズにあわせる
		if (set_image_use == 'use') {
			itemWidth = imgWidth;
			itemHeight = imgHeight;
			boxHeight = imgHeight;
			//余白初期値を使用/全体をちじめる
			set_space_use = 'use';
		}

		//収容BOX大きさ位置修正再計算
		//余白を再計算/useの場合初期値を使用
		if (set_space_use != 'use') {
			boxSpace_W = Math.ceil((boxWidth-itemWidth)/(len_max-1));//重なり余白計算floor.round.ceil
		}

		//boxWidthが大きすぎる場合ははみ出し分カットされる
		boxWidth = itemWidth + boxSpace_W * (len_max - 1);

		//収容BOX大きさCSS修正
		if (set_v_use == 'use') {
			$('#popswicks').css({'width':boxWidth,'height':boxHeight});
			$("#popswicks li").css({'width':itemWidth,'height':boxHeight});
			$("#popswicks li img").css({'width':imgWidth,'height':imgHeight});
		}
			
		//配置位置を計算保存
		$("#popswicks li").each(function(i) {

			//position保存
			position_st[i] = (boxWidth / len_max) * i;
			position_op[i] = boxSpace_W * i;
			position_cl[i] = boxSpace_W * (i-1) + itemWidth;
			if(i == 0) {position_cl[0] = 0;position_op[0] = 0;}//1番目補正
			//actived位置保存
			if ($(this).attr('class') == 'actived_wicks') {open_no = i;}
			//li背景を染める
			if (bgcolor_use == 'use') {
				$(this).css({'background-color':bgcolor[i]});
			}
			//外側に移動配置
			$(this).css({'left':boxWidth});

		});

		//actived位置修正/大きい場合は最後
		if (open_no >= len_max) {open_no = len_max - 1;}

		//BOX表示
		$("#popswicks").css({'display':'block'});

		//初期移動
		//オープン位置を指定してオープン
		if (open_no >= 0) {
			open_set(open_no);
		}
		//指定なしオープン、standerd2標準にする
		if (open_no == -1) {
			standerd_set2();
		}

		//hover_actionを有効にする
		hover_action_set();

	}

	//------------------------------------------------
	//ACTIONの設定/hovered_wicksクラスをあたえているがここではクラス未使用
	//CSS側で変化をつける場合にクラスを使用してください

	var hover_action_set = function() {

		//li要素HOVER-ACTION-addClass
		$("#popswicks li").hover(
			//hover
			function(e) {
				$(this).addClass("hovered_wicks");
				//要素の番号を取得
				var index_no = $("#popswicks li").index(this);
				//グローバルindexに保存、index使用
				index = index_no;
				//hover番号位置をオープン
				open_set(index_no);
			},
			//hover-Out-removeClass
			function(e) {
				$(this).removeClass("hovered_wicks");
			}
		);

		//ul要素HOVER-OUT-ACTION
		$("#popswicks").hover(

			//hover何もしない
			function() {
				hoverflag = 0;
			},
			//hover-Out標準に戻す
			function() {
				hoverflag = 1;
				//戻す場合の指定を判定して処理する
				if (standerd_use == 'use') {
					//標準状態に戻す
					standerd_set();

				} else {
					//開いたままにする、場所を指定して開くことも可能
					hoverflag = 0;

					//常に初期指定のオープン位置に戻す場合はstanderd_useを変更して、下記のようにすれば良い
					//open_set(open_no);

				}


			}
		);
	}

	//------------------------------------------------
	//アニメACTIONの実行
	//open
	function open_set(no) {

		$("#popswicks li").each(function(i) {
			if (no >= i) {$(this).stop().animate({'left':position_op[i]},duration);}
			else {$(this).stop().animate({'left':position_cl[i]},duration);}
		});

	};
	//standerd hoverflag-OUTの場合のみ処理
	function standerd_set() {
		//ul要素にhoverしている場合のみ処理
		if (hoverflag) {
			$("#popswicks li").each(function(i) {
				//標準positionにセット
				$(this).stop().animate({'left':position_st[i]},duration);
			});
			hoverflag = 0;
		}
	};
	//standerd2 hoverflag-OUT以外、初期のオープに使用
	function standerd_set2() {
		$("#popswicks li").each(function(i) {
			//標準positionにセット
			$(this).stop().animate({'left':position_st[i]},duration);
		});

	};

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

	//全体を計算配置表示する
	init ();

  });

})(jQuery);

「li要素にホーバー」した場合、その要素に hovered_wicks クラスが与えられます。何らかの変化をCSSで与える場合に利用できます。


CSS

popswicks-c.css


/* popswicks-c.css 日本語 */

/*外枠は必ず設定する*/
#popswicks-wrap {
	width:640px;
	height:260px;
	background-color: #000000;
	text-align:center;/*中央補正*/
	overflow: hidden;
}

/*以下JSで自動修正されます*/
#popswicks-wrap ul {
	position: relative;
	list-style: none;
	margin: 0 auto;/*中央補正*/
	padding: 0;
	text-align:left;/*中央補正の場合に重要*/
	background-color:none;
	overflow: hidden;
}
#popswicks {
	width:640px;
	height:260px;
}
#popswicks li{
	list-style: none;
	display: inline;
	position: absolute;
	top:0;left:0;
	width: 100%;
	height: auto;
	padding: 0;
	margin-right: 0px;
	background-color:#000000;/*標準*/
	overflow: hidden;
}
#popswicks li a {
	width:100%;
	height:auto;
	border:none;
	text-decoration:none;
}
#popswicks li a img {
	border:none;
	text-decoration:none;
}

収容する外枠のCSSは使用者が直接訂正ください。現在中央表示になっています。


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

サンプル画像、520x260

画像はトヨタ自動車(株)の壁紙を引用しています。

【画像引用】toyota.jp: TOYOTA


以上です。




[ この記事のURL ]


タグ:jquery , Accordion , series

[ jQueryホリゾンタルアコーディオン シリーズ記事 ]

jQueryホリゾンタルアコーディオン/52012.06.04
jQueryホリゾンタルアコーディオン/42012.06.01
jQueryホリゾンタルアコーディオン/32012.05.31
jQueryホリゾンタルアコーディオン/22012.05.29
jQueryホリゾンタルアコーディオン/12012.05.28

 

ブログ記事一覧

年別アーカイブ一覧



[1]