Lightboxのコードをバージョン2.7.1に更新

当ブログでは画像をページ内で拡大できるようLightboxを導入しています。

ページ遷移や別タブを開かずに大きい画像が見れたら便利でしょうということで導入しました。利用できるのはSeesaaブログのPC版表示のみでさらにすべての画像ではないので、どれほどの人が使っているのかはわかりませんが、価値はあるものと思っています。


Lightboxのバージョンが上がっていましたので、更新してみました。特には機能的な変更はないしそのままでも問題はないですが。

2.7.1に更新する方法


以前導入した手順と同じことをやっていきます。公式ページの説明通りです。

公式ページとGitHubのプロジェクトページ
Lightbox
http://lokeshdhakar.com/projects/lightbox2/

Releases · lokesh/lightbox2 · GitHub
https://github.com/lokesh/lightbox2/releases


ダウンロードします。

Lightboxを導入: DNAが支配する世界 : http://eltransportador.seesaa.net/article/270075781.html


これはこのブログにLightbox(2.5.1)を導入した時の記事で、手順をしっかり書いてます。

この記事の時と今回では違う部分があるので、その部分を書きます。

2.5.1と2.7.1との編集箇所の違い

基本はダウンロードしたファイルを自分のブログにアップロードするという点で違いはありません。

2.5.1導入の際にコードを編集する箇所がありましたが、そこが違っています。

以前の導入時にはlightbox.jsとlightbox.cssに画像ファイルの位置を記入していましたが、編集するのはCSSファイルの側だけで済むようになりました(2.6から)。

これによりlightbox.min.jsをそのまま使えるので楽。minify版はファイルサイズが少し小さい。(14.5KBと7.61KB。比率的にはかなり圧縮している)


CSSファイルの編集箇所はclose, loading, prev, nextの画像4つがそれぞれ2箇所で合計8箇所です。画像ファイルのURLを貼り付けるだけなので大した作業ではありません。

画像ファイルは以前と変わってないと思います。上げ直さず同じものをそのまま使っています。

2.6で変わっている点

2.6でいろいろ変わっていて。

上で書いたjsの中身は書き換える必要がなくなったこと。githubの更新履歴にもありますがjsからcssにcloseとloadingが移動しています。

2.6以降で利用する場合に画像リンクに入れる rel="lightbox" が data-lightbox attributeを利用するように変更になっています。HTML5対応としてそちらのほうが正しいとのことですが、これまで通りrel="lightbox"でも動きます。

2.5.1導入後ブログ運用上変えていた点


記事にも書いた2.5.1導入のあと、コード自体は更新していなかったですが運用方法を少し変えていました。

まずjQueryをGoogleのCDNからダウンロードさせるようにしました。理由は読み込みが速いのとほかのサイトでも同じものが利用されていた場合キャッシュが効くので、閲覧している人が同じものをダウンロードするのに通信や時間を割くなくて済む。

加えてLightbox.cssをブログのCSSに統合しCSSファイルの読み込み数を減らした。


どちらもブログの読み込みが多少でも速くなればと思ってやった対策です。

今回もjQueryはGoogleのCDNから、CSSは既存のブログのCSSファイル上に書き足すことで利用します。うまく動いたことを確認後CSSは改行を削る予定。すべての改行をなくすわけではなくセレクタで1行使うようにして、サイズを抑えつつ見やすさも残して。

最終的に導入


lightbox.min.jsをアップロードし、jQueryのコードも替えます。編集したlightbox.cssはブログのCSSに挿入します。

headに入れるコードは

2.5.1の時がこれ
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" defer="defer"></script>
<script src="https://eltransportador.up.seesaa.net/lightbox/lightbox.js" defer="defer"></script>


今回更新して
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" defer="defer"></script>
<script src="https://eltransportador.up.seesaa.net/lightbox/lightbox.min.js" defer="defer"></script>


deferはレンダリングをブロックしないために。

結果

2.7.1で既存のページでも問題なく動きました。


モンスター エナジー 355ml×24本
アサヒ飲料 (2012-05-08)
売り上げランキング: 274

"Lightboxのコードをバージョン2.7.1に更新" へのコメントを書く

お名前:[必須入力]
メールアドレス:
ホームページアドレス:
コメント:[必須入力]
認証コード:[必須入力]

※画像の中の文字を半角で入力してください。