POPSブログ

簡単な自作LightBoxの表示

8

  Category:  jquery2012/01/30 pops 

簡単な自作LightBoxを作り、表示できるようにしました。

jqueryで簡単なLightBoxを作り、必要な時のみ使用することにしました。colorboxは使用していません。
ブログなどは、幅が狭いので、記事中に大きな画像の埋め込みが困難です。そんなときLightBoxは便利です。


LightBoxの表示です

下の画像またはテキストリンクを「クリック」すると、「OverlayつきのLightBox」形式で表示します。画像表示専用。

画面にあわせて、画像のリサイズはしますが、色々な機能アニメなどはありません極簡単なものです。
LightBox表示後はどこをCLICKしても消去します。


画像リンク


テキストリンク

[ 画像を表示 1 ]
[ 画像を表示 2 ]


a要素に popslightbox クラスを指定しています。当方の画像は webroot である /main/images/ にあります。


色々なlightboxを作りましたが、最終的には一番簡単なものを使用しています。誰でもそんなものなのでしょう。
常時使用するならばで読み込み設定すればよいし、使用頻度が少ないなら記事の最後に設定しても、作動するようです。
必要な場合は使用されてもかまいません。ライセンスなし、書き換えなど自由です。


簡単な、JS CSS などの解説

HTML 側の記載例


aリンク形式で記載して
popslightboxクラスをあたえる

画像の例
<a class="popslightbox" href="/main/images/photo_t91.jpg"><img src="/main/images/photo_t91.jpg" width="400" height="200" /></a>

サムネールを作っても良い、href src ともに同じだと表示は速くなる

テキストの例
<a class="popslightbox" href="/main/images/testImage10.jpg">画像を表示</a>

画像の取得が出来ない場合はLoadingが回りっぱなし。1日中見ていた時もあった


JS

pops-lightbox.js


<>
//pops-lightbox_f.js
//5KB日本語
//POPS WEB KOUBOU

(function($){
jQuery.fn.pops_lightbox=function(o) {
//option
var o=$.extend({lightbox_type:'fade',speed:1000,path:'images/'},o || {});
// settings
var items;//click-item
var items_box;
var imgholder_elm,overlay_elm,close_btn,loading;
var img_url;
var imgPreloader;
var view_type='fade';
var lightbox_pos_Y,lightbox_pos_X;
lightbox_Width=100;
lightbox_Height=100;
var basebox_Width=100;
var basebox_Height=100;
var win_W,win_H,resize;

//IE判定 未使用/古いので注意
var browserIE = 0;//IE判定
var browser_v = 0;//IE 6 7 8
if (jQuery.browser.msie) {
	browserIE = 1;
	if (navigator.userAgent.match(/MSIE (\d\.\d+)/)) {browser_v = parseFloat(RegExp.$1);}
}

// function
var imageload=function() {
	loading.css({'display':'block'});
	imgPreloader=new Image();
	imgPreloader.onload=function() {
		loading.css({'display':'none'});
		basebox_Width=imgPreloader.width;
		basebox_Height=imgPreloader.height;
		resize=0;
		standerdSize(basebox_Width,basebox_Height);
		view_image();
	}
	imgPreloader.src=img_url;
};
var view_image=function () {
	items_box.css({'display':'none'});
	center_set();
	lightbox_Width=basebox_Width;
	lightbox_Height=basebox_Height;
	imgholder_elm.css({'width':basebox_Width,'height':basebox_Height});
	imgholder_elm.children("img").empty().attr({src:img_url});
	imgholder_elm.children("img").hide();
	imgholder_elm.css({'display':'block'});
	items_box.css({'top':lightbox_pos_Y,'left':lightbox_pos_X,'width':lightbox_Width,'height':lightbox_Height,'display':'block'});
	imgholder_elm.children("img").fadeIn(o.speed,function(){
		closebtn.css({'display':'block'});
	});	
};
var showOverlay=function() {
	$('#pops_lightbox_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="pops_lightbox_overlay"></div>').prependTo("body");
	overlay_elm=$('#pops_lightbox_overlay');//Object
	overlay_elm.css({'height':html_hi,'width':'100%','display':'block'});
	overlay_elm.click(function() {
		reset_box();
	});
};
var create_base=function() {
	if ($('#pops_lightbox')) {$('#pops_lightbox').empty().remove();}
	$('<div id="pops_lightbox"><div id="pops_imgholder"><img /></div><div id="pops_lightbox_loading"></div><div id="pops_close_text" title="BOX-CLOSE">close</div></div>').prependTo("body");
	items_box=$('#pops_lightbox');
	imgholder_elm=$('#pops_imgholder').css({'display':'none'});
	loading=$('#pops_lightbox_loading').css({'display':'none'});
	closebtn=$('#pops_close_text').css({'display':'none'});
	center_set();
	items_box.css({'top':lightbox_pos_Y,'left':lightbox_pos_X,'width':lightbox_Width,'height':lightbox_Height,'display':'block'});
	items_box.click(function() {
		reset_box();
	});
};
var reset_box=function() {
	items_box.stop(true);
	items_box.empty().remove();
	overlay_elm.remove();
};
function standerdSize(ldimg_W,ldimg_H) {
	var set_W=0,set_H=0;
	var scale_v=1;
	var erea_W=win_W-20;
	var erea_H=win_H-20;
	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;
	}
	basebox_Width=set_W;basebox_Height=set_H;
}
function center_set() {
	lightbox_pos_X=Math.floor(($(window).width()-basebox_Width)/2);
	lightbox_pos_Y=Math.floor(($(window).height()-basebox_Height)/2);
	var Scrollv=getScrollv();
	lightbox_pos_X +=Scrollv[0];
	lightbox_pos_Y +=Scrollv[1];
}
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.children("a").attr('href');
		img_url=items.attr('href');
		win_W=$(window).width();
		win_H=$(window).height();
		//Overlay
		showOverlay();
		//create-html-box
		create_base();
		//load-image
		imageload();
		return false;
	});
});

};
})(jQuery);

JS-SETTING

speedのみ変更可能です。lightbox_type、path は使用していません。


$(document).pops_lightbox({
	speed:2000
});

等と記述すれば、speedを変更できる、直接変更しても良い


CSS記載例 pops-lightbox.css


/*pops-lightbox.css (basercms)日本語*/
#pops_lightbox_overlay{z-index:8999;position:absolute;top:0;left:0;width:100%;height:1px;background-color:#000000;opacity:0.8;filter:alpha(opacity=80);}
#pops_lightbox{z-index:9000;display:block;position:absolute;top:0;left:0;width:100px;height:100px;border:1px #333333 solid;text-align:left;background-color:#000000;overflow:hidden;}
#pops_imgholder{width:100px;height:100px;border-style:none;background-color:#000000;}
#pops_imgholder img{width:100%;height:100%;border-style:none;text-decoration:none;}
#pops_lightbox_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;}
#pops_close_text{display:block;position:absolute;top:1px;left:2px;width:50px;height:16px;color:#CCCCCC;text-align:center;background-color:none;cursor:pointer;}

LOADING画像 31x31 :

LOADING画像はどんなものでも使用できます。そのままで中央表示になります。

通常は常時CSS、JSの読み込み、JSの実行などを行うものですが、ここではブログ記事の最終部分に書き込み実行しています。


ブラウザ判定

JS記載のブラウザ判定は古くなりましたので、必要な場合は下記記事の判定を使用ください。(2014/06/01追記)

【参照】当方の記事: Javascript IE10 IE11 のブラウザ判定


記事最後での、CSS JS の読み込みと実行 (本来は head に書くものです)


ブログ記事等の最後に書く、忘れると表示しない、私はよくわすれる

<link href="/main/css/pops-lightbox.css" type="text/css" />
<script type="text/javascript" src="/main/js/pops-lightbox.js"></script>
<script type="text/javascript"> 
$(function(){
	$(document).pops_lightbox();
});
</script>

HTML的にはCSSを body で読み込んでいるので違反ですが、まあ動けばよい。作動するかを確認すること。



[ この記事のURL ]


タグ:basercms , LightBox , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]