1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 超軽量2KB以下のLightbox系jQueryプラグイン「Ligbox」!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
PainterやVEGASなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンを実施中!

PainterやVEGASなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンを実施中!

現在ソースネクストの公式サイトでは、PaintShop、WinDVD、Painter、VideoStudio、CorelDRAWなどのCorel全製品とVEGAS Pro、ACID Pro、SOUND FORGE、SPECTRALAYERSなどのVE...

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

今回はYouTubeで出くわしたHTTP Error 400(Bad Request)が出て、YouTubeにアクセスできなくなってしまった時の解決方法を紹介したいと思います。この現象が発生してしまう...

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

日本郵便が無償で提供する年賀状ソフト「はがきデザインキット2019」がおすすめ!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログの独自ドメインがSSL対応したのでSSL化しました!

ついにFC2ブログで独自ドメインを使ってるブログもSSLに対応しました。FC2のサブドメインを使っているブログは2017年10月からSSL化されていましたが、有料プランである独自...

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

CASIO G-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスからしてみた!

今回はCASIOの時計のG-SHOCKタフソーラーの二次電池交換をWEB修理受付サービスから申請した時の流れを書きたいと思います。G-SHOCKタフソーラーの二次電池の場合は普通の時...

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

KADOKAWAの電子書籍が半額でさらにポイント50倍のニコニコカドカワ祭りがものすごい!

現在電子書籍ストアのBOOK☆WALKERで開催されているニコニコカドカワ祭り2018でものすごいキャンペーンを実施中です。KADOKAWA作品が19000点が半額でさらに45000点がコイン5...

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

以前に海外のAmazonを有効活用して安く買い物をしよう!という記事で簡単に海外のAmazon.comから輸入する方法を紹介しましたが、今回は海外Amazonで購入したものが不良品だ...

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

WonderFox Soft, Inc.は同社製品である新しいWonderFox HD Video Converter Factory Proを含む合計8製品のライセンスキーを無料配布するWonderFox 2018 Back to School Par...

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

みなさんもよく使っているであろうブラウザのChromeですが、タブを沢山開いているとメモリの消費量がすごいことになることがよくありますよね。そんな時におすすめなのがCh...

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

今回はWindows・Macどちらでも使える無料で使える3DキャラメイカーのVRoid Studioを紹介したいと思います。3D制作の知識がなくても誰でも簡単に自分だけのオリジナル3Dのキ...

NetaGear RSS News

Now Loading

Article

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

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

Social Links

Sponsored Link

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...