1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 超軽量2KB以下のLightbox系jQueryプラグイン「Ligbox」!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

前回の記事のFLEXISPOT 電動式昇降デスク E3シリーズをより良く使えるようにするために、今回はオプション的なパーツである「FLEXISPOT CPU冷却ホルダー スタンディングデ...

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを整理しようと思った際に、一つ一つメールを選択して削除するのはものすごく大変なので、特定のメールを一括選択して削除をしたいですよね。ですが、Gmailの...

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

今回は最強のPCデスクであるFLEXISPOT 電動式昇降デスク E3シリーズを紹介したいと思います。このFLEXISPOT 電動式昇降デスク E3シリーズはなんと電動式で高さを調節可能な...

ダイソーのLANケーブル延長コネクターを買ってみた!

ダイソーのLANケーブル延長コネクターを買ってみた!

今回紹介するのはダイソーで売っているLANケーブル延長コネクターです。LANケーブルを少しだけ延長したい場合、長いLANケーブルを買い直すのは少しもったいない気がします...

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

今回紹介するのはソフトウェアのアンインストールをサポートしてくれるソフトのGeekUninstallerです。普通にアンインストールする際にも使えるのですが、このソフトの良い...

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

今回紹介するのはサイトのFaviconを様々なデバイスに対応した状態で一括変換してくれる「Real Favicon Generator for all platforms」です。スマートフォンのiOS/Android、...

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

現在ソースネクストでは、全製品が衝撃プライスのThe Chance Ultraキャンペーンとして、プロ用映像制作ソフトの最新版となるVegas Pro 16シリーズや知識がなくても作曲可能...

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

今回はWindowsを使っていて画像ファイルのサムネイル(縮小表示)が白くなって正常に表示されない問題が発生したときの解決方法を紹介したいと思います。先日スクリーンショ...

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

現在、Motorola公式ショップではモトローラ創立90週年 春のmoto mods割引キャンペーンが実施されています。moto Z、moto Z play、moto Z2、moto Z2 play、moto Z3、moto Z3...

NetaGear RSS News

Now Loading

Article

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

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

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

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