1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 超軽量2KB以下のLightbox系jQueryプラグイン「Ligbox」!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
完全防水IPX7のTribit MaxSound Plus Bluetoothスピーカーを使ってみた!

完全防水IPX7のTribit MaxSound Plus Bluetoothスピーカーを使ってみた!

今回紹介するのは防水のBluetoothスピーカーであるTribit MaxSound Plusの最新2019年モデルです。防水はIPX7に対応しており、お風呂場などで水に沈んで使用しても大丈夫な...

Fire TV Stickでプライムビデオなどをテレビで見よう!

Fire TV Stickでプライムビデオなどをテレビで見よう!

今回はAmazonプライムビデオをより便利に活用できるFire TV Stickを購入したので、レビューを書きたいと思います。Fire TV Stickを使えばプライムビデオをテレビの大画面で...

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

現在、楽天スーパーセールにてLINEが提供するスマートスピーカーClova Friendsが驚異の88%オフの1480円で販売されています。スマートスピーカー「Clova Friends SALLY」と...

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

本日12月6日9時より、Amazonでは年末の大セールとなるAmazon Cyber Monday(サイバーマンデー)2019を実施されます。開催期間は12月6日(金)9時00分から12月9日(月)23時...

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

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

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

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

前回までにDearMob iPhoneマネージャーでiTunesを使わないバックアップ方法、写真転送、音楽転送と3本シリーズ記事として書いてきました。iTunesを使用せずにDearMob iPhon...

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでは11月26日よりGearbestブラックフライデーセールを実施しています。Gearbestではスマホやタブレット、スマートウォッチなどの製品を数多く取り揃えた中国のネッ...

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

現在AmazonではWWTECKSのUSB充電電熱ベストが通常販売価格4,588円のところ1,294円で購入が可能となっています。超激安の1,294円で購入するには50%OFFクーポンと1000円引き...

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

本日より海外で人気のブラックフライデーセール(Black Friday)が日本のアマゾンでも初開催されます。ブラックフライデーセールの開催期間は11月22日[金]9:00から11月24日...

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