POPSブログ

jQuery 伸縮するパネル/3

142

  Category:  jquery2012/09/06 pops 

角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」を作ってみました。IE6非対応。


jQuery 伸縮するパネル応用で「LightBox」を作る

「LightBox」に角丸陰影画像を外周に配置しても、重いだけで何ら面白みもないのですが、アイデアがなくなればこうなるのでしょう。まあ一応サンプルですから、、、。


伸縮するパネル応用で「LightBox」

IE7の伸縮のバラつきもCSSで直すことができましたので、伸縮する「LightBox」を作ってみました。

  • IE6に対応していません
  • 簡単に画像とともにスムーツ伸縮します。
  • 理解しやすい構造で、position で陰影画像の「始点」「終点」を指定しましたので陰影の重なりが出ません。
  • 当方の「iBox」と同様ですが、拠りスクリプトも簡単になっています。
  • 動作環境 IE7.8、Chrome、Firefox、Safari、Opera、但し IE9 は動作未確認(動くでショウの予測で作っている)

LightBoxのサンプル表示デモ

下の画像を「クリック」ください。拡大して表示します。(中央表示設定)




設定の変更時の状態をシミュレーションで見ることができます。

【シミュレーション】当方の記事: jQuery 伸縮するパネル4


LightBoxサンプルの簡単な説明


説明図


基本的には全体の大きさを変えれば、画像はそれに伴い伸縮します。但し画像上下にテキストなどの挿入スペースを設けますので。画像位置の変更のためアニメで調整しています。


1. 画像位置を変化させるために、画像ボックスのポジション、top bottom を変化させています。(画像読み込み前と後でのパネルレイアウトが違うため)
2. 画像読み込みが終了するまで、サムネールの大きさで表示して、拡大していきます。
4. 初期位置は、サムネール位置から、中央位置からの設定が可能です。
5. ブラウザが小さい場合は、自動で全体の大きさを調整します。
6. アニメの速度を調整可能です。
7. サムネールがない場合の代替画像を使用しますので、JSにパスを記入ください。
8. 拡大アニメが確実に実行するように、途中タイマーで遅延させています。(マシンにより途中拡大を簡略するのを防ぐ。過去に伸縮を略し大きな画面に移行する現象があった。)


HTMLの設定

「a 要素」に popslightbox クラスを与えます。「rel」を与えればタイトルとして、上方に表示します。


<a class="popslightbox" href="表示する画像URL" rel="タイトル"><img src="サムネールURL" width="320" height="150" /></a>

サムネール画像は「表示する画像」を HTML で表示寸法を変えても良い。

JS MOVE専用 (11KB)

JS先頭部分を読んでください。当方の事情によりプラグインの形式で記述しています。使用していない変数もあります。

FADEタイプを組み込んだJSもあります。共通設定のため、ここではFADE関連の設定は機能しません。


//pops-lightbox-rm.js
//11KB 日本語 MOVE専用
//POPS WEB KOUBOU

(function($){

  jQuery.fn.pops_lightbox_rm=function(o) {

	//option
	var o=$.extend({
		view_type:"move",//moveに固定
		move_speed:600,//move速度
		fade_speed:600,//fade速度未使用
		speed:1000,//画像fade速度未使用
		path:'/main/images/'
	},o || {});

	//--------------- settings ----------------
	var corner_W=20;//コーナーの大きさ
	var corner_H=20;
	var side_space_W=10;//画像の両サイドのスペース
	var top_H=42;//32以上、上部ボックス高さ
	var bottom_H=30;//20、下部ボックス高さ最低corner高さの分はとる

	//標準初期値
	var ST_all_W=140;
	var ST_all_H=100;
	var ST_image_W=100;
	var ST_image_H=60;

	var site_name="POPS WEB KOUBOU";
	var top_title="PHPTO-SHOW";
	//拡大FULLSIZE/IE7のみギザる、ほかはキレイ
	var fullsize=false;//true false
	//下部ボックスbottomboxを使用するか
	var bottombox_use="use";//use

	//追加設定
	//サムネール位置から、中央から
	var start_position="center";//image center
	//画像読み込み後の遅延時間 100-1000
	var timeout=500;
	//ダミー画像
	var center_img_url=o.path+"center_white.png";
	//var center_img_url="xxxx/images/center_white.png";

	//--------------- settings end ------------

	//変数など
	var items;//click-item
	var items_box;
	var imgholder_elm,overlay_elm,loading,topbox,bottombox,close_btn;
	var img_url;
	var imgPreloader;

	var all_W,all_H,image_W,image_H,all_pos_Y,all_pos_X;
	var win_W,win_H,resize;
	var title;

	var bottom_V=0;//移動値
	var keep_url="";
	var thumb_url="";
	//サムネールがあるか判定
	var thumb=false;

	//エレメント画像位置大きさ
	var elm_box_x = 0,elm_box_y = 0;
	var elm_box_w = 0,elm_box_h = 0;
	//初期の全体の大きさ保存
	var keep_box_W,keep_box_H;

	//bottom-box補正/corner高さの分はとる
	if (bottombox_use != 'use') {
		bottom_H=corner_H;
	}

	//新IE判定
	var browserIE = 0;//IE判定
	var browser_v = 0;//IE 6 7 8 9
	if (/*@cc_on!@*/false) {
		browserIE = 1;
		if (navigator.userAgent.match(/MSIE (\d\.\d+)/)) {browser_v = parseFloat(RegExp.$1);}
	}

	var ailoader=false;
	//IE7 8 9 はAlphaImageLoaderを処理をしている
	if (browserIE && browser_v < 10) {ailoader=true;}

	//----------- function -----------------------------
	//create-Box
	var create_base=function() {
		if ($('#pops-lightbox')) {$('#pops-lightbox').empty().remove();}

$('<div id="pops-lightbox"> \
	<div class="tl filters"></div> \
	<div class="tr filters"></div> \
	<div class="bl filters"></div> \
	<div class="br filters"></div> \
	<div id="panel-back"></div> \
	<div class="tm filters"></div> \
	<div class="bm filters"></div> \
	<div class="ml filters"></div> \
	<div class="mr filters"></div> \
	<div id="center-box" class="filters"><div id="imgwrap"><img /></div></div> \
	<div id="popslb-loading"></div> \
	<div id="top-box"><div id="top-line"></div></div><div id="bottom-box"><div id="btm-line"></div></div><div id="close-btn" title="close"></div><div id="popsl-loading"></div> \
</div>').prependTo("body");

		//jQueryオブジェクト
		items_box=$('#pops-lightbox');
		centerbox=$('#center-box');
		imgholder_elm=$('#imgwrap').css({'display':'block'});
		loading=$('#popslb-loading').css({'display':'none'});
		topbox=$('#top-box').css({'display':'none'});
		bottombox=$('#bottom-box').css({'display':'none'});
		closebtn=$('#close-btn').css({'display':'none'});

		//透過背景画像削除処理/noneで一応削除できる
		if(ailoader) {items_box.find('.filters').css('background-image','none');}

		//中央サムネール位置あわせ分岐
		if (start_position == 'image') {
			//CLICK要素のposition位置取得
			position_set();
			all_pos_Y=elm_box_y;
			all_pos_X=elm_box_x;
			all_W=elm_box_w+side_space_W*2;
			all_H=elm_box_h+corner_W*2;
		}

		//初期の大きさ設定
		//中央の場合
		if (start_position != 'image') {
			//サムネールがあるか
			if (thumb) {
				//サムネールの収まる大きさにする
				elm_box_w=items.children("img").width();
				elm_box_h=items.children("img").height();
				all_W=elm_box_w+side_space_W*2;
				all_H=elm_box_h+corner_W*2;
			}
			//サムネールがないときは標準の大きさにする
			if (!thumb) {
				//おおきさ
				elm_box_w=ST_image_W;elm_box_h=ST_image_H;
				all_W=ST_all_W;all_H=ST_all_H;
			}
			center_set();
		}


		//サムネール画像挿入
		//サムネールがあるか
		if (thumb) {
			//サムネール画像挿入
			imgholder_elm.children("img").empty().attr({src:thumb_url});
		} else {
			//ダミー画像挿入
			imgholder_elm.children("img").empty().attr({src:center_img_url});
		}

		//初期の全体の大きさ保存/終了処理に利用
		keep_box_W=all_W;
		keep_box_H=all_H;

		items_box.css({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H,'display':'block'});
		items_box.click(function() {
			reset_box();
		});
		//btn-hover
		$('#close-btn').hover(
			function() {$(this).addClass("hover");},
			function() {$(this).removeClass("hover");}
		);

	};

	//Overlay
	var showOverlay=function() {
		$('#popslb-overlay').empty().remove();
		var html_hi=Math.max(document.body.clientHeight,document.body.scrollHeight);
		html_hi=Math.max(html_hi,document.documentElement.scrollHeight);
		html_hi=Math.max(html_hi,document.documentElement.clientHeight );
		$('<div id="popslb-overlay"></div>').prependTo("body");
		overlay_elm=$('#popslb-overlay');//Object
		overlay_elm.css({'height':html_hi,'width':'100%','display':'block'});
		overlay_elm.click(function() {
			reset_box();
		});
	};

	//Preloaderによるload処理
	var imageload=function() {
		//Loading表示
		loading.css({'display':'block'});
		imgPreloader=new Image();
		imgPreloader.onload=function() {

			//画像をLOADした、Loading非表示
			loading.css({'display':'none'});
			image_W=imgPreloader.width;
			image_H=imgPreloader.height;
			resize=0;

			//遅延させる時間は変更できる
			window.setTimeout(function(){

			//拡大率設定 x5になっているが x1.5-2が良いかも知れない
			//ワイド画面だと拡大しすぎになる恐れあり
			if (fullsize) {
				standerdSize(image_W*5,image_H*5);
			} else {
				standerdSize(image_W,image_H);
			}

				//MOVEアニメに進む
				view_moveimage();

			}, timeout);

		}
		//URLを代入
		imgPreloader.src=img_url;
	};

	//パネル関係の大きさをCSSでセット/CSS確定
	var set_panelSize=function () {

		//MOVE始まりの高さ/画像高さはアニメで調整
		centerbox.css({'top':corner_H,'left':side_space_W});

	}

	//view MOVEアニメ
	var view_moveimage=function () {

		//中央
		center_set();
		//新画像挿入
		imgholder_elm.children("img").empty().attr({src:img_url});

		//bottom移動値
		bottom_V=bottom_H;
		//TOPBOXをずらすtop_H
		centerbox.animate({'top':top_H,'bottom':bottom_V},o.move_speed);
		//MOVEアニメ
		items_box.animate({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H},o.move_speed,function() {

			closebtn.css({'display':'block'});
			keep_url=img_url;
			//テキスト表示
			show_parts();
		});	
	};

	//show-partsテキスト表示
	var show_parts=function() {

		topbox.children("#top-line").text(title);
		//テキスト表示/上は必ず使用する
		topbox.css({'display':'block'});

		//下は原則使用しない/use
		if (bottombox_use=='use') {
			bottombox.children("#btm-line").text(site_name);
			bottombox.css({'height':bottom_H,'display':'block'});
		}
	}

	//reset
	var reset_box=function() {

		//アニメ停止
		items_box.stop(true);

		//残る場合あるので個別に削除
		topbox.remove();
		bottombox.remove();
		closebtn.remove();

		//最初のおおきさに縮小
		all_W=keep_box_W;
		all_H=keep_box_H;
		//パネルの位置変数
		var pos_X,pos_Y;

		//move
		//中央に戻る
		if (start_position !='image') {
			center_set();
			pos_X=all_pos_X;
			pos_Y=all_pos_Y;
		} else {
			//サムネール位置に戻る
			pos_X=elm_box_x;
			pos_Y=elm_box_y;
		}

		//中の画像 TOP BOTTOM 位置を戻す
		centerbox.animate({'top':corner_H,'bottom':corner_H},o.move_speed);
		//全体を縮小
		items_box.animate({'top':pos_Y,'left':pos_X,'width':keep_box_W,'height':keep_box_H},o.move_speed,function(){
			//全体を削除
			items_box.empty().remove();
			//overlayを削除
			overlay_elm.remove();
		});
	};

	//Size決定
	function standerdSize(ldimg_W,ldimg_H) {

		var set_W=0,set_H=0;
		var scale_v=1;

		//パネル寸法で領域を狭める
		var erea_W=win_W-side_space_W*2;
		var erea_H=win_H-(top_H+bottom_H);

		//収まる画像の大きさを是正計算
		if (erea_W < ldimg_W) {
			scale_v=erea_W/ldimg_W;
			set_W=ldimg_W=Math.round(ldimg_W*scale_v);
			set_H=ldimg_H=Math.round(ldimg_H*scale_v);
			resize=1;
		}
		if (erea_H < ldimg_H) {
			scale_v=erea_H/ldimg_H;
			set_H=Math.round(ldimg_H*scale_v);
			set_W=Math.round(ldimg_W*scale_v);
			resize=1;
		} else {
			set_W=ldimg_W;set_H=ldimg_H;
		}

		//全体の大きさを再計算
		//画像のおおきさ
		image_W=set_W;
		image_H=set_H;
		//パネルの大きさ再計算
		all_W=side_space_W*2+set_W;
		all_H=top_H+bottom_H+set_H;

	}

	//CLICK要素のpositionをもとめる
	var position_set = function () {
		
		if (thumb) {
			//サムネールがある
			var pos = items.children("img").offset();
			//サムネールのおおきさ
			elm_box_w=items.children("img").width();
			elm_box_h=items.children("img").height();
		} else {
			//サムネールがない
			var pos = items.offset();
			//おおきさ
			elm_box_w=100;
			elm_box_h=60;
		}
		elm_box_x = pos.left - (corner_W-side_space_W);
		elm_box_y = pos.top - corner_H;
	}

	//center-Set中央に位置を決定
	function center_set() {

		all_pos_X=Math.floor(($(window).width()-all_W)/2);
		all_pos_Y=Math.floor(($(window).height()-all_H)/2);
		var Scrollv=getScrollv();
		all_pos_X +=Scrollv[0];
		all_pos_Y +=Scrollv[1];
	}
	//getScroll
	function getScrollv() {

		var ls=document.body.scrollLeft || document.documentElement.scrollLeft;
		var ts=document.body.scrollTop || document.documentElement.scrollTop;
		return [ls,ts];
	}

	//----------- start -----------------------------
	return this.each(function() {

		$('.popslightbox').click(function(e) {

			items=$(this);
			img_url=items.attr('href');
			win_W=$(window).width();
			win_H=$(window).height();

			//******* 初期値のクリア、標準値を代入 ************
			all_W=ST_all_W;
			all_H=ST_all_H;
			image_W=ST_image_W;
			image_H=ST_image_H;
			thumb=false;//重要
			thumb_url="";
			//初期の全体の大きさ保存をクリア
			keep_box_W=ST_all_W;
			keep_box_H=ST_all_H;

			//baser用にクリアしないとシステムで勝手にエラーに進む
			imgPreloader=null;
			//TEXT
			title="";

			//サムネールがあるか
			if (items.children("img").height()) {
				thumb=true;
				thumb_url=items.children("img").attr('src');
			}
			//TEXT rel情報取得
			title=items.attr('rel');
			if (!title) {title=top_title;}

			//Overlay
			showOverlay();
			//create-html-box
			create_base();
			//load-image
			imageload();
			return false;
		});
	});

  };
})(jQuery);

$(function(){
	$(document).pops_lightbox_rm();
});

説明など削除すれば少しKBがへります。インデントなどなくせば少し早くなります。



ダミー画像(20x20ピクセル)の設定が面倒な場合は
var center_img_url=o.path+"center_white.png";
を
var center_img_url="xxxxx/images/center_white.png";
などと変更してください。

CSS

透過陰影画像(PNG32)の設定に注意ください。#center-boxのフイルター処理はIE7対策です。


/*pops-lightbox-rm.css 日本語*/

#pops-lightbox {
	z-index: 7000;
	display:block;
	position:absolute;
	top:0;left:0;
	width:140px;/*初期の大きさ*/
	height:100px;
	text-align:left;
	background:none;
}

/* 陰影画像 */
#pops-lightbox .tl {
	display:block;
	position:absolute;
	top:0;left:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_tl.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_tl.png',sizingMethod='scale');
}
#pops-lightbox .tr {
	display:block;
	position:absolute;
	top:0;right:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_tr.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_tr.png',sizingMethod='scale');
}
#pops-lightbox .bl {
	display:block;
	position:absolute;
	bottom:0;left:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_bl.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_bl.png',sizingMethod='scale');
}
#pops-lightbox .br {
	display:block;
	position:absolute;
	bottom:0;right:0;
	width: 20px;
	height: 20px;
	background: transparent url("/main/images/r_br.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_br.png',sizingMethod='scale');
}
#pops-lightbox .tm {
	display:block;
	position:absolute;
	top:0;left:20px;right:20px;
	width: auto;
	height: 20px;
	background: transparent url("/main/images/r_tm.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_tm.png',sizingMethod='scale');
}
#pops-lightbox .bm {
	display:block;
	position:absolute;
	bottom:0;left:20px;right:20px;
	width: auto;
	height: 20px;
	background: transparent url("/main/images/r_bm.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_bm.png',sizingMethod='scale');
}
#pops-lightbox .ml {
	display:block;
	position:absolute;
	left:0;top:20px;bottom:20px;
	width:20px;
	height:auto;
	background: transparent url("/main/images/r_ml.png") repeat-y;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_ml.png',sizingMethod='scale');
}
#pops-lightbox .mr {
	display:block;
	position:absolute;
	right:0px;top:20px;bottom:20px;
	width:20px;
	height:auto;
	background: transparent url("/main/images/r_mr.png") repeat-y;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/r_mr.png',sizingMethod='scale');
}

/* パネル中央部分 */
#pops-lightbox #panel-back {
	position:absolute;
	top:20px;bottom:20px;
	left:20px;right:20px;
	width: auto;
	height: auto;
	background-color:#FFFFFF;
}

/* 画像パネル */
#pops-lightbox #center-box {
	position:absolute;
	top:20px;bottom:20px;
	left:10px;right:10px;
	width: auto;
	height: auto;
	/*margin-bottom:20px;*/
	background: transparent url("/main/images/panel_white.png") repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/panel_white.png',sizingMethod='scale');
	overflow:hidden;
}
/* IE7 heightが伸びない HACK修正*/
#pops-lightbox #center-box #imgwrap {
*position:absolute;
*left:0;
*bottom:0;
	width: auto;
	height: 100%;
	background-color:#000000;
}
#imgwrap img {
	width: 100%;
	height: 100%;
	vertical-align:bottom;
	border-style:none;
}

/* パネル上層部分 */
#pops-lightbox #panel-topbox {
	display:block;
	position:absolute;
	top:0;left:0;
	width:100%;
	height:100%;
	background-color:none;
	overflow:hidden;
}
/* close-btn */
/*gif背景画像の場合 close20.gif png*/
#pops-lightbox #close-btn {
	display; block;
	position: absolute;
	top:7px;right:15px;
	width: 25px;
	height: 25px;
	background:url("/main/images/close20.gif") no-repeat;
	background-position:0 0;
	cursor:pointer;
	overflow:hidden;
}
#pops-lightbox #close-btn.hover {
	background-position:0 -25px;
}

#pops-lightbox #popslb-loading {
	display:block;
	position: absolute;
top:0;left:0;
	width: 100%;
	height: 100%;
	background:url("/main/images/loading.gif") no-repeat center center;
	background-color:none;/*Safari*/
}
/*TEXT*/
#pops-lightbox #top-box {
	display: block;
	position: absolute;
	top:20px;left:20px;right:60px;
	width: auto;
	height: 20px;
	background-color:none;
	overflow:hidden;
}
#pops-lightbox #top-box #top-line{
	text-align:left;
	width:auto;
	height:14px;
	font-size: 12px;
	font-weight: bold;/*normal*/
	padding: 0;
	color: #AAAAAA;
	overflow:hidden;
}
#pops-lightbox #bottom-box {
	display: block;
	position: absolute;
	bottom: 5px;left:20px;right:20px;
	width: auto;
	height: 20px;
	background-color:none;
	overflow:hidden;
}
#pops-lightbox #bottom-box #btm-line{
	text-align:center;
	font-size: 10px;
	font-weight: bold;/*normal*/
	margin-top:8px;
	color: #CCCCCC;
	overflow:hidden;
}

#popslb-overlay {
z-index:6990;
position:absolute;
top:0;left:0;
width:100%;height:1px;
background-color:#000000;
opacity:0.5;filter:alpha(opacity=50);
}

CSSが重い場合は、スペースなどを削除すれば少し軽くなります。多少読みづらくなりますが。


背景画像での標準的な「AlphaImageLoaderフィルター」処理記述例

background と filter でのURLの記述が違う。判らない場合は「絶対パス」を記述する。その後背景画像を削除する。


.xxxxxx {
	background: transparent url("../images/xxx.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/xxx.png',sizingMethod='scale');
	background-image:none;
}

背景画像の上に「処理された画像」が作られるつまり2重になる。削除しないと濃くなるし、フエードさせた時「本来の背景画像」が真っ黒になるので注意。
これでは、IEでは何のための「透過画像PNG32」対応かわからない。大変面倒なことだ。


使用パーツ画像

  
陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 陰影画像 画像パネル背景 img初期画像Loding画像

「画像パネル背景」は写真画像横幅を広げているためおきるIE7のバグ対策用のPNG32画像です。
「img初期画像」は表示すべき写真画像がロードされるまでの間、「imgタグ」の中に収容する画像です。(画像無しのマークが表示されるのを防ぐ、画像高さを与える役目をします)


【参考】当方の記事: jQuery 伸縮するパネル4 シミュレーション

【参考】当方の記事: jQuery 伸縮するパネル2


以上です。


[ この記事のURL ]


タグ:series , memo , photo , LightBox , jquery

[ jQuery 伸縮するパネル シリーズ記事 ]

jQuery 伸縮するパネル/72012.10.10
jQuery 伸縮するパネル/62012.09.07
jQuery 伸縮するパネル/52012.09.07
jQuery 伸縮するパネル/42012.09.06
jQuery 伸縮するパネル/32012.09.06
jQuery 伸縮するパネル/22012.09.02
jQuery 伸縮するパネル/12012.09.02

 

ブログ記事一覧

年別アーカイブ一覧



[1]