1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 超軽量2KB以下のLightbox系jQueryプラグインLigbox!
Article

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

Webデザイン > html+CSS+javascript 
ligbox_lightbox2_000.png

今回は私がこのサイト用に製作した必要最低限の機能のみに絞り超軽量化を図ったLightbox系jQueryプラグイン「Ligbox」を紹介したいと思います。Lightboxといえば画像を同一画面でオーバーレイ表示できる便利なjavascriptで、その便利さから様々なサイトで利用されています。

しかし、Lightboxには様々な機能が追加されているためlightbox.js+lightbox.css+画像(close,ローディングなど)を合せると29.5KBとかなり容量が大きくなっています。Ligboxではligbox.js+ligbox.cssで画像を用いないため1.92KBしかありません。なんとファイルサイズは10分の1以下です。

超軽量

ligbox_lightbox2_009.png

昨年このサイトをリニューアルした際、当初は画像のオーバーレイ表示は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_lightbox2_010.png LigBox jQuery Plugin - ShopDD.net

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

使い方

ligbox_lightbox2_001.png

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

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

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

ligbox_lightbox2_005.png

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>
ligbox_lightbox2_006.png

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

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

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

ligbox_lightbox2_008.png

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を気に入った人はぜひ使ってみてください。

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

NetaGear RSS News

Now Loading