POPSブログ

jQuery 伸縮するパネル/7

151

  Category:  jquery2012/10/10 pops 

前記の「伸縮するパネル」シリーズ「LightBox」JSを改造し、CSS3形式での角丸陰影処理をしました。CSS3対応のブラウザのみ機能します。なおIE7.8は角丸陰影処理出来ません。(IE6非対応)。


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

「POPS-iBOX」pops-ibox-3i (CSS3) と「LightBox」との中間のような構成です。一応簡単な作りになっています。「名前だけ変更したのでは」と言われればそのとおりである。


テストサンプルとスクリプト


CSS3 対応ブラウザのみ対象、Chrome推奨。


下の画像を「クリック」ください。拡大して表示します。

  
画像4

エフェクトは通常拡大1種、フェード拡大2種。パネルカラーは着色自由です。詳細は設定参照。



簡単なシミュレーションができます。下のボタンで切り替え可能です。

注意、「MOVE/FADE」切替 fade の場合のみ「FADEモード」の指定ができます。


MOVE / FADE FADEモード 位置切替 パネル色 速度切替 ---
move
move
center
#FFFFFF
600
---
MOVEFADE allmove 画像中央 標準遅く -



対応ブラウザ(検証済みブラウザ) IE6には対処していません。

・IE9 Safari Firefox Chrome Opera
(IE7.8は表示は可能ですが、CSS3部分の角丸陰影が未処理になります)


対応jQueryバージョン

jQuery-1.4.2以上




CSS3「LightBox」の簡単な説明


HTML JS CSS について


JS CSS の読み出し標準例
原則、HTML head部で読み込む。CSSを先に読み込むこと。JSは jquery の後に読み込むこと。URLは任意。


<link rel="stylesheet" type="text/css" href="/main/css/pops-lightbox-cs.css" />
<script type="text/javascript" src="/main/themed/popsline/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/main/js/pops-lightbox-cs.js"></script>

HTMLは下記のように書いてください。JS CSS の読み出しはJquery標準が推奨ですが、任意の場所で読み込んでも作動するとおもいます。
画像などは、使用者が用意ください。JSでの使用パーツは、ページ最後にあります。


HTML

表示したい画像の「Aリンク」に popslightbox クラスをあたえます。
title を書き込んだ場合はそれを表示します。サムネール画像の大きさは記載ください。


サムネール画像のある場合
<a href="表示する画像URL" class="popslightbox" title="タイトル"><img src="サムネール画像URL" width="100" height="50" /></a>

サムネール画像の無い場合1 (表示する画像を利用)
<a href="表示する画像URL" class="popslightbox" title="タイトル"><img src="表示する画像URL" width="100" height="50" /></a>

サムネール画像の無い場合2
<a href="表示する画像URL" class="popslightbox" title="タイトル">リンク名</a>

タイトルは上部に、メモは下部に表示されます。狭いので、画像の幅など考慮して文章を書いてください。

注意、htmlでの、サムネールの大きさは必ず記載ください。(width="100" height="50")



JS

好みで初期設定を変更ください。ダミー画像用パス(center_alpha.png)をお忘れなく。

pops-lightbox-cs.js (14KB)
JSの初期設定は、view_type "move" 位置は中央になります。好みで変更ください。


//pops-lightbox-cs.js
//14KB 日本語 FADE MOVE切り替え CSS3
//POPS WEB KOUBOU

(function($){

  jQuery.fn.pops_lightbox_cs=function(o) {

	//option
	var o=$.extend({
		view_type:"move",//move fade
		fade_mode:"move",//all move
		move_speed:600,//move速度
		fade_speed:600,//fade速度
		start_position:"center",//image center
		panel_color:"#FFFFFF",//任意の色
		path:'images/'
	},o || {});

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

	//標準初期値
	//画像の大きさ
	var ST_image_W=100;//100
	var ST_image_H=60;//60
	//全体の大きさ css3
	var ST_all_W=ST_image_W+side_space_W*2;//104
	var ST_all_H=ST_image_H+corner_H*2;//80

	//下部表示文字、下部ボックス使用時有効
	var site_name="POPS WEB KOUBOU";
	//上部タイトル代替文字
	var top_title="PHPTO-SHOW";

	//ダミー画像CSS3の場合はalpha.pngを使用ください
	var center_img_url=o.path+"center_alpha.png";
	//var center_img_url="xxxx/images/center_alpha.png";

	//初期位置など代入
	var start_position=o.start_position;
	//FadeMode
	var fade_mode=o.fade_mode;
	//パネル色指定
	var panel_color=o.panel_color;

	//画像読み込み後の遅延時間 100-1000
	var timeout=500;
	//delaytime、Fadeの時間調整400-600
	var delaytime=400;

	//常時拡大設定/IE7のみギザる、ほかはキレイ
	var fullsize=false;//true false
	//拡大率1.2-2
	var scale_ratio=1.5;

	//下部ボックスbottomboxを使用するか
	var bottombox_use="use";//use
	//周囲余白
	var win_margin=5;

	//parts-setting画像幅などの自動調整、useが良い
	var parts_setting_use="use";

	//--------------- 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;
	}
	//scale補正
	if(!scale_ratio || scale_ratio < 1) {scale_ratio=1;}

	//新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);}
	}
	//IE7.8判定
	var ie78=false;
	if (browserIE && browser_v < 9) {ie78=true;}

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

$('<div id="pops-lightbox"> \
	<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で一応削除できる
		//panel-color
		items_box.css({'background-color':panel_color});

		//set-centerbox
		if (parts_setting_use == 'use') {
			centerbox.css({'left':side_space_W,'right':side_space_W});
		}


		//中央サムネール位置あわせ分岐
		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_H*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_H*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*scale_ratio,image_H*scale_ratio);
				} else {
					standerdSize(image_W,image_H);
				}

				//FADE
				if (o.view_type == 'fade') {
					view_fadeimage();
				} else {
				//MOVE
					view_moveimage();
				}

			}, timeout);

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

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

		//FADE最終の高さ/画像高さも決めるbottom調整
		if (o.view_type == 'fade') {
			var btm_pos=(bottom_H-corner_H)+corner_H;
			centerbox.css({'top':top_H,'bottom':btm_pos,'left':side_space_W});
		} else {
		//MOVE始まりの高さ/画像高さはアニメで調整
			centerbox.css({'top':corner_H,'left':side_space_W});
		}

	}


	//view fade move
	var view_fadeimage=function () {

		//中央
		center_set();
		items_box.css({'display':'none'});
		
		imgholder_elm.children("img").empty().attr({src:img_url});
		imgholder_elm.css({'display':'block'});

		//パネルの位置変数
		var pos_X,pos_Y;

		//all-fade
		if (fade_mode == 'all') {

			//パネル関係の大きさ計算
			set_panelSize();
			//中央
			center_set();
			items_box.css({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H,'display':'none'});
			imgholder_elm.children("img").show();
			items_box.delay(delaytime).fadeIn(o.speed,function(){

				closebtn.css({'display':'block'});
				keep_url=img_url;
				show_parts();
			});
		}
		//move-fade
		if (fade_mode == 'move') {

			items_box.css({'opacity':0});
			items_box.css({'display':'block'});
			imgholder_elm.css({'display':'block'});

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

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

	};

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

		//分類
		var reset_v=0;
		var end_opacity=1;//終了の透明度
		if (o.view_type == 'fade' && fade_mode == 'all') {reset_v=0;}
		if (o.view_type == 'fade' && fade_mode == 'move') {reset_v=1;end_opacity=0;}
		if (o.view_type == 'move') {reset_v=2;end_opacity=1;}

		//画像FADE-OUT
		if (reset_v < 1) {

			//画像をFADE-OUT
			//imgholder_elm.fadeOut(o.fade_speed,function(){

			//全体をFADE-OUT
			items_box.fadeOut(o.fade_speed,function(){
				//全体を削除、簡略
				items_box.empty().remove();
				//overlayを削除
				overlay_elm.remove();
			});

		}

		//画像MOVE FADE-OUT共通処理
		if (reset_v > 0) {

			//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,'opacity':end_opacity},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;

		//パネル寸法で領域を狭めるwin_margin
		var erea_W=win_W-side_space_W*2-win_margin*2;
		var erea_H=win_H-(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;

	}

	//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=ST_image_W;
			elm_box_h=ST_image_H;
		}
		elm_box_x = pos.left-side_space_W;//★重要補正、コーナー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 title rel情報取得
			title=items.attr('title');
			//title=items.attr('rel');
			//title=items.attr('caption');
			//title=items.attr('text');
			if (!title) {title=top_title;}

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

  };
})(jQuery);

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


CSS

背景画像などの画像URLは環境に合わせてください。
JSには説明文など含みます、説明など削除しますと幾分実行速度があがります。

pops-lightbox-cs.css


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

#pops-lightbox {
	z-index: 7000;
	display:block;
	position:absolute;
	top:0;left:0;
	width:104px;/*初期の大きさ*/
	height:80px;
	text-align:left;
	background-color:#FFFFFF;
	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;
}

/* 陰影画像 パネル中央部分 削除*/

/* 画像パネル */
#pops-lightbox #center-box {
	position:absolute;
	top:10px;bottom:10px;
	left:2px;right:2px;
	width: auto;
	height: auto;
	background-color:#000000;
	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 close28_alpha.png*/
#pops-lightbox #close-btn {
	display; block;
	position: absolute;
	top:1px;right:5px;
	width: 25px;
	height: 25px;
	background:url("../images/close28_alpha.png") 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("../images/loading.gif") no-repeat center center;
	background-color:none;/*Safari*/
}
/*TEXT*/
#pops-lightbox #top-box {
	display: block;
	position: absolute;
	top:12px;left:12px;right:45px;
	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が重い場合は、スペースなどを削除すれば少し軽くなります。多少読みづらくなりますが。
各部の高さなど変更した場合の文字などの位置、色は使用者が直接CSSを修正ください。


JS簡単な説明

機能などを最低限にしていますので、グループ設定などしない単純な画像拡大表示用途になります。


機能設定

項目 変数 初期値 変更 備考
MOVE/FADE切替 view_type move move fade エフェクトの種類(タイプ)
FADEモード fade_mode fade all move タイプFADEの場合のみ
MOVE速度 move_speed 600 自由 400-1000
FADE速度 fade_speed 600 自由 400-1000
位置指定 start_position image image center 画像位置、中央
パネルの色 panel_color #FFFFFF 自由 #を付けること
ダミー画像用パス path image/ - ダミー画像フォルダまでのパス
拡大FULLSIZE false true false 自由 常時拡大
拡大率 scale_ratio 1.2 1.2 - 2.0 FULLSIZE 5
- - - -

1. FADEモードは「MOVE/FADE切替」で「FADE」に設定されている場合のみ有効です。ダミー画像 path は直接JSで記載したほうが楽。
2. FADEモードは2種類のみになります。
3. 位置指定は、画像位置、中央の2種類です。終了時も同じになります。
4. speedはそれぞれの拡大エフェクトの実行時間です。終了時、FADEモード move はスクリプトの事情により move_speed が使用されます。
5. パネルの色を変えた場合は、文字などの色はCSSで変更ください。
7. ダミー画像が無いと、LOADに失敗した場合画像部分にマークなどがはいります。その防止用です。
8. サムネール無き、Aリンクの場合は、初期設定の画像の大きさが使用されます。終了時も同じになります。
9. 拡大率は画像を実寸値より大きくしますが、画像の品質とブラウザの処理に影響されます。画像はjpg推奨。
その外はJSの先頭部分を読んでください。


JSスクリプトの変更など


標準では、JSの最後でクリプトの実行(pops_lightbox_cs関数の実行)を設定しています。


pops-lightbox-cs.jsの最後

前を略す

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


HTML側でクリプトの実行を行う場合は次のように変更する。(JS側は削除する)


<script type="text/javascript">
	$(function(){
		$(document).pops_lightbox_cs();
	});
</script>

-------------------------------
HTML側から設定を変更する場合の書き方

$(function(){
	$(document).pops_lightbox_cs({
		view_type:"fade",
		fade_mode:"move",
		move_speed:600,
		fade_speed:800
	});
});

または、JSの初期設定を変えても良い

スクリプト実行時、HTML側から変更されたものはJSの設定を上書きして実行されます。その都度条件を変更できます。
なを、JS側の初期設定など変更した場合は設定は固定されます。


ダミー画像のパス


初期設定にパスを書く
path:'/main/images/'

面倒な場合は
//ダミー画像CSS3の場合はalpha.pngを使用ください
//var center_img_url=o.path+"center_alpha.png";
var center_img_url="xxxx/images/center_alpha.png";
でも良い


タイトルを変更する場合。


現在titleを利用している。rel caption textでも可能

//TEXT title rel情報取得
title=items.attr('title');
//title=items.attr('rel');
//title=items.attr('caption');
//title=items.attr('text');
if (!title) {title=top_title;}

注意、プロパテイ text は標準ではないが認識するようです。(名前によっては、認識しない場合もあるかも知れない)


IE判定

現在は使用していませんが、JS「変数など」の最後に、IE判定、IE7.8判定をつけています。改造の場合は使用できます。


関数名、JS名、popslightboxクラス、を変更する場合。

都合が悪い場合はそれぞれの名前の変更はできます。対応する名前、または該当する名前など合わせてやればよい。問題があればエラーになるので、完全に作動するように修正すれば良い。


その他


クローズボタン、ダミー画像

クローズボタンの色々です、8種類用意しました。幅高さをCSSで変更して使用できます。ポジションは一定です。(PNG32陰影付き) closeXX_alpha.png

大きさ名前 25W
close20
25W
close22
25W
close25
25W
close28
40W
close40
40W
close42
50W
close50
50W
close52
31x31
Loading
10x10
ダミー画像
サンプル画像

ここのJSより複雑にしたものが、pops-ibox-3i (CSS3)です。「シミュレーション」は下記になります。

【参考 シミュレーション3】当方の記事: POPS-iBOX-3i のシミュレーション


IE9以上対応にしたらもっと簡単になるし、苦労も半減するかも、、。

以上です。


[ この記事のURL ]


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

[ 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]