POPSブログ

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

111

  Category:  jquery2012/06/04 pops 

Hoyzontal Accordion (hoverタイプ)を「簡易アルバム」のサムネール表示に応用してみました。設定はほぼJS側で行いCSS記述を簡略化しています。画像などはJS側に登録して行います。


jQueryホリゾンタルアコーディオンの応用

簡易SLIDESHOW-8に、ホリゾンタルアコーディオン(hoverタイプ)メニューを組み込み表示してみます。「簡易アルバム」タイプに改造しています。


アコーディオンサムネール付き画像切り替え、サンプル表示



1番目初期オープン状態、サムネールを「クリック」で大きな画像を表示します。(スライドショー機能削除)


このJSは、当方の記事、簡易SLIDESHOW-8のJSとホリゾンタルアコーディオンと組み合わせたものです。

【参照】簡易SLIDESHOW-8記事: 簡易SLIDESHOW-8


HoyzontalAccordionMenu (hoverタイプ) サムネール使用の説明

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


  • 利点として狭いスペースに多くのサムネールを収容可能になります。
  • 比較的面倒なものですので、他に余り見かけないタイプです。(画像数は20枚以下くらいで使用想定)
  • 重なり余白など幅を指定できます。現在は横1列に表示するだけです。ページングはありません。
  • サムネール部分、li 要素を自動出力可能です。
  • スライドショーは現在フエードを設定。スライドの組み合わせも可能です。(現在、スライドショー機能は削除しています。別ページに掲載します。)
  • このサンプルでは、IE6以上、そのほかオールブラウザ対応です。(Chrome推奨)

設定方法

JS先頭部分を読んでください。画像はJSに登録します。サムネール画像もJSに登録可能です。


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

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

設定されたul要素の幅に収めるため、JSでサムネール幅などで計算して適性な幅に修正されます。設定されたul要素の幅をはみ出す場合は、余白が小さく修正され収められます。

簡易説明図


1. 余白の幅はサムネール幅の半分、または幅を指定、で選定できます。但し収まり切れない場合は幅は縮小されます。サムネールの数により見栄えの良いほうを選定ください。
2. liを収容するulの最大幅 boxWidth を設定します、小さい場合は幅をJSで修正します。boxWidth を超えることはありません。
3. サムネール画像は別途「小さなサイズ」を使用者が用意します。大きな画像を縮小して利用が可能ですが、この場合「画像の転送量」が多くなります。
4. サムネール収容のli部分はHTMLに記入することが原則ですが、JSで自動に作ることも可能です。この場合はサムネール画像名などをJSに登録します。
5. CSS変更などは自由です。
現在のactiveなサムネールには、pgr_actived クラスがあたえられます。(li要素)
サムネールにhoverした場合、hovered_wicks クラスがあたえられます。(li要素)


スライドショー部分の設定方法

1. 大型画像を用意して、JSに名前を登録、大きさ、画像までのパスを設定します。
2. スライドショーは現在フエード専用設定になっています。fade_only = '' にするとスライド機能も付加されます。
3. アニメ速度は、各々画像の大きさなどにより変更ください。
4. CSSで必要部分の大きさ変更、Loading画像のパスを変更ください。


設置方法

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


HTML

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




-------------------------------------------------------
9b
<div id="pops_slideshow_wrap">
<div id="pops_slide_show">
	<div id="slideshow_box">
		<div id="ss_imgholder"><img /></div>
		<div id="top_base"><img /></div>
		<div id="ss_loading"></div>
		<div id="view_text"></div>
	</div>
</div>
<div id="start_btn">||</div>
</div>
<div id="thumbblock-wrap">
	<ul id="thumbblock">
	<li><img src="/main/images/toyota_car01s.gif" /></li>
	<li><img src="/main/images/toyota_car02s.gif" /></li>
	<li><img src="/main/images/toyota_car03s.gif" /></li>
	<li><img src="/main/images/toyota_car04s.gif" /></li>
	<li><img src="/main/images/toyota_car05s.gif" /></li>
	</ul>
</div><br class="clear" />

初期状態で「オープンli要素」は1番目の画像に固定されています。


li 要素を自動出力する場合のHTMLの書き方


以下のように、li部分を除いて、他の要素などは残します

<div id="thumbblock-wrap">
	<ul id="thumbblock">
	</ul>
</div>

JS

簡易記述方式、pops-slideshow-09.js 13KB


//pops-slideshow-09.js
//wicksサムネール方式
//POPS WEB KOUBOU

(function($){

	$(function(){

		//-------画像設定-----------

		//画像の大きさ
		var bs_W = 520;
		var bs_H = 260;

		//時間、アニメ速度
		var fade_speed = 600;//フェード時間 400-1000
		var slide_speed = 1000;//拡大縮小時間 400-1000
		//fade専用にする only
		var fade_only = 'only';
		//出現確率
		var view_type = 'move';
		var random_nm = ['move','move','fade'];

		//画像およびサムネール画像までのパス
		var path ='/main/images/';
		//画像名を登録する
		var img_urls = ['toyota_car01.jpg','toyota_car02.jpg','toyota_car03.jpg','toyota_car04.jpg','toyota_car05.jpg'];
		var list_len = img_urls.length;

		//-------サムネール設定-----

		//liを収容する大きさ、幅はJSで修正されます
		var boxWidth = 520;//最大ul幅

		//収容item、画像の大きさ li/自動修正されます
		//画像(img)はCSSで100%になっていること
		var itemWidth = 65;//li幅
		var itemHeight = 32;//li高さ

		//余白は固定しない場合自動修正されます、サムネールの半分の幅以下
		var boxSpace_W = 20;
		//余白を固定する use/固定する場合は全体を自動修正
		var set_space_use = '';
		//サムネールアニメ速度速度
		var duration = 250;

		//サムネール要素を作るか make
		var thumb_make = '';
		//作る場合にサムネール画像名登録する
		var thumb_urls = ['toyota_car01s.gif','toyota_car02s.gif','toyota_car03s.gif','toyota_car04s.gif','toyota_car05s.gif'];
		//サムネール画像に大きな画像の縮小版を使用する場合、有効にする
		//var thumb_urls =img_urls;

		//合計数算出
		var thumb_len = thumb_urls.length;

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

		//jQueryObjectCache
		var imgholder_elm,slideshow_elm,top_elm;
		var img_url,keep_url,loading,thumbshowbox;
		var imgPreloader;//opela

		//chash
		slideshow_elm = $('#slideshow_box');
		imgholder_elm = $('#slideshow_box #ss_imgholder');
		top_elm = $('#slideshow_box #top_base');
		loading = $('#slideshow_box #ss_loading');

		//スライド番号、random表示しない場合使用される
		var slide_no = 3;//3
		//random表示にするか random の場合だけ、他の文字では実行しない
		var slide_type = 'random';//random

		//位置情報
		var pos_Xs = [-bs_W,0,bs_W,bs_W,bs_W,0,-bs_W,-bs_W,0,bs_W/2,0];
		var pos_Ys = [-bs_H,-bs_H,-bs_H,0,bs_H,bs_H,bs_H,0,bs_H/2,0,0];

		//汎用変数/使用していないものもある
		var count = 0;
		var no = 0;
		var move_type_name = ['in','out'];
		var in_type = "in";
		var fade_set = "";
		var anime_move = "";
		var box_len;

		//opacity使用の判定
		var support_op=true;
		if (!jQuery.support.opacity) {support_op=false;}
		var new_count = 0;
		//click判定
		var clickflag='';

		//通常余白計算値、サムネール画像幅1/2
		if (set_space_use != 'use') {
			boxSpace_W = Math.round(itemWidth / 2);
		}
		var len_max = 0;//サムネール要素最大数

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

		//オープン番号0固定です
		var open_no = 0;

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

		//init
		var init = function () {

			//loading-Set
			loading.css({'width':bs_W,'height':bs_H,'display':'none'});
			//sliceBox非表示
			top_elm.css({'display':'none'});

			//MENUサムネール初期化init2に進む
			init2();

			//
			count = 0;
			//最初の画像をINNER画像BOX1にセット表示する
			img_url=path+img_urls[count];
			keep_url=img_url;

			//最初の画像を下層に表示する
			imgholder_elm.children("img").empty().attr({'src':img_url});

		}

		//表示の種類により振り分け
		var set_view_images = function () {
			//random
			view_type = random_nm[Math.floor(Math.random() * random_nm.length)];
			//fade専用にする
			if (fade_only == 'only') {view_type ='fade';}

			//分岐
			if(view_type == 'fade') {
				fade_image();
			}
			if(view_type == 'move') {
				move_image();
			}
		}

		//フエード処理表示
		function fade_image (){

			anime_move = 'move';
			fade_set = "fade";
			
			//上画像TOPelmに前の画像をセット
			top_elm.children("img").empty().attr({src:keep_url});
			top_elm.css({'top':0,'left':0,'width':bs_W,'height':bs_H,'display':'none'});
			//imgholder
			imgholder_elm.children("img").empty().attr({'src':img_url});
			top_elm.css({'display':'block'});

			top_elm.animate({'opacity':0},fade_speed,function() {
				//下画像に新しいURLセット
				imgholder_elm.children("img").empty().attr({'src':img_url});
				//上画像非表示、ずらす
				top_elm.css({'left':bs_W,'top':0,'display':'none'});
				//終了処理に進む
				show_image_parts();

			});

		};

		//移動処理表示
		function move_image () {

			anime_move = 'move';
			fade_set = '';

			//random-No
			if (slide_type == 'random') {
				slide_no=Math.floor(Math.random() * 10);
			}

			//postion
			pos_x=pos_Xs[slide_no];
			pos_y=pos_Ys[slide_no];
			//WH
			var slide_W=bs_W;
			var slide_H=bs_H;
			if (slide_no == 8) {slide_H=0;}
			if (slide_no == 9) {slide_W=0;}


			//上層移動とURLの代入
			top_elm.css({'top':pos_y,'left':pos_x,'width':slide_W,'height':slide_H,'display':'none'});
			top_elm.children("img").empty().attr({'src':img_url});
			top_elm.css({'display':'block'});

			//top-slideスライドアニメ実行
			top_elm.animate({'top':0,'left':0,'width':bs_W,'height':bs_H},slide_speed,function(){
				//
				imgholder_elm.children("img").empty().attr({'src':img_url});
				//上画像非表示、ずらす
				top_elm.css({'left':bs_W,'display':'none'});

				//終了処理に進む
				show_image_parts();
			});

		}

		//end-anime、終了処理
		function show_image_parts() {

			//fade修正
			if (fade_set == 'fade') {
				top_elm.css({'opacity':1});
				//opacity使用の判定フィルター除去
				if (!support_op) {top_elm.css({'filter':'none'});}
			}

			fade_set = '';
			anime_move = '';

			//keep-url
			keep_url=img_url;

			//clickボタンが押されているか、判定
			if (clickflag == 'click') {
				clickflag = "";
				count = new_count;
				//指定番号の画像をLOAD
				cycleset2();
			}

		};

		//NEXT、次ぎ画像のLOAD
		function nextImage() {
			//カウントアップ
			count++;
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			img_url = path + img_urls[count];
			imgload ();
		}

		//imgPreloader
		var imgload = function() {
			//loading
			loading.css({'display':'block'});
			//set-imgPreloader
			imgPreloader = new Image();
			//onload
			imgPreloader.onload = function() {
				//loading
				loading.css({'display':'none'});
				//サムネール位置countを指定してオープン
				open_set(count);
				//表示振り分け
				set_view_images();
			}
			//url
			imgPreloader.src = img_url;
		}

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

		//指定番号の画像LOAD
		var cycleset2 = function () {
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			img_url = path + img_urls[count];
			imgload ();
		}

		//---------------------------------------------
		//MENU初期化init2
		function init2 () {

			//サムネール要素を作る
			if (thumb_make == 'make') {
				var thumbs = "";
				for (var i=0; i < thumb_len; i++) {
					var thumbimgurl = path + thumb_urls[i];
					thumbs += '<li><img src="' + thumbimgurl + '" /></li>';
				}
				//append
 				$('#thumbblock').append(thumbs);
			}

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

			//収容BOX大きさ位置修正再計算 余白を再計算/useの場合初期値を使用
			//仮の幅を計算
			var boxWidth2 = itemWidth + boxSpace_W * (len_max - 1);
			//ul幅が仮の幅拠りおおきければ仮の幅を使用する
			if (boxWidth >= boxWidth2) {
				boxWidth = boxWidth2;
			}
			//反対にちいさければSpaceを小さくする
			if (boxWidth < boxWidth2) {
				boxSpace_W = Math.ceil((boxWidth - itemWidth) / (len_max-1));//重なり余白計算
				boxWidth = itemWidth + boxSpace_W * (len_max - 1);
			}

			//収容BOX大きさCSS修正
			//幅のみ修正、位置はCSSで微調整できる
			$('#thumbblock').css({'width':boxWidth});
			//大きさは指定値
			$("#thumbblock li").css({'width':itemWidth,'height':itemHeight});
			
			//配置位置を計算保存
			$("#thumbblock 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;}

				//サムネール、番号アクション設定
				var li_index_no;
				$(this).bind({
					//click
					click: function(e) {

						//skip、表示中の画像が同じならスキップ
						if ($(this).index() == count) {return false}
						//クリック判定フラグ
						clickflag = 'click';
						//アニメ実行中なら、番号を保存
						if (anime_move == 'move') {new_count = $(this).index();clickflag = 'click';return false;
						} else {
							//アニメ実行中でないならば、指定番号画像をLOAD
							clickflag = '';
							count = $(this).index();
							new_count = 0;
							//押された番号をactivedにする
							$("#thumb_box ul li").removeClass("pgr_actived");
							$(this).addClass("pgr_actived");
							//LOAD
							cycleset2();
						}
					}

				});

				//外側に移動配置
				$(this).css({'left':boxWidth});

			});

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

			//初期移動 オープン位置を指定してオープン
			if (open_no >= 0) {
				open_set(open_no);
			}

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

		}

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

		var hover_action_set = function() {

			//li要素HOVER-ACTION-addClass
			$("#thumbblock li").hover(
				//hover
				function(e) {
					$(this).addClass("hovered_wicks");
					//要素の番号を取得
					var index_no = $("#thumbblock 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
			$("#thumbblock").hover(
				//hover何もしない
				function() {
					hoverflag = 0;
				},
				//hover-Out場所を指定して開く
				function() {
					hoverflag = 1;
					//現在の画像番号で開く
					open_set(count);
					hoverflag = 0;
				}
			);
		}

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

			$("#thumbblock li").each(function(i) {
				if (no >= i) {$(this).stop().animate({'left':position_op[i]},duration);}
				else {$(this).stop().animate({'left':position_cl[i]},duration);}
			});
			//activeをチェックする
			active_check();

		};
		//standerd hoverflag-OUTの場合のみ処理
		function standerd_set() {
			//ul要素にhoverしている場合のみ処理
			if (hoverflag) {
				$("#thumbblock li").each(function(i) {
					//標準positionにセット
					$(this).stop().animate({'left':position_st[i]},duration);
				});
				hoverflag = 0;
			}
		};
		//activeをチェックする
		function active_check() {
			$("#thumbblock li").each(function(i) {
				$(this).removeClass("pgr_actived");
				if (i==count) {$(this).addClass("pgr_actived");}
			});

		}

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

		//init start
		init();

	});

})(jQuery);

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


CSS

pops-slideshow-09.css


/* pops-slideshow-09.css 日本語*/

/* wrap追加 */
#pops_slideshow_wrap {
	display:block;
	position:relative;
	width:640px;
	height:260px;
	text-align:center;/*中央補正*/
	background-color:#555555;
}
#pops_slide_show {
	display:block;
	position:relative;
	width:520px;
	height:260px;
	margin: 0 auto;/*中央補正*/
	text-align:left;
	background-color:#000000;
}
#pops_slide_show #slideshow_box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:520px;
	height:260px;
	background-color:#000000;
	overflow:hidden;
}

#slideshow_box #ss_imgholder {
	display:block;
	position:absolute;
	top:0;left:0;
	width:520px;
	height:260px;
	padding:0;
	margin:0;
	border-style:none;
	background-color:#000000;
}
#slideshow_box #ss_imgholder img {
	padding:0;
	margin:0;
	border-style:none;
	text-decoration:none;
}

#slideshow_box #top_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#slideshow_box #top_base img {
	width:100%;
	height:100%;
	border-style:none;
}

#slideshow_box #ss_loading {
	display: block;
	position:absolute;
	top:0;left:0;
	border:0;
	background: url("/main/images/loading.gif") no-repeat center center;
	background-color: none;/*Safari*/
}

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

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

#thumbblock .hovered_wicks {
	background-color:#FFFFFF;
}

#thumbblock li img{
	width:100%;
	height:100%;
	border-style:none;
	filter:alpha(opacity=65);
	-moz-opacity:0.65;
	opacity:0.65;
	background-color:#000000;
}
#thumbblock .pgr_actived img{
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	background-color:#000000;
}

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


スライドショータイプのものが必要な方は

スライドショーとホリゾンタルアコーディオンと組み合わせたものを次ぎのデモページに表示します。

【DEMO】簡易SLIDESHOW-9B記事: スライドショーDEMO


画像

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

Loading画像 サムネール画像 サムネール画像 サムネール画像 サムネール画像 サムネール画像
サンプル画像、520x260

前ページに掲載しています: jQueryホリゾンタルアコーディオン3


以上です。




[ この記事のURL ]


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

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

 

ブログ記事一覧

年別アーカイブ一覧



[1]