1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 超軽量2KB以下のLightbox系jQueryプラグイン「Ligbox」!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

2012年から発売しているSONYのネットワークレコーダーの「nasne」がついに近日出荷が終了するとのアナウンスがされました。nasneとプレイステーション、スマートフォンをつ...

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

現在ソースネクストでは、VEGAS全製品を安く入手できるスーパーチャンスのキャンペーンを実施しており、最大で92%オフでVEGASシリーズの製品を販売しています!キャンペー...

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

EaseUS Softwareは、PC引っ越しソフト(データ移行ソフト)であるEaseUS Todo PCTrans Pro 10.5の最新版の公開にあたって、EaseUS Todo PCTrans Pro 10.5のライセンスコード...

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

先日の記事でNetaGearやDuelLinks.netでも「ホーム画面に追加」を実装して、WEBサイトをアプリのようにスマホのホーム画面に簡単に追加可能な「ホーム画面に追加」ボタンを...

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

久しぶりにNetaGearのアップデートを行いました。主な変更点は3つでNetaGearに何度かアクセスしている人に表示される「ホーム画面に追加する」ボタンが表示されて、スマホ...

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazonでは、Amazon Music Unlimitedへの新規登録で対象のAmazon Echoシリーズが50%OFFになるキャンペーンを開催中です!キャンペーン期間は2019年6月11日(火) 00時00分~6...

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

今回は、Google Chromeで通信ができない(オフライン)時にだけ表示されるゲームについて紹介したいと思います。すでに知っている人もいるかも知れませんが、Google Chromeに...

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

本日2019年6月8日より遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.net(デュエルリンクスどっとねっと)を公開しました!遊戯王デュエルリンクスのゲーム内で...

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

今回紹介するのは初心者でも誰でも簡単に動画編集が可能なソフトのMovavi Video Edittorを紹介したいと思います。動画編集ソフトもプロ用な多機能なものなど色々なものがあ...

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

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

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