POPSブログ

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

226

  Category:  jquery2013/06/03 pops 

jQueryで作った「LightBox」であるが、CSS3による角丸陰影形式で「HTML5専用」タイプに仕上げてみた。CreateJSでの「LightBox」と比較する意味もある。当方の「LightBox」はパネルの殆んどが角丸陰影で出来ており、上下にテキストのスペースを持ち画像と共にパネルが拡大するのが特徴です。
2.0系のjquery-2.0.1.min.jsでのテストです。

 

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


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

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

 

DEMO


jQuery 簡易 LightBox CSS3角丸陰影、HTML5専用タイプのデモ表示。(lightbox-h5.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は長めです。(簡単なCSSタイプは次回)
3. 角丸陰影はCSS3で処理します。パネルの色を指定可能です。
4. 画像を取得出来ない場合は「Loading画像」を「クリック」すれば終了します。
(クローズボタン、オーバーレー、画像、Loading画像に、クリック終了が処理されている例が多い)
5. 後、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,
		panel_color:"#000000"
	});
});

● 画像拡大のために、ダミー画像が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="";

設定などは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. titleが有ればパネルの上部に表示されます。色などはCSSを変更下さい。
3. 通常はサムネールを用意します。サムネールが無くとも使用可能です。href は必ず画像を指定のこと。
4. 画像表示後に画像のスケールを変更できます、但しブラウザ画面の大きさにより表示サイズは異なります。
5. 画像に終了のアクションを設定可能です。初期状態では設定していません。
6. 詳細はJS先頭部分を読んでください。
7. 改造などは全て断り無く自由です。


JS

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

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


//日本語
//lightbox-h5
//

(function($){

  jQuery.fn.lightbox_h=function(o) {

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

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

	//コーナー仮想的にあるものとして計算
	var corner_W=10;//
	var corner_H=10;//実際には高さ計算に使用、

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

	var side_space_W=2;//画像の両サイドのスペース
	var top_H=24;//24以上、上部ボックス高さ
	var bottom_H=20;//20、下部ボックス高さ最低corner高さの分はとる

	//画像にボタン機能を付加/ボタン非表示可能 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;

	//サイト名など
	var site_name="POPS WEB KOUBOU";
	//標準タイトル
	var top_title="PHOTO-SHOW";

	//下部ボックスbottomboxを使用するか
	var bottombox_use="use";//use

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

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

	//パネル色指定
	var panel_color=o.panel_color;

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

	var items;//click-item
	var items_box;
	var imgholder_elm,overlay_elm,loading,partsbase,topbox,bottombox,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;
	var title;

	var bottom_v=0,keep_url="",thumb_url="",thumb=false;
	var titles=[];

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

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

	if (bottombox_use != 'use') {
		bottom_H=corner_H;
	}

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

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

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

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

$('<div id="lightbox-h"> \
	<div class="tl back-parts"></div> \
	<div class="tr back-parts"></div> \
	<div class="bl back-parts"></div> \
	<div class="br back-parts"></div> \
	<div id="panel-back" class="back-parts"></div> \
	<div class="tm back-parts"></div> \
	<div class="bm back-parts"></div> \
	<div class="ml back-parts"></div> \
	<div class="mr back-parts"></div> \
	<div id="center-box"><div id="imgwrap"><img /></div></div> \
	<div id="parts-base"> \
		<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="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');
		centerbox=$('#center-box');
		imgholder_elm=$('#imgwrap').css({'display':'block'});
		loading=$('#popslb-loading').css({'display':'none'});
		partsbase=$('#parts-base').css({'display':'none'});
		topbox=$('#top-box').css({'display':'none'});
		bottombox=$('#bottom-box').css({'display':'none'});
		closebtn=$('#close-btn').css({'display':'none'});
		scaleupbtn=$('#scaleup').css({'display':'none'});
		scaledownbtn=$('#scaledown').css({'display':'none'});
		scalefullbtn=$('#scalefull').css({'display':'none'});
		
		//panel-color
		$('.back-parts').css({'background-color':panel_color});
		//
		imgholder_elm.children("img").attr({src:center_img_url});

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

		$('#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});

		bottom_v=bottom_H;
		centerbox.animate({'top':top_H,'bottom':bottom_v},o.speed);
		//anime
		items_box.animate({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H},o.speed,function() {

			closebtn.css({'display':'block'});
			keep_url=img_url;
			show_parts();
		});	
	};

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

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

		//title
		topbox.children("#top-line").text(title);
		topbox.css({'display':'block'});

		if (bottombox_use == 'use') {
			bottombox.children("#btm-line").text(site_name);
			bottombox.css({'height':bottom_H,'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
		centerbox.animate({'top':corner_H,'bottom':corner_H},speed_v);
		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-side_space_W*2-win_margin*2;
		var erea_H=clientH-(top_H+bottom_H)-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;
		}

		image_W=set_W;
		image_H=set_H;
		all_W=side_space_W*2+set_W;
		all_H=top_H+bottom_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)+side_space_W*2;
		all_H=keep_box_H=Math.round(img_H*ratio)+corner_H*2;
	}

	//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) {

		set_clientSize();

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

		resize=0;
		center_set();
		bottom_=bottom_H;
		centerbox.animate({'top':top_H,'bottom':bottom_v},600);
		//anime
		items_box.animate({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H},600,function() {
			//
		});

	}

	//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];
	}
	//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+side_space_W*2;
				all_H=keep_box_H=image_H+corner_H*2;
			} else {
				thumb=false;
				thumb_url="";
				image_W=ST_image_W;
				image_H=ST_image_H;
				all_W=keep_box_W=side_space_W*2;
				all_H=keep_box_H=corner_H*2;
			}

			//
			title=items.attr('title');
			if (!title) {title=top_title;}

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

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

			//スタート位置
			all_W=image_W+side_space_W*2;
			all_H=image_H+corner_H*2;
			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-h5.css、CSS名は任意に変更可、注意、[IE 7 8]非対応。


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

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

#lightbox-h {
z-index:7777;
display:block;
position:absolute;
top:0;left:0;
width:110px;/*初期の大きさ*/
height:90px;
text-align:left;
background:none;
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;
}

/* corner */
#lightbox-h .tl {
display:block;
position:absolute;
top:0;left:0;
width:10px;
height:10px;
background-color:#FFFFFF;
border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
#lightbox-h .tr {
display:block;
position:absolute;
top:0;right:0;
width:10px;
height:10px;
background-color:#FFFFFF;
border-top-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
#lightbox-h .bl {
display:block;
position:absolute;
bottom:0;left:0;
width:10px;
height:10px;
background-color:#FFFFFF;
border-bottom-left-radius:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
}
#lightbox-h .br {
display:block;
position:absolute;
bottom:0;right:0;
width:10px;
height:10px;
background-color:#FFFFFF;
border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
}
/* box */
#lightbox-h .tm {
display:block;
position:absolute;
top:0;left:10px;right:10px;
width:auto;
height:10px;
background-color:#FFFFFF;
}
#lightbox-h .bm {
display:block;
position:absolute;
bottom:0;left:10px;right:10px;
width:auto;
height:10px;
background-color:#FFFFFF;
}
#lightbox-h .ml {
display:block;
position:absolute;
left:0;top:10px;bottom:10px;
width:10px;
height:auto;
background-color:#FFFFFF;
}
#lightbox-h .mr {
display:block;
position:absolute;
right:0px;top:10px;bottom:10px;
width:10px;
height:auto;
background-color:#FFFFFF;
}

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

/* 画像パネル */
#lightbox-h #center-box {
position:absolute;
top:10px;bottom:10px;
left:2px;right:2px;
width:auto;
height:auto;
background:transparent;
overflow:hidden;
}

#lightbox-h #parts-base {
display:block;
width:100%;
height:100%;
}

#center-box2 {
display:block;
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background-color:transparent;
}

#lightbox-h #center-box #imgwrap {
/*position:absolute;
top:0;left:0;*/
width:auto;
height:100%;
background-color:#000000;
}
#imgwrap img {
width:100%;
height:100%;
}

/* パネル上層部分 */
#lightbox-h #panel-topbox {
display:block;
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background-color:none;
overflow:hidden;
}

/* scaleup-btn*/
#lightbox-h #scaleup {
display;block;
position:absolute;
bottom:2px;right:2px;
width:11px;
height:11px;
background:url("/main/images/scaleup.gif") no-repeat;
cursor:pointer;
}
/* scaledown-btn*/
#lightbox-h #scaledown {
display;block;
position:absolute;
bottom:2px;right:15px;
width:11px;
height:11px;
background:url("/main/images/scaledown.gif") no-repeat;
cursor:pointer;
}
/* scalefull-btn*/
#lightbox-h #scalefull {
display;block;
position:absolute;
bottom:2px;right:28px;
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:1px;right:5px;
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*/
}

/*TEXT*/
#lightbox-h #top-box {
display: block;
position: absolute;
top:2px;left:12px;right:45px;
width: auto;
height: 34px;
overflow:hidden;
}

#lightbox-h #top-box #top-line{
text-align:left;
width:auto;
height:14px;
font-size: 12px;
font-weight: bold;/*normal*/
margin-left:5px;
padding: 0;
color: #AAAAAA;
overflow:hidden;
}

/* subtitle */
#lightbox-h #top-box #subtitle {
position: absolute;
top:16px;
text-align:left;
width:auto;
margin-left:10px;
height:12px;
font-size:10px;
color: #CCCCCC;
overflow:hidden;
}

#lightbox-h #bottom-box {
display: block;
position: absolute;
bottom: 5px;left:10px;right:10px;
width: auto;
height: 20px;
background-color:none;
overflow:hidden;
}
#lightbox-h #bottom-box #btm-line{
text-align:center;
font-size: 10px;
font-weight: bold;/*normal*/
margin-top:8px;
color: #CCCCCC;
overflow:hidden;
}

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

注意、[IE 7 8]に対応させるには若干CSSの変更が必要になります。角丸陰影処理はCSS3で行っていますので、当然陰影はつきません。
jqueryは1.9系を使用する事になります。HTML5上で作動させるには html5.js も必要になります。但し[IE6]は対象外になります。


[IE 7 8]に対応のCSS変更例

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


IE7で 画像の高さが伸びないので、画像ラップの原点をボトムにして上に伸びるようにしている。


/* IE7 heightが伸びない HACK修正*/
#lightbox-h #center-box #imgwrap {
*position:absolute;
top:0;left:0;
*left:0;
*bottom:0;
width:auto;
height:100%;
background-color:#000000;
}
#imgwrap img {
width:100%;
height:100%;
vertical-align:bottom;
border-style:none;
}

[IE 7 8]は上記の条件で、DEMOページで動作確認しました。但しレーヤー配置でレーヤー切れなど発生する場合があるかも知れません。使用上はあまり影響はないはずです。


使用パーツ画像

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

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

当方の関連記事など

伸縮するパネルに関しては当方のシリーズ記事を参照ください。(透過角丸陰影画像使用の記事が多い)

【参照】当方の記事: jQuery 伸縮するパネル1 (シリーズ1-6)

上記と同じ形式で、CSS3角丸陰影処理のPOPS-iBox(lightbox)シリーズ POPS-iBox-3i が有ります。テスト制作ですが、通常のhtml対応です。

【参照】当方の記事: POPS-iBox (CSS3による陰影形式 POPS-iBox-3i、最後のほうにあります)


1年後には、POPS-iBox(lightbox)シリーズも全部「CSS3角丸陰影処理、HTML5専用タイプ」に変更予定です。


次回はモット単純にしたものを掲載します。
以上です。

 


[ この記事のURL ]


タグ:jquery , LightBox , html5 , photo

 

ブログ記事一覧

年別アーカイブ一覧



[1]