ThickBox3.1からLightboxに乗り換えた

Posted by kumacchi on 2008年3月5日 , 2 Comments

ThickBox3.1からLightboxに乗り換えました。
理由はThickBox3.1が重いからです。先日SlimboxからThickBoxに乗り換えたばっかりですが、
YouTubeの動画を貼り付けてもIEがエラーを表示しなくなったのはいいのですが、なんだか重いわけです。
FirefoxだとましですがIEだとちょっと重い、特に開いた画像を閉じる時に時間が掛かる。しかも、
ブラウザがスレイプニルだと異様に重くなる。最初はましだけどしばらく使ってると異様に重くなって耐えられない。
それにThickBoxは画面のレイアウトがおかしくなる。マージンが0pxになる感じで文字が画面の上にくっつくようになる。
テストのページで他のAjax画像表示アプリと見比べるとよくわかる。
一番の問題は重いというこれにつきます。そこで元祖Lightboxを試してみようと思ったわけです。

lightbox

現在LightboxにはLightboxとLightbox2.0が有ります。
Lightbox2.0はLightboxの後継で画像をうにょーんと表示したりするエフェクトがあったりで表示の方法がかっこよくなってたりします。
イメージセットで表示する機能も追加されています。

しかし、
画像の表示は１枚ずつでいいのでとにかく軽い奴がいいのでLightbox2.0ではなく元祖Lightboxを使わせていただくことにしました。

結果ですが、Lightboxに変えてみたらかなり軽くなりました。
Lightboxはjsファイル１個のみの約12KBそれに対して、
SlimboxやThicBoxはそれぞれjsファイル２個ずつで合計約35KBとLightboxの約３倍の容量が有ります。
Lightboxは無駄な機能がなく画像を１個表示する為だけのシンプルな作りなので軽いのも納得です。

↓↓↓Lightboxの設置方法は以下のとおり↓↓↓

 

１．Lightboxをダウンロードする

●Lightbox JS
http://www.lokeshdhakar.com/projects/lightbox/

上記のページから
lightbox.js
lightbox.css
overlay.png
loading.gif
close.gif
のファイルをダウンロードしてくる

２．ダウンロードした上記のファイルをサーバーにアップロード

Lightboxはjsフォルダとかcssフォルダに分けて設置するようになってないので、
そのままFTPでルートにアップロードしました。
わかる人はjsファイルとcssファイルをいじってパスを指定してあげるだけでフォルダを分けて設置することも可能です。

３．設置するページのヘッダにJavaScriptの読込タグを挿入。

下記のタグを<head>と</head> の間に挿入します。

<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

４．画像を貼り付ける場合は下記の様にイメージタグを記述します。

元画像とサムネイル画像が必要です。

<a href="CA350541.jpg" rel="lightbox" title="にゃーんこ２"><img src="CA350541t.jpg" border="0"></a>

 

●ライセンスについて
Lightoboxは「Commons Attribution 2.5 License」です。

基本的には以下のとおりで、商用利用も可能ですがクレジットを表示する必要があります。

・本作品を複製、頒布、展示、実演することができます。

・二次的著作物を作成することができます。
・表示. あなたは原著作者のクレジットを表示しなければなりません。

詳細は下記ページを参照確認してください。
http://creativecommons.org/licenses/by/2.5/
http://creativecommons.org/licenses/by/2.5/deed.ja

※現在2.5は廃止になっていて3.0になっているようですが基本的には同じです。

また、lightobox.jsファイル内のコメントには下記の様にあり。翻訳ソフトに通すと下段の意味になるようです。
ちゃんと作者を偉功を尊重して従うようにしましょう。

(basically, do anything you want, just leave my name and
link)
(基本的に、あなたが望む何でもして、ちょっと私の名前を残して、リンクしてください)

●ちょっとだけ改造

そういうわけで、改造というほどのものでもないのですが、
上記のライセンスを踏まえた上でLightboxで画像を開いた時に常に作者のクレジットを表示してそこにリンクを貼る様にしてみました。

lightbox03 
通常はこういう表示ですが

lightbox02
ちょととソースをいじって上の画像の様にクレジットを表示してリンクを張りました。

lightbox.jsの407行目あたりを下記の様に修正。

// objKeyboardMsg.innerHTML = 'press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';
objKeyboardMsg.innerHTML = '<a href="http://huddletogether.com/projects/lightbox/" target="_blank">Lightbox by Lokesh Dhakar</a>';

lightbox.cssの最後に

#keyboardMsg a{ text-decoration:none; }

を追加しました。

 

●Lightboxテストページ
https://blog.kumacchi.com/gagagagaga/lightbox.html

 

 

(Visited 71 times, 1 visits today)

タグ :

カテゴリ： ソフトウェア