POPSブログ

jQuery 単純簡易 LightBox CSS3角丸陰影、HTML5専用タイプB

227

  Category:  jquery2013/06/05 pops 

jQueryで作った「LightBox」であるが、CSS3による角丸陰影形式で「HTML5専用」タイプに仕上げてみた。前ページのJSと違い、上下にテキストなしの単純簡易な形式で、ありふれた簡単な構造ですからCSSも簡略されています。画面一杯に拡大したサイズでの表示が可能です。
原則「IE7.8」には対応しません。2.0系のjquery-2.0.1.min.jsでのテストです。

 

jQuery 単純簡易 LightBox CSS3角丸陰影、HTML5専用タイプB


LightBoxをフルサイズ表示します。読み込む画像の大きさで見栄えは違ってくるのは当然です。サンプルで確認できます。「IE」を考慮しないで作れることが最大のメリットだと思います。

注意、これは、HTML5専用タイプであり、jQueryも2.0系に限定していますので、モダンブラウザでのみ動作表示します。[IE 7 8]には対応していません。

 

DEMO


jQuery 単純簡易 LightBox CSS3角丸陰影、HTML5専用タイプのデモ表示。(lightbox-h5b.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。


Chrome Firefox Safari IE9、で動作確認済み。 (IE10は未確認)


簡単な説明


簡単な説明など


[説明図]


 

jQueryで作ったHTML5専用タイプ「LightBox」である。「IE7.8」には対応しないので制作時間がスコブル短く出来る。今まで「IE6 7.8」がどれだけ効率悪くして来たか計り知れない。これだけでも爽快である。


1. HTML5専用ですから「モダンブラウザ」でのみで動作表示します。「IE7.8」には対応しません。(原則、jQuery2.0系、特別なメソッドを使用していませんからjquery-1.9系でも可動します)
2. タイトルは表示しません。構造が単純でCSSも簡単です。
3. 角丸陰影はCSS3で処理します。パネルの色はボーダー色です。陰影ボーダーはパネル原点の外側に作られるために、ブラウザとの空白スペースは2倍設定します。
4. クローズボタンをボーダーに重ねると、パネル伸縮時ボタンが欠けることが有ります。CSSの特性ですから防止できません。伸縮が完了すれば元の状態にもどります。
5. 画像を取得出来ない場合は「Loading画像」を「クリック」すれば終了します。
(クローズボタン、オーバーレー、画像、Loading画像に、クリック終了が処理されている例が多い)
6. 簡単に作れますが、ボタン類が画像領域に入ってしまうのが欠点です。
7. 後、2年もすれば「HTML5」サイトがかなり増えると思いますのでそれに向けたテストです。


LightBoxの設定、変更などの簡単な説明


● 現在 lightbox-h クラスに click アクション設定

都合の良い、クラス名に変更可能です。(JS末尾付近)


	return this.each(function() {

		$('.lightbox-h').click(function(e) {

			詳細略す
		});

	});

● JSの実行。注意、現在JSの最後に付加しています。分離可能。


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

● JSの実行時の変数受け渡し。スピード変更可能。これのみだから余り必要ない。


$(function(){
	$(document).lightbox_h({
		speed:1000
	});
});

● 画像拡大のために、ダミー画像が1枚必要になります(この構造ではなくとも良い)。

最初にHTML構造を作った時に、画像がないので「画像なしのマーク」が表示されるのを防止するためです(ブラウザにより違いあり)。気にならない方は省略されても良い。
ダミー画像は、透明、白色、黒色の3種あります。色は何でも良い。(ページ末尾にサンプル画像を掲載)


//ダミー画像
//var center_img_url=o.path+"center_alpha.png";
//var center_img_url=o.path+"center_white.png";
var center_img_url=o.path+"center_black.png";

--------------------------------------------------
直接画像までのパス、画像名を記載しても良い

var center_img_url="パス、画像名";

--------------------------------------------------
使用しない場合は
var center_img_url="";

● ボタンの欠けをゴマカス

ボタンをボーダーに重ねますと欠けますから見た目が悪い、スケール変更の場合一旦非表示にして、終了後表示させれば良い。(少し見た目が良くなる、他の処理部分でボタンは拡大終了後に表示する)

原則、ボタンをボーダーに重ねない考えで作っています。


	//scaleup-anime
	var scaleup=function(scl_v) {

		$('#close-btn').css({'display':'none'});

		略す

		//anime
		items_box.animate..............
			//
			$('#close-btn').css({'display':'block'});
		});

	}

● ウィンドウのスペース

ウィンドウとパネルの間にスペースを入れていますが。原点の関係で、ボーダーを使用する場合は約2倍のスペース値を設定下さい。ボーダーを使用しない場合は適正な値。XY方向とも同じ幅になります。

ボーダーを使用しない場合は、CSS3の角丸処理であるCSS設定 border-radius 関連を削除または修正下さい。(原則ボーダーを使用の場合のみ角丸処理をする)


ウィンドウのスペース、5ほしい所だが10を設定

var win_margin=10;

● 原点と仮想原点

全体を中央あわせに配置する場合にパネル幅など計算しますが、ボーダーを使用した場合でも原点位置は同じになりますので修正しています。
そのために、ボーダーを使用の時は borderUse=true に設定してください。但しボーダーなどはCSSで変更します。


ボーダーを使用の時は
var borderUse=true;

中央補正のポジションを計算
スペースの半分の値を左にずらしている

function center_set() {
	略す

	//ボーダーを使用する場合のポジション補正
	if (borderUse) {
			all_pos_X -=win_margin/2;
			all_pos_Y -=win_margin/2;
	}
}

● 画像をDIV要素(#center-box)の中に収納しています。

必ずしもDIVでラップしなくとも良いのですが、画像のエフェクトの種類によってはラップしている方が都合が良いための処置です。(拡張するに都合が良いように配慮しておく)
ボタンなど色々な部材も配置していますので、重なり順を一定に保つ役割をも持っています。


<div id="center-box"><img /></div>

設定などはJS先頭を参照下さい。


HTML JS CSS


HTML (HTML5)

サムネールがある場合、src は href と同じでも良い、小さなサムネールを作っても良い。自由です。

src が href と同じ場合はロード済みですから直ぐに画像が表示されます。


<a class="lightbox-h" href="photo.jpg" title="PHOTO"><img src="photo.jpg" width="128" height="64" /></a>

サムネールが無い場合、画像がロードされるまでは、JS登録の大きさでパネル表示します。

画像を取得出来ない、又は画像以外にリンクを貼った場合はLoadingが永久に回り続けます。(クリックで終了)


<a class="lightbox-h" href="photo.jpg" title="PHOTO">リンク名</a></p>

1. 拡大する画像の「a要素」に lightbox-h クラスを与える。画像専用です。
2. ボーダー幅、色などはCSSを変更下さい。縦横とも同じ幅になります。
3. 通常はサムネールを用意します。サムネールが無くとも使用可能です。href は必ず画像を指定のこと。
4. 画像表示後に画像のスケールを変更できます、但しブラウザ画面の大きさにより表示サイズは異なります。
5. 画像に終了のアクションを設定可能です。初期状態では設定していません。
6. 上の例では title を挿入していますが、lightbox には反映されません。
7. 詳細はJS先頭部分を読んでください。


JS

lightbox-h5b.js、JS名は任意に変更可。

JSの最後に、実行命令を書いていますので注意ください。


//日本語
//lightbox-h5b
//

(function($){

  jQuery.fn.lightbox_h=function(o) {

	//option
	var o=$.extend({
		speed:600,		//move速度
		path:'/main/images/'
	},o || {});

	//--------------- settings ----------------

	//ウィンドウのスペース
	var win_margin=10;

	//ボーダーを使用する、ポジション補正/ true false
	//幅色はCSSで変更のこと
	var borderUse=true;

	//クローズボタンの使用 true false
	var closebtnUse=true;
	//画像にボタン機能を付加/ボタン非表示可能 true false
	var imgbtnUse=false;

	//ダミー画像
	//var center_img_url=o.path+"center_white.png";
	var center_img_url=o.path+"center_black.png";

	//標準初期値
	//画像の大きさ/最低50x30
	var ST_image_W=100;
	var ST_image_H=60;

	//拡大ボタンの表示 use
	var scaleup_use="use";//use

	//画像読み込み後の遅延時間 100-1000
	var timeout=500;
	//overlay使用 use
	var overlay_use="use";//use

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

	var items;//click-item
	var items_box;
	var imgholder_elm,overlay_elm,loading,partsbase,closebtn,scaleupbtn,scaledownbtn,scalefullbtn;
	var img_url;
	var imgPreloader;

	var all_W,all_H,image_W,image_H,all_pos_Y,all_pos_X;
	var clientW,clientH,resize;

	//LOAD画像サイズ
	var load_imageW=0;
	var load_imageH=0;
	//画像をロードしたか
	var loadingflag=false;

	var bottom_v=0,keep_url="",thumb_url="",thumb=false;

	//最初の大きさ保存
	var keep_box_W,keep_box_H;

	//browser大きさ
	var browserW;
	var browserH;

	//lightboxが作られた
	var lightboxOn=false;

	//----------- function -----------------------------

	//create-Box
	var create_base=function() {

$('<div id="lightbox-h"> \
	<div id="center-box"><img /></div> \
	<div id="parts-base"> \
		<div id="close-btn" title="close"></div><div id="scalefull" title="FULL"></div><div id="scaledown" title="100%"></div><div id="scaleup" title="120%"></div> \
	</div> \
	<div id="popslb-loading"></div> \
</div>').prependTo("body");

		//jQuery-object
		items_box=$('#lightbox-h');
		imgholder_elm=$('#center-box').css({'display':'block'});
		loading=$('#popslb-loading').css({'display':'none'});
		partsbase=$('#parts-base').css({'display':'none'});
		closebtn=$('#close-btn').css({'display':'none'});
		scaleupbtn=$('#scaleup').css({'display':'none'});
		scaledownbtn=$('#scaledown').css({'display':'none'});
		scalefullbtn=$('#scalefull').css({'display':'none'});
		
		//
		imgholder_elm.children("img").attr({src:center_img_url});

		if (closebtnUse) {
			//btn-hover
			$('#close-btn').hover(
				function() {$(this).addClass("hover");},
				function() {$(this).removeClass("hover");}
			);
			//end
			$('#close-btn').click(function() {
				reset_box();
			});
		}

		//loading-action
		$('#popslb-loading').click(function() {
			reset_box();
			return false;
		});

		//scaleup_use
		if (scaleup_use == 'use') {

			$('#scalefull').click(function() {
				scaleup(10);
				return false;
			});
			$('#scaledown').click(function() {
				scaleup(1);
				return false;
			});
			$('#scaleup').click(function() {
				scaleup(1.2);
				return false;
			});
		}
		//ボタン機能
		if (imgbtnUse) {
			$('#center-box').click(function() {
				reset_box();
			});
		}

	};

	//Overlay
	var showOverlay=function() {
		$('#lightbox-overlay').empty().remove();
		$('<div id="lightbox-overlay"></div>').prependTo("body");
		overlay_elm=$('#lightbox-overlay');//Object
		//レーヤー補正
		set_clientSize();
		$('#lightbox-overlay').css({'width':clientW,'height':clientH});
		//action
		overlay_elm.click(function() {
			reset_box();
		});
	};

	//Preloader-load
	var imageload=function() {

		//Loading
		loading.css({'display':'block'});
		imgPreloader=new Image();
		imgPreloader.onload=function() {

			//画像をロードしたか
			loadingflag=true;

			loading.css({'display':'none'});
			image_W=imgPreloader.width;
			image_H=imgPreloader.height;
			resize=0;

			//LOAD画像サイズ/サイズ変更のため保存
			load_imageW=image_W;
			load_imageH=image_H;

			window.setTimeout(function(){

				//サムネールなし
				if (!thumb) {
					//20%サムネールを作る大きさ補正
					thumbSize(image_W,image_H);
					center_set();
					items_box.css({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H});
				}
				standerdSize(image_W,image_H);
				//MOVE
				view_moveimage();

			}, timeout);

		}
		//URL-SET
		imgPreloader.src=img_url;
	};

	//view-MOVE
	var view_moveimage=function () {

		center_set();

		imgholder_elm.children("img").empty().attr({src:img_url});

		//anime
		items_box.animate({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H},o.speed,function() {
			keep_url=img_url;
			show_parts();
		});	
	};

	//show-parts
	var show_parts=function() {

		if (closebtnUse) {
			closebtn.css({'display':'block'});
		}
		partsbase.css({'display':'block'});
		//
		if (scaleup_use == 'use') {
			scaleupbtn.css({'display':'block'});
			scaledownbtn.css({'display':'block'});
			scalefullbtn.css({'display':'block'});
		}

	}

	//reset
	var reset_box=function() {

		//stop
		items_box.stop(true);

		loading.css({'display':'none'});
		partsbase.css({'display':'none'});

		var pos_X,pos_Y;
		
		all_W=keep_box_W;
		all_H=keep_box_H;

		var end_opacity=0;
		var speed_v=o.speed;

		//画像をロードしない場合はアニメ簡略/一瞬で終わる
		if (!loadingflag) {
			end_opacity=1;
			speed_v=10;
		}

		center_set();

		pos_X=all_pos_X;
		pos_Y=all_pos_Y;
		//image
		items_box.animate({'top':pos_Y,'left':pos_X,'width':keep_box_W,'height':keep_box_H,'opacity':end_opacity},speed_v,function(){
			items_box.empty().remove();
			//overlay
			if (overlay_use == 'use') {
				overlay_elm.remove();
			}
			//lightboxが作られた
			lightboxOn=false;

		});

	};

	//Size
	function standerdSize(ldimg_W,ldimg_H) {

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

		var erea_W=clientW-win_margin*2;
		var erea_H=clientH-win_margin*2;

		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;
		}

		all_W=image_W=set_W;
		all_H=image_H=set_H;

	}

	//thumb-Size
	function thumbSize(img_W,img_H) {

		var ratio=1;
		if (img_W >= img_H) {ratio=100/img_W;}
		if (img_W < img_H) {ratio=100/img_H;}
		all_W=keep_box_W=Math.round(img_W*ratio);
		all_H=keep_box_H=Math.round(img_H*ratio);
	}

	//start-position
	var start_positionSet = function () {
		//全て中央、画像位置からはなし
		center_set();
		items_box.css({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H});
	}

	//scaleup-anime
	var scaleup=function(scl_v) {

		//$('#close-btn').css({'display':'none'});

		set_clientSize();

		//SIZE scl_v
		//LOAD画像サイズを使用するload_imageW load_imageH
		standerdSize(load_imageW*scl_v,load_imageH*scl_v);

		resize=0;
		center_set();
		//anime
		items_box.animate({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H},600,function() {
			//
			//$('#close-btn').css({'display':'block'});
		});

	}

	//windowがリサイズされた、$('#...')で実行
	window.onresize=function(event){

		//lightboxが作られた
		if (lightboxOn) {
			//Overlay
			if (overlay_use == 'use') {
				//レーヤー補正
				set_clientSize();
				$('#lightbox-overlay').css({'width':clientW,'height':clientH});
			}
			//画像中央補正
			center_set();
			$('#lightbox-h').css({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H});
		}
	}

	//center-Set/ボーダーを使用する場合の修正あり
	function center_set() {
		set_clientSize();
		all_pos_X=Math.floor((clientW-all_W)/2);
		all_pos_Y=Math.floor((clientH-all_H)/2);
		var Scrollv=getScrollv();
		all_pos_X +=Scrollv[0];
		all_pos_Y +=Scrollv[1];

		//ボーダーを使用する場合のポジション補正
		if (borderUse) {
			all_pos_X -=win_margin/2;
			all_pos_Y -=win_margin/2;
		}
	}
	//getScroll
	function getScrollv() {

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

	//browserSize
	function set_browserSize(){

		browserW=window.outerWidth;
		browserH=window.outerHeight;
	}
	//clientSize
	function set_clientSize(){

		//javascript表示エリアdocumentElement
		clientW=window.document.documentElement.clientWidth;
		clientH=window.document.documentElement.clientHeight;
	}

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

		$('.lightbox-h').click(function(e) {

			//lightboxが作られた
			lightboxOn=false;

			items=$(this);
			img_url=items.attr('href');//href取得

			set_clientSize();
			imgPreloader=null;//for cms

			if (items.children("img").height()) {
				thumb=true;
				thumb_url=items.children("img").attr('src');
				image_W=items.children("img").width();
				image_H=items.children("img").height();
				all_W=keep_box_W=image_W;
				all_H=keep_box_H=image_H;
			} else {
				thumb=false;
				thumb_url="";
				image_W=ST_image_W;
				image_H=ST_image_H;
				all_W=keep_box_W=image_W;
				all_H=keep_box_H=image_H;
			}


			//Overlay
			if (overlay_use == 'use') {
				showOverlay();
			}
			//create-html-box
			create_base();

			//lightboxが作られた
			lightboxOn=true;

			//スタート位置
			all_W=image_W;
			all_H=image_H;
			start_positionSet();

			//サムネール画像挿入
			if (thumb) {
				imgholder_elm.children("img").empty().attr({src:thumb_url});
			}

			//画像をロードしたか
			loadingflag=false;
			//画像をロード
			imageload();

			return false;
		});

	});

  };
})(jQuery);

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

注釈文を削除すれば、幾分早くなります。


CSS

lightbox-h5b.css、CSS名は任意に変更可。


/*日本語 lightbox-h5b.css*/

#lightbox-overlay {
z-index:7000;
position:fixed;
top:0;left:0;
width:100%;
height:100%;
background-color:#000000;
opacity:0.4;
}

#lightbox-h {
z-index:7777;
display:block;
position:absolute;
top:0;left:0;
width:110px;/*初期の大きさ*/
height:90px;
text-align:left;
border:#FFFFFF 5px solid;
background:#000000;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow: 0 0 6px #555;
-moz-box-shadow: 0 0 8px #555;
-webkit-box-shadow: 0 0 8px #555;
}

/* 画像パネル */
#lightbox-h #center-box {
display:block;
width:auto;
height:100%;/*重要*/
background:transparent;
overflow:hidden;
}

#center-box img {
width:100%;
height:100%;
}

#lightbox-h #parts-base {
display;block;
width:100%;
height:100%;
background:transparent;
overflow:hidden;
}
/* scaleup-btn*/
#lightbox-h #scaleup {
display;block;
position:absolute;
bottom:4px;right:7px;
width:11px;
height:11px;
background:url("/main/images/scaleup.gif") no-repeat;
cursor:pointer;
}
/* scaledown-btn*/
#lightbox-h #scaledown {
display;block;
position:absolute;
bottom:4px;right:20px;
width:11px;
height:11px;
background:url("/main/images/scaledown.gif") no-repeat;
cursor:pointer;
}
/* scalefull-btn*/
#lightbox-h #scalefull {
display;block;
position:absolute;
bottom:4px;right:33px;
width:21px;
height:11px;
background:url("/main/images/scalefull.gif") no-repeat;
cursor:pointer;
}

/* close-btn */
#lightbox-h #close-btn {
display;block;
position:absolute;
top:-2px;right:2px;
width:25px;
height:25px;
background:url("/main/images/close25_alpha.png") no-repeat;
background-position:0 0;
cursor:pointer;
overflow:hidden;
}

#lightbox-h #close-btn.hover {
background-position:0 -25px;
}

#lightbox-h #popslb-loading {
display:block;
position: absolute;
top:0;left:0;
width:100%;
height:100%;
background:url("/main/images/loading24black.gif") no-repeat center center;
background-color:none;/*Safari*/
}

当方のサンプルの例です。使用する場合は使用者の画像パスに変更下さい。


loadingのCSSは少し変ではないか?

Safariのバージョンにもよりますが、loadingを非表示にしても、loadingのアクションが有効になる事態が発生し(4年ほど前)、下記CSSで防ぐ事が出来ました。(究極のイイカゲンだ)
実際、background-color には none は有りません。現在では考慮の必要は無いと思います。(これで直ったのも摩訶不思議、他のブラウザに影響は無い)


background-color:none;/*Safari*/

[IE 7 8]に対応の場合

現時点でさえ[IE 7 8]は排除されることが多く、NETの閲覧は困難になりつつあります。[IE 7 8]に対応する事自体無意味であると考察しますが、、一応書いておきます。

jqueryは1.9系を使用する事になります。HTML5上で作動させるには html5.js も必要になります。CSSの変更はいりません。但し[IE6]は対象外になります。


[IE 7 8]は上記の条件で、DEMOページで動作確認しました。


使用パーツ画像

透明 黒色 白色 はダミー画像です。Loading画像は小さければ何でも使える。

クローズ クローズ クローズ クローズ 透明 黒色 白色 Loding Loding Loding スケール スケール スケール

当方の関連記事など

同じ伸縮するパネルですが、タイトルを挿入できる。構造が複雑です。

【参照】当方の記事: jQuery 簡易 LightBox CSS3角丸陰影、HTML5専用タイプ


何年も待ち続けた「IE6.7.8」の無い「幸せな世界」です!、以上です。

 


[ この記事のURL ]


タグ:jquery , LightBox , html5 , photo

 

ブログ記事一覧



[1]