超軽量2KB以下のLightbox系jQueryプラグインLigbox！

超軽量

昨年このサイトをリニューアルした際、当初は画像のオーバーレイ表示はLightboxを使おうと思っていたのですが、その容量を見ると30KBと無駄に大きいことに気がつきました。私が求めるのはただ単に画像がオーバーレイ表示できる機能で、その他の機能はいらなかったので、これなら自分で作ったほうが軽くできるからいいなということで必要最低限の機能のみに絞ったLigboxを作成しました。

軽いのにはもちろん理由があり、Lightboxでは×ボタンなどやNextなどの部分は画像を用いられているのですが、Ligboxでは画像の使用は一切なしで容量を削減しています。ローディング部分のgif画像も重いのでLigboxではコードのみで実装されています。

その結果、必要最低限で無駄な機能を省くことで2KB以下で実装することができました。Lightboxではlightbox.js＋lightbox.css＋画像(close,ローディングなど)を合わせて29.5KBありますが、ligbox.js＋ligbox.css＋画像を使用しないので合わせて1.92KBしかありません。10分の1以下です。

Demo

LigBox jQuery Plugin - ShopDD.net

Demoを用意したので、上記URLから動作が確認できます。ダウンロードもこちらからどうぞ。

使い方

Ligboxをダウンロードしてきます。

LigBox jQuery Plugin - ShopDD.net http://shopdd.net/ligbox/

Ligboxフォルダを解凍します。

jsフォルダ内にあるjquery-2.1.4.min.jsとligbox.jsをWebサイト上のjsフォルダ内にコピーし、htmlのhead内に以下のコードを追加して読み込みます。jQueryは先に読み込む必要があります。※すでにjQueryを使用している場合はjQueryを読み込む必要はありません。

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/ligbox.js"></script>

cssフォルダ内にあるligbox.cssをWebサイト上のcssフォルダ内にコピーし、htmlのhead内に以下のコードを追加して読み込みます。

<link rel="stylesheet" type="text/css" href="css/ligbox.css">

最後に<div class="ligbox">～</div>で画像のaタグを囲います。

ligboxで囲われているaタグの画像(jpg|png|gif)をクリックするとこのように画像がオーバーレイ表示されるようになります。

この説明で分からない人ははLigbox.zip内のindex.htmlを編集しながら試行錯誤してみてください。

コード

コード自体はsimple is bestで必要最低限で実装されています。なんと25行しかありません。たったこれだけであの表示が実現できるのですからjQueryは本当に偉大だと思います。

$(function(){	
	$('.ligbox').on('click', 'a', function(event) {
		var url = $(this).attr("href");
			
		if(!url.match(/(jpg|gif|png)/i)){
				return;
		}
			
			$('body').append('<div id="ovray"><div id="imagebox"><img src="' + url + '" id="img" /></div></div>');
			$('#ovray').append("<p>Now loading...</p>").fadeIn(500,function(){
					var img = new Image();
					img.src = url;
					var width  = img.width / 2;
					var height = img.height / 2;
					$('#imagebox').delay(400).fadeIn().css({margin:"-"+ height + "px 0 0 -" + width +"px"});
			});
			
			$('#ovray').on('click', function() {
				$(this).fadeOut(400, function(){								 
					$(this).remove();					   
				});
			});
      		return false;
    });
});

CSSもこれだけしか書いていません。ローディングの回転している部分はCSS Animationで書かれています。

#ovray{
	position:fixed;
	width:100%;
	height:100%;
	//overflow:hidden;
	background:rgba(0,0,0,0.7);
	top:0;  
    left:0;  
	z-index:10000;
	display:none;
}
#imagebox{
	position:fixed;
	z-index:10001;
	top: 50%;
    left: 50%;
	display:none;
}
#ovray>p:before{
    content: "●";
	margin:0;
	padding:0px 0px 0px 0px;
	font-weight:bold;
	position:relative;
	left:-5px;
	top:5px;
	display:inline-block;
	font-size:23px;
	line-height:30px;
    width: 15px;
    height: 15px;
	color:#333;
	border:2px solid #333;
	border-radius:20px 20px;
	-webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
#ovray>p:before{
	color:#FFF;
	border:2px solid #fff;
}
#ovray p{
	position:relative;
	font-size:18px;
	font-weight:bold;
	top:49%;
	color:#FFF !important;
}
#ovray img{
	padding:0px;
	border:#fff 10px solid;
}
@-webkit-keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

今回の個人的感想＆まとめ

今回はこのサイト用に私が製作したjQueryプラグインのLigboxの紹介でした。本家のLightboxは色々機能が追加されすぎて重くなってしまっているのが残念だったので適当に作ったのですが、Ligboxは2KB以下とかなり軽くできたと思います。名前はLightのhtを削ってLigboxにしました。無駄のない必要最低限に絞ったプラグインなので画像表示以外には使えませんが、世の中にはその機能だけが欲しいという人もいるかと思い公開しました。かなり簡単なコードですが誰かの役に立てばいいかなと考えています。

最近ではどのサイトでもほぼjQueryが入っていると思うので、js+cssを追加するだけで動作すると思います。必要最低限の画像のオーバーレイ表示がしたい、もっと軽いjQueryプラグインが欲しいと思っていた人やLigboxを気に入った人はぜひ使ってみてください。