POPSブログ

jQuery POPS-iBOX の改造

150

  Category:  jquery2012/10/07 pops 

pops-ibox-3iは、テスト的に CSS3 を利用したものに改造して見たものですが、それらを含め改造する方法など少しかきます。


jQuery POPS-iBOX の改造

ボタンのデザイン、パネルの色など少しかえますと多少は違う趣になります。特にpops-ibox-3iは陰影をCSS3で実行していますので手軽にデザイン変更が可能です。


pops-ibox-3i (CSS3) の改造

すでにお気付きの方もいるかも知れませんが、pops-ibox-3iは、周囲に角丸陰影画像を配置するpops-iboxの収納BOXをそのまま配置しています。削除しても機能は同じです。削除した場合のスクリプト、CSSを下記に収録します。


当方の特集記事 pops-ibox-3i (CSS3) : 特集記事 iBOX ページ


削除したスクリプトの実行


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


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

jQuery 伸縮するパネル/4 角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」の「シミュレーション」を行います。
[GROUP1]
2xxxxxxxxxxxxxxxxxx
[GROUP1]
3モード、fade:画像のみフエード、all:全体をフエード、 move:フエードと拡大が同時。moveのみ指定位置に戻ります。拡大モードに設定されている場合のみ、拡大率が有効。但しブラウザの大きさにより表示は異なります。


動き、機能は同じですが、環境の悪いマシンでは若干負荷がかかるような気がします。(気のせいかも知れない)


説明図


1.必要なければ削除すればよい。下にJS,CSSを書いておきます。
2.パネル内部のデザイン用途に利用することが可能です。背景画像として配置します。
3.構成をかえて配置することも可能です。


スクリプト CSS


仮に pops-ibox-3ib の名前をつけていますが、pops-ibox-3iで上書きまたは別名で保存しても良い。


参考CSS、pops-ibox-3i.jsでも良い

該当HTML箇所を削除しています。1箇所スクリプト変更。


//panel_color
$('.back-parts').css({'background-color':panel_color});
を
items_box.css({'background-color':panel_color});
に変更


//pops-ibox-3ib.js
//日本語クロスフェード形式/グループ/タイトル常時表示/CSS3
//27KB
//POPS WEB KOUBOU
//2012/10/05

(function($){

  jQuery.fn.pops_ibox=function(o) {

	//option
	var o=$.extend({
		group_use:"none",	//use none
		pager_use:"use",	//use none group
		view_type:"fade",	//move fade
		fade_mode:"move",	//fade all move
		move_speed:600,		//move速度
		fade_speed:600,		//fade速度
		speed:1000,		//画像fade速度
		cross_speed:800,	//cross-fade速度
		easing:"swing",		//swing linear easeOutBounce easeOutBack
		start_position:"image",	//image center
		autoload_use:"use",	//use none
		auto_time:8000,		//6000-10000
		panel_color:"#FFFFFF",	//color
		path:'images/'
	},o || {});

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

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

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

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

	//幅高さなど自動であわせるか useが便利
	var parts_setting_use="use";// use none

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

	//標準初期値
	//画像の大きさ
	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";
	//ページャーなき場合の代替サブテキス
	var top_subtitle="SUBTITLE: POPS WEB KOUBOU";

	//FadeMode
	var fade_mode=o.fade_mode;
	//FADE調整用、delaytime
	var delaytime=200;

	//サムネール位置から、中央から
	//iBoxはimage/centerどちらも指定可能ですimage center
	var start_position=o.start_position;
	//pager none use group
	//groupの場合のみpagerをセット
	var pager_use=o.pager_use;
	//ページャーでサムネールを表示
	var thumbview_use="use";
	//thumbview-Flag
	var thumbvflag=false;
	//サムネールを表示位置基準点
	var thumb_posX=100;//横位置
	var thumb_posY=15;//縦位置

	//内部コントロール
	var control_use="none";//
	//下部コントロール
	var control2_use="use";//

	//下部ボックスbottomboxを使用するか
	var bottombox_use="use";//use
	//EM-TEXT use
	var emview_use="use";
	//テキストアニメ用変数 テキスト高さが正確に取れないので固定する
	var emview_H=100;

	//拡大FULLSIZE/IE7のみギザる、ほかはキレイ
	var fullsize=false;//true false
	//拡大率 1-5
	var scale_ratio=1.2;
	//拡大ボタンの表示 use
	var scaleup_use="use";//use

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

	//グループues none
	var group_use=o.group_use;

	//swing linear easeOutBounce easeOutBack
	var easing=o.easing;

	//pagerボタン形式
	pager_btn="number";

	//auto-load/usenone
	var autoload_use=o.autoload_use;
	var auto_time=o.auto_time;

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

	//外周ボーダー指定use none ie
	//ie はIE7.8のみ処理
	var border_use="none";
	var border_v=1;
	var border_color="#555555";

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

	var items;//click-item
	var items_box;
	var imgholder_elm,overlay_elm,loading,topbox,bottombox,closebtn,scaleupbtn,autoload,control,control2,emview,thumbview,groupmark;
	var img_url;
	var imgPreloader;
	var topimg_elm;

	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,keep_url="",thumb_url="",thumb=false;
	var pager="",btn_pager="",newimage=false,pager_mode=false;
	var item_no=0,item_max;
	var em_text="";
	var titles=[];
	var pager_set=false,crossfade=true;
	var group=false,group_no=0,max_no=0,rel_text="",group_pager="";
	var group_items=[];
	var auto_mode=false;
	var timerID=null;

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

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

	var hoseiPSX_v=side_space_W;

	//IE
	var browserIE = 0;
	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-ibox')) {$('#pops-ibox').empty().remove();}

$('<div id="pops-ibox"> \
	<div id="center-box"><div id="imgwrap"><img /></div><div id="topimg"><img /></div><div id="em-view"><div class="ray-base"></div><div id="red-arrow"></div><div id="em-box"></div></div></div> \
	<div id="parts-base"> \
		<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="scaleup" title="150%"></div><div id="auto-load" title="AUTO on/off"></div> \
		<div id="control-box"><div id="control-ray"><div class="ray-base"></div><div id="ctrl-text"></div><div id="ibox-prev" title="PREV"></div><div id="ibox-next" title="NEXT"></div></div></div> \
		<div id="control2-box"><div id="ibox-prev2" class="controlbtn2" title="PREV"></div><div id="ibox-next2" class="controlbtn2" title="NEXT"></div></div> \
		<div id="group-mark"></div><div id="place-no"></div> \
		<div id="thumb-view"><img /></div> \
	</div> \
</div>').prependTo("body");

		//jQuery-object
		items_box=$('#pops-ibox');
		centerbox=$('#center-box');
		imgholder_elm=$('#imgwrap').css({'display':'block'});
		topimg_elm=$('#topimg').css({'display':'none'});
		loading=$('#popslb-loading').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'});
		autoload=$('#auto-load').removeClass('hit-auto').css({'display':'none'});//.hit-autoクラス削除
		control=$('#control-box').css({'display':'none'});
		control2=$('#control2-box').css({'display':'none'});
		emview=$('#em-view').css({'display':'none'});
		thumbview=$('#thumb-view').css({'top':thumb_posY,'display':'none'});
		groupmark=$('#group-mark').css({'display':'none'});
		$('#place-no').css({'display':'none'});

		//panel-color
		items_box.css({'background-color':panel_color});

		//border1
		if (border_use == 'use') {
			var btx="" + border_v + "px " + border_color + " solid";
			items_box.css({'border':btx});
		}
		//2
		if (border_use == 'ie') {
			var btx="" + border_v + "px " + border_color + " solid";
			if (ie78) {
				items_box.css({'border':btx});
			}
		}

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

		//max
		item_max=$('.pops-ibox').length;

		//group-pager
		if (group) {
			var k = 0;
			for (var i=0; i < group_items.length; i++) {
				var number=i+1;
				if (pager_btn != 'number') {number=" ";}//スペース
				group_pager=group_pager+'<a class="ibox-pager">'+ number +'<a/>';
			}
			max_no=group_items.length;
			//pagerset
			if(pager_use !='none') {pager_set=true;}
		}
		//!group
		if (!group) {
			//pagerをresetする
			if(pager_use =='use') {pager_set=true;}
		}
		if (max_no>1) {group = true;}

		if (item_max <= 1) {
			pager_set=false;
			control_use = "none";
			control2_use = "none";
		}

		//center-set
		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;
		}

		//pager-wrap-set
		if (pager_set) {

			//pager
			if (!group) {$('<div id="pager-wrap">'+ pager +'</div>').prependTo(topbox);}
			//group-pager
			if (group) {$('<div id="pager-wrap">'+ group_pager +'</div>').prependTo(topbox);}
			$('.ibox-pager').each(function(i) {

				$(this).click(function(e) {
					if (auto_mode) {reset_auto_load();}
					if (!group) {load_newimage(i)}
					if (group) {load_group_newimage(i)}
					return false;
				});
				if (thumbview_use == 'use') {
					$(this).hover(
						function() {add_thumbview(i);},
						function() {remove_thumbview(i);}
					);
				}
			});
			//
			$('#pager-wrap').click(function() {
				return false;
			});
		}

		//center
		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();
		}
		//thumb
		if (thumb) {
			imgholder_elm.children("img").empty().attr({src:thumb_url});
		} else {
			//dummy
			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();
			return false;
		});

		//btn-hover
		$('#close-btn').hover(
			function() {$(this).addClass("hover");},
			function() {$(this).removeClass("hover");}
		);
		//scaleup_use
		if (scaleup_use == 'use') {
			$('#scaleup').click(function() {
				scaleup();
				return false;
			});
		}

		//control
		if (control_use == 'use') {
			//control-hover
			$('#control-box').hover(
				function() {$('#control-ray').css({'display':'block'});},
				function() {$('#control-ray').css({'display':'none'});}
			);
			$('#ibox-prev').click(function() {
				if (auto_mode) {reset_auto_load();}
				set_prev_no();
				return false;
			});
			$('#ibox-next').click(function() {
				if (auto_mode) {reset_auto_load();}
				set_next_no();
				return false;
			});
		}
		//control2
		if (control2_use == 'use') {
			$('#ibox-prev2').click(function() {
				if (auto_mode) {reset_auto_load();}
				set_prev_no();
				return false;
			});
			$('#ibox-next2').click(function() {
				if (auto_mode) {reset_auto_load();}
				set_next_no();
				return false;
			});
		}

		//em-view hover
		if (emview_use == 'use') {
			$('#em-view').hover(
				function() {$(this).animate({'bottom':0},400);},
				function() {$(this).animate({'bottom':-emview_H},400);}
			);
		}

		//auto-load-btn
		if (autoload_use == 'use') {
			$('#auto-load').click(function() {
				if (!auto_mode) {
					$(this).addClass('hit-auto');
					set_auto_load();
					return false;
				}
				if (auto_mode) {
					//$(this).removeClass('hit-auto');
					reset_auto_load();
					return false;
				}
			});
		}

	};

	//Overlay
	var showOverlay=function() {
		$('#popsibox-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="popsibox-overlay"></div>').prependTo("body");
		overlay_elm=$('#popsibox-overlay');//Object
		overlay_elm.css({'height':html_hi,'width':'100%','display':'block'});
		overlay_elm.click(function() {
			reset_box();
		});
	};

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

		//EM-TEXT
		emview.css({'display':'none'});

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

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

			window.setTimeout(function(){

				//scale_ratio
				if (fullsize) {
					standerdSize(image_W*scale_ratio,image_H*scale_ratio);
				} else {
					standerdSize(image_W,image_H);
				}

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

			}, timeout);

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

	//panel-Size
	var set_panelSize=function () {

		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 {
			centerbox.css({'top':corner_H,'left':side_space_W});
		}

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

		items_box.css({'display':'none'});
		set_panelSize();
		center_set();

		imgholder_elm.children("img").empty().attr({src:img_url});
		imgholder_elm.css({'display':'block'});

		if (fade_mode == 'fade') {
			imgholder_elm.children("img").hide();
		}

		if (fade_mode == 'fade') {
			items_box.css({'top':all_pos_Y,'left':all_pos_X,'width':all_W,'height':all_H,'display':'block'});
			//fade-image
			imgholder_elm.children("img").fadeIn(o.speed,function(){

				closebtn.css({'display':'block'});
				keep_url=img_url;
				show_parts();
			});
		}
		//all-fade
		if (fade_mode == 'all') {
			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') {

			if (start_position) {
				center_set();
				pos_X=all_pos_X;
				pos_Y=all_pos_Y;
			} else {
				pos_X=elm_box_x;
				pos_Y=elm_box_y;
			}

			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':pos_Y,'left':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();

		if (newimage) {
			topimg_elm.css({'display':'none'});
			topimg_elm.children("img").empty().attr({src:keep_url});
			topimg_elm.children("img").css({'opacity':1});
			topimg_elm.css({'display':'block'});
			imgholder_elm.css({'display':'none'});
		}

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

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

			if (newimage) {
				imgholder_elm.css({'display':'block'});
				topimg_elm.children("img").animate({'opacity':0},o.cross_speed,function() {
					topimg_elm.css({'display':'none'});
				});
			}
			closebtn.css({'display':'block'});
			keep_url=img_url;
			show_parts();
		});	
	};

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

		//newimage-mode-end
		if(newimage) {newimage=false;}

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

		//title
		if (!pager_set) {
			topbox.children("#top-line").text(title);
		} else {
			var t=titles[item_no];
			//無ければ標準タイトル
			if (!t) {t=top_title;}
			topbox.children("#top-line").text(t);
		}

		//pager
		if (pager_set) {
			$(".ibox-pager").removeClass('hit');
			if (!group) {$(".ibox-pager").eq(item_no).addClass('hit');}
			if (group) {$(".ibox-pager").eq(group_no).addClass('hit');}
		} else {
			//subtitle
			$('<div id="subtitle">'+ top_subtitle +'</div>').prependTo(topbox);
		}

		//group-mark
		if (group) {
			groupmark.attr({title:rel_text});
			groupmark.css({'display':'block'})
		}

		topbox.css({'display':'block'});

		if (bottombox_use=='use') {
			var caption=items.attr('caption');
			if (!caption) {caption=site_name;}
			bottombox.children("#btm-line").text(caption);
			bottombox.css({'height':bottom_H,'display':'block'});
		}

		//control
		if (control_use == 'use') {
			if (!group) {
				var no=item_no+1;
				var ctrltext=no + " / " + item_max;
				$('#ctrl-text').text(ctrltext);
			}
			if (group) {
				var no=group_no+1;
				var ctrltext="["+ rel_text +"] "+ no + " / " + max_no;
				$('#ctrl-text').text(ctrltext);
			}
			control.css({'display':'block'});
		}
		//control2
		if (control2_use == 'use') {
			control2.css({'display':'block'});
		}

		//EM-TEXT
		if(emview_use == 'use' && em_text) {
			//
			$('#em-box').text(em_text);
			emview.css({'height':emview_H+10});
			emview.css({'bottom':-emview_H,'display':'block'});
		}

		//pager
		if (pager_set) {
			var t=titles[item_no];
			if (!t) {t="NONE";}
			$('#title-box').text(t);
		} else {
			$('#title-box').text("");
		}

		//place
		if (!pager_set) {
			if (!group) {
				var no=item_no+1;
				var t=no +" / "+ item_max;
			}
			if (group) {
				var no=group_no+1;
				var t=no +" / "+ max_no;
			}
			$('#place-no').text(t);
			$('#place-no').css({'display':'block'});
		}

		//auto-load-btn
		if (autoload_use == 'use') {
			$('#auto-load').css({'display':'block'});
		}

		//auto-mode-setTimeout
		if (auto_mode) {set_auto_load();}

	}

	//reset
	var reset_box=function() {

		//stop
		items_box.stop(true);

		if (auto_mode) {auto_mode=false;clearTimeout(timerID);}
		
		loading.css({'display':'none'});
		topbox.empty().remove();
		emview.remove();
		$('#parts-base').remove();

		var pos_X,pos_Y;
		if (thumb) {
			all_W=keep_box_W;
			all_H=keep_box_H;
		}
		if (!thumb) {
			finishSize(image_W,image_H);
		}

		var moveflag=0;
		var end_opacity=0;

		if (o.view_type == 'move') {
			moveflag=1;end_opacity=1;
		}
		if (o.view_type == 'fade') {
			moveflag=0;
			if (fade_mode == 'move') {
				moveflag=1;end_opacity=0;
			}
		}

		if (!moveflag) {
			items_box.fadeOut(o.fade_speed,function(){
				//panel
				items_box.empty().remove();
				//overlay
				if (overlay_use == 'use') {
					overlay_elm.remove();
				}
			});

		}

		//MOVE-OUT
		if (moveflag) {

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

			if (pager_mode) {

				finishSize(image_W,image_H);
				//center
				if (start_position == 'center') {
					center_set();
					pos_X=all_pos_X;
					pos_Y=all_pos_Y;
				} else {
					var w=$('.pops-ibox').eq(item_no).children("img").width();
					var h=$('.pops-ibox').eq(item_no).children("img").height();
					if (w) {
						var pos = $('.pops-ibox').eq(item_no).children("img").offset();
						keep_box_W=w+side_space_W*2;
						keep_box_H=h+corner_H*2;
					}
					if (!w) {var pos = $('.pops-ibox').eq(item_no).offset();}
					pos_X = pos.left - side_space_W;
					pos_Y = pos.top - corner_H;
				}
			}

			//image
			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
				if (overlay_use == 'use') {
					overlay_elm.remove();
				}

			});
		}
	};

	//next
	var set_next_no=function () {

		newimage=true;
		if (!group) {
			var no=item_no+1;
			if (no > item_max-1) {no=0;}
		}
		//group
		if (group) {
			group_no +=1;
			if (group_no > max_no-1) {group_no=0;}
			var no=group_items[group_no];
		}
		load_newimage(no);
	}
	//prev
	var set_prev_no=function () {
		newimage=true;
		//!group
		if (!group) {
			var no=item_no-1;
			if (no < 0) {no=item_max-1;}
		}
		//group
		if (group) {
			group_no -=1;
			if (group_no < 0) {group_no=max_no-1;}
			var no=group_items[group_no];
		}
		load_newimage(no);
	}

	//load_newimage
	var load_newimage=function(no) {

		//thumbview-Flag
		if(thumbvflag) {
			thumbview.css({'display':'none'});
			thumbvflag=false;
		}

		pager_mode=true;
		newimage=true;

		item_no=no;
		img_url=$('.pops-ibox').eq(no).attr('href');

		//EM-TEXT
		em_text=$('.pops-ibox').eq(no).nextAll("em").text();

		//LOAD
		imageload();
	}

	//group-load_newimage
	var load_group_newimage=function(no) {

		if(thumbvflag) {
			thumbview.css({'display':'none'});
			thumbvflag=false;
		}

		pager_mode=true;
		newimage=true;

		if (group) {
			group_no=no;
			item_no=group_items[no];
			no=item_no;
		}
		img_url=$('.pops-ibox').eq(no).attr('href');

		//EM-TEXT
		em_text=$('.pops-ibox').eq(no).nextAll().text();

		//LOAD
		imageload();
	}

	//set-auto-load
	var set_auto_load=function() {
		//next
		auto_mode=true;
		clearTimeout(timerID);
		timerID=setTimeout(function(){set_next_no();},auto_time);

	}
	//reset-auto-load
	var reset_auto_load=function() {
		//stop
		auto_mode=false;
		clearTimeout(timerID);
		$('#auto-load').removeClass('hit-auto');
	}

	//HOVER-thumb
	var add_thumbview=function(no) {

		thumbvflag=true;
		if (group) {no=group_items[no];}

		var hoverimg_url=$('.pops-ibox').eq(no).children("img").attr('src');
		var hover_pos=no*13+thumb_posX;
		if (hoverimg_url) {
			thumbview.children("img").empty().attr({src:hoverimg_url});
			thumbview.css({'left':hover_pos,'display':'block'});
		} else {
			thumbvflag=false;
			return false;
		}

	}
	//HOVER-thumb-delete
	var remove_thumbview=function(no) {

		thumbview.css({'left':0,'display':'none'});
		thumbvflag=false;
	}

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

	}

	//finish-Size
	function finishSize(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;
	}

	//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;
		elm_box_y = pos.top - corner_H;
	}

	//scaleup-anime
	var scaleup=function() {
		standerdSize(image_W*1.5,image_H*1.5);
		resize=0;
		center_set();
		bottom_V=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() {
			//
		});

	}

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

	//get-group-data
	var set_hitgroup_data = function(rel_txt) {

		if (rel_txt == '') {return}
		if (group_use != 'use') {return}

		var j = 0;
		//LOOP
		$('.pops-ibox').each(function(i) {
			var tx=$(this).attr('rel');
			if (tx == rel_txt) {
				if(i == item_no){group_no=j;}
				group_items[j]=i;
				j ++;
			}
		});
		max_no=group_items.length;
		if (max_no>1) {group = true;}
	}

	//make-pager-element
	var make_pager = function() {
		pager="";
		$('.pops-ibox').each(function(i) {
			//title保存
			titles[i]=$(this).attr('title');
			var number=i+1;
			if (pager_btn != 'number') {number=" ";}//スペース
			//pager
			pager=pager+'<a class="ibox-pager">'+ number +'<a/>';
		});
	}

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

		$('.pops-ibox').click(function(e) {

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

			//clear
			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;
			imgPreloader=null;//for cms
			title="";
			em_text="";
			newimage=false;
			item_no=$('.pops-ibox').index(this);
			pager_mode=false;
			thumbvflag=false;
			pager_set=false;
			auto_mode=false;
			clearTimeout(timerID);

			if (items.children("img").height()) {
				thumb=true;
				thumb_url=items.children("img").attr('src');
			}
			//
			title=items.attr('title');
			if (!title) {title=top_title;}
			//EM-TEXT
			em_text=$(this).nextAll("em").text();

			rel_text="";
			max_no=0;
			group=false;
			group_no=0;
			group_items=[];
			group_pager="";

			if (group_use == 'use') {
				rel_text=items.attr('rel');
				if (rel_text == undefined) {rel_text="";}
				if (rel_text) {set_hitgroup_data(rel_text);}
				if (rel_text == '') {group=false;}
				if (group_use != 'use') {group=false;}
			}

			//Overlay
			if (overlay_use == 'use') {
				showOverlay();
			}
			//create-html-box
			create_base();
			//load-image
			imageload();
			return false;
		});

		make_pager();

	});

  };
})(jQuery);

//easing
(function($){
  jQuery.extend( jQuery.easing,{
	easeOutBounce:function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	}

  });
})(jQuery);

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


参考CSS、pops-ibox-3i.cssでも良い

該当箇所を削除しています。


/*pops-ibox-3ib.css 日本語*/
/* css3 クロスフェード形式*/

em {display:none;}

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

/* corner パネル中央部分 削除*/

/* ray */
#pops-ibox .ray-base {
display:block;
width:100%;
height:100%;
opacity:0.4;filter:alpha(opacity=40);
background-color:#000000;
}

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

#pops-ibox #parts-base {
display:block;
width:100%;
height:100%;
}

/* EM-TEXT */
#center-box #em-view {
display:block;
position:absolute;
bottom:0;left:0;
width:100%;
height:30px;
}
#center-box #em-view #red-arrow {
display:block;
position:absolute;
top:2px;right:10px;
width:11px;
height:6px;
background:url("../images/red_arrow.gif") no-repeat;
}
#center-box #em-view #em-box {
display:block;
position:absolute;
top:10px;left:0;
width:auto;/*auto*/
height:100%;
padding:0 5px;
/*font-size:10px;IE7効かない78%にする*/
font-size:78%;
color:#FFFFFF;
cursor:default;
}

#center-box2 {
display:block;
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background-color:transparent;
}
/* IE7 heightが伸びない HACK修正*/
#pops-ibox #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;
}

/* クロスフェード用上画像 */
#pops-ibox #center-box #topimg {
display:block;
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background-color:transparent;
float:left;
}
#topimg img {
width: 100%;
height: 100%;
vertical-align:bottom;
border-style:none;
}

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

/* scaleup-btn*/
#pops-ibox #scaleup {
display;block;
position:absolute;
bottom:2px;right:2px;
width:11px;
height:11px;
background:url("../images/scaleup.gif") no-repeat;
cursor:pointer;
}

/* auto-btn */
#pops-ibox #auto-load {
display;block;
position:absolute;
bottom:2px;left:2px;
width:11px;
height:11px;
background:url("../images/ibox_auto.gif") no-repeat;
background-position: 0 0;
cursor:pointer;
}
#pops-ibox #auto-load.hit-auto {
background-position: 0 -12px;
}

/* close-btn */
#pops-ibox #close-btn {
display;block;
position:absolute;
top:1px;right:5px;
width:25px;
height:25px;
background:url("../images/close22_alpha.png") no-repeat;
background-position:0 0;
cursor:pointer;
overflow:hidden;
}

#pops-ibox #close-btn.hover {
background-position:0 -25px;
}

#pops-ibox #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-ibox #top-box {
display: block;
position: absolute;
top:2px;left:12px;right:45px;
width: auto;
height: 34px;
overflow:hidden;
}

#pops-ibox #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 */
#pops-ibox #top-box #subtitle {
position: absolute;
top:16px;
text-align:left;
width:auto;
margin-left:10px;
height:12px;
font-size:10px;
color: #CCCCCC;
overflow:hidden;
}

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

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

/*pager*/
#pops-ibox #pager-wrap {
position:absolute;
top:16px;
width:auto;
height:100%;
padding:1px;
}

#pops-ibox #pager-wrap .ibox-pager {
display:block;
margin-left:2px;
padding:0 1px;
font-size:10px;/*Chrome 8pxだめ*/
font-weight:normal;/*bold*/
color: #FFFFFF;
cursor:pointer;
float:left;
}

#pops-ibox #pager-wrap .ibox-pager {
background-color:#AAAAAA;
}
#pops-ibox #pager-wrap .ibox-pager:hover {
background-color:#FFD700;
}
#pops-ibox #pager-wrap .hit{
background-color:#FF0000;
}

/* group-mark */
#pops-ibox #group-mark {
display:block;
position:absolute;
top:16px;left:2px;
width:10px;
height:17px;
background:url("../images/group_mark.gif") no-repeat center center;
cursor:default;
}

/*control-box*/
#pops-ibox #control-box {
display:block;
position:absolute;
top:36px;left:2px;right:2px;
width:auto;
height:28px;
/*background:transparent;*/
background:url('../images/center_alpha.png') repeat;//IE7
}
#control-box #control-ray {
display:none;
width:100%;
height:100%;
background:none;
}
#control-box #control-ray #ctrl-text {
position:absolute;
top:0;left:0;right:0;
width:auto;
height:100%;
text-align:center;
line-height:28px;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
background:none;
}
#control-box #control-ray #ibox-prev {
position:absolute;
top:5px;left:10px;
width:18px;
height:18px;
background:url("../images/ibox_prev.gif") no-repeat;
cursor:pointer;
}
#control-box #control-ray #ibox-next {
position:absolute;
top:5px;right:10px;
width:18px;
height:18px;
background:url("../images/ibox_next.gif") no-repeat;
cursor:pointer;
}

/*control-2*/
#control2-box {
position:absolute;
bottom:1px;left:15px;right:15px;
width:auto;
height:18px;
}
#control2-box #ibox-prev2 {
position:absolute;
top:0;left:5px;
width:18px;
height:18px;
background:url("../images/prev_alpha.png") no-repeat;
cursor:pointer;
}
#control2-box #ibox-next2 {
position:absolute;
top:0;right:5px;
width:18px;
height:18px;
background:url("../images/next_alpha.png") no-repeat;
cursor:pointer;
}

#pops-ibox #thumb-view {
display:none;
position:absolute;
top:0;left:0;
width:50px;
height:30px;
}
#pops-ibox #thumb-view img {
width:100%;
height:100%;
}

/*画像位置情報*/
#pops-ibox #place-no {
display:none;
position:absolute;
top:18px;right:35px;
width:auto;
height:14px;
text-align:center;
font-size:10px;
color:#AAAAAA;
cursor:default;
}


その他


pops-ibox用のクローズボタンの色々です。

クローズボタン

8種類用意しました。幅高さをCSSで変更して使用できます。ポジションは一定です。(PNG32陰影付き) closeXX_alpha.png

大きさ名前 25W
close20
25W
close22
25W
close25
25W
close28
40W
close40
40W
close42
50W
close50
50W
close52
サンプル画像

pops-ibox-3i (CSS3)の「シミュレーション」は下記になります。

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



当方の特集記事:特集記事 iBOX ページ


以上です。


[ この記事のURL ]


タグ:css3 , LightBox , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]