1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 超軽量2KB以下のLightbox系jQueryプラグイン「Ligbox」!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

今回紹介するのは全世界で1,000万以上のユーザーがいるBlu-rayコピーソフトであるLeawo Blu-rayコピーです。Leawo Blu-rayコピーを使用すると、簡単にBlu-rayディスクのバ...

激安特価商品情報サイトの激安ShopDDを作りました!

激安特価商品情報サイトの激安ShopDDを作りました!

激安情報についてはこのブログで度々紹介していたのですが、この度激安・特価情報を専門に取り扱う新ブログの激安ShopDD(Gekiyasu ShopDD)を作成しました。こちらのブログ...

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

現在LEAWO製品が最大50%オフになる新年応援スペシャルキャンペーンを実施しています。キャンペーン期間は2020年2月3日(水)までとなっています。また、SNSでLeawoを応援して...

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

3,4ヶ月前のことになりますが、MOTOROLA Moto Zのバッテリーが死んでバッテリーを交換する手順の記事を書きました。当時は充電ケーブルを抜くと5分もせずに落ちるという状...

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

先日の記事で199円のミニ三脚についてのレビューにおいて、三脚上部の角度などが変更できればもっと自由度が上がって使いやすくなるということを書きました。そこで今回は...

無料でもらえるGoogle Nest miniが届いたのでレビュー!

無料でもらえるGoogle Nest miniが届いたのでレビュー!

先日の記事のGoogle Nest Miniが無料で手に入る!YouTube PremiumとGoogle Play Music会員が対象!でも紹介したGoogle Nest miniが届いたのでレビューを書きたいと思います...

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

Bluetoothでスマホ連動可能なBeyeahスマート体組成計&体重計が792円の超激安で販売中です。スマホとBluetoothで連動させることで、体重や体水分量・BMI・筋肉量・推定骨量...

Fire TV StickでIEEE802.11acが認識されない問題!

Fire TV StickでIEEE802.11acが認識されない問題!

先日のレビューも書いたFire TV Stickですが、実は一つ気になることがあったので同じようなことで困っている人の役に立てばと思い記事で残しておきたいと思います。それはF...

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

現在BOOK★WALKERでは、1月10日よりTVアニメが放映開始となる「とある科学の超電磁砲T」を記念して、とあるシリーズが最大80%オフのキャンペーンを実施しています。とある科...

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

今回は完全防水IPX7に対応したBluetoothスピーカーであるTribit StormBox bluetoothスピーカー BTS30を紹介したいと思います。お風呂場などで使用可能なIPX7に対応しており...

NetaGear RSS News

Now Loading

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
http://shopdd.net/ligbox/

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

使い方


ligbox_lightbox2_001.png
1 Ligboxをダウンロードしてきます。

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

ligbox_lightbox2_003.png
2 Ligboxフォルダを解凍します。

ligbox_lightbox2_005.png
3 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
4 cssフォルダ内にあるligbox.cssをWebサイト上のcssフォルダ内にコピーし、htmlのhead内に以下のコードを追加して読み込みます。

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


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

ligbox_lightbox2_008.png
6 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...