THE HAM MEDIA BLOG

ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
photo
Lightbox
javascript
jquery
画像
写真

ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法

とある友人が、先日エントリーした「札幌の花火大会を見てきた:フォトアルバム」をみて、
「写真をクリックしたら、画面に綺麗に表示されるJavaScript、
 それの導入方法が知りたい。!」
という様な連絡があった。

メールで書いて送ろうかとも思ったんだけど、
自分でも再度復習を兼ねて、ブログのエントリーにしてみた。

以前にもエントリーしたことがあるのですが、

今回もjQueryとそのプラグインを使って、 ブログとかサイトで写真や画像をLightboxを使って表示させる方法を説明します。
写真を張って、その写真へのリンクをつけるだけで、
自動的にLightboxで表示させる方法も書いておきます。

ちなみに以前のエントリーは関連エントリーを参照してください。

まずはjQueryを使えるようにする

今回もjQueryを使ってのものになります。

jQueryはサイトからダウンロードしたのをアップしてリンクする方法と、
Google AJAX Libraries APIを使う方法があります。

Google AJAX Libraries APIを使う方が楽なので、
今回はそれを使った方法で説明します。

まずはheadの中これを指定

<script src="http://www.google.com/jsapi" 
 type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1");
</script>

この二つのscriptでjQueryを使えるようにして、おきます。

google.load("jquery", "1");
この時の右側の1を入れる事で、
jQueryの1.x.xの最新バージョンが自動的に使えるようになります。

次はLightboxを自動的に使う為のスクリプト

次にLightboxを自動的に使う為のスクリプトの説明。
Lightboxよりも先に持ってきたのは、この設定が先に必要だからです。

下記のソースをコピーしてメモ帳か何かに貼付けて、
適当な名前をつけて、拡張子を.jsにして保存して、
先ほどのjqueryのscriptを指定した真下でファイルを指定してください。

$(document).ready(function(){    
  $('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
     .addClass("lightbox");
    $('a.lightbox').lightBox();
});
<script src="メモ帳にコピーして保存したファイル" 
 type="text/javascript"></script>

追記:2012/10/18
過去のエントリーだからとそのままにしてしまっていましたが、コメントで質問がありましたのでその回答として追記しておきます。
上記の記述はすでに修正をしていますが、これまでは[@attr]という現在では使われなくなった形で記載をしていました。
@をつけての属性セレクターはjQuery1.2で非推奨となり、そして1.3以降使えなくなっております。
Release:jQuery 1.3 - jQuery Wiki
1.2より前のバージョンでは、セレクターの部分で今のCSSセレクタを基準として作られたSizzleエンジンではなくて、XMLのセレクタを基準として作られたXPathが利用されていたため、属性セレクタを利用する際は"@"を使っていたという、そんな過去のお話。

$('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')
 .addClass("lightbox");

追記:2012/10/18
$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]')
 .addClass("lightbox");

この部分で、jpgとgif、pngの拡張子がリンクされた部分に、
自動的にclass="lightbox"のクラスをつけるようになります。

そして、
$('a.lightbox').lightBox();
この部分で、
<a href="##.jpg" class="lightbox"><img src="##.jpg" /></a>
↑このように、class="lightbox"をもった画像へのリンクがあれば、
lightBoxを動作させるようになります。

あとはLightboxを使うように指定

あとは、jQuery lightBox pluginから、
必要部分をダウンロードしてきて、設定をする。

設定が必要なのは画像へのリンク部分の指定。

使うのは「jquery.lightbox-0.5.min.js
これの14行目に、必要な画像へのリンクがあるので、
各自ブログやサイトに合わせてそれを指定する。

imageLoading、imageBtnPrev、imageBtnNext、
imageBtnClose、imageBlank

この5つへの画像のリンクが必要となるので忘れずに。

画像とJavaScriptと画像を全てアップしておき、あとはscriptとcssをリンクさせる。

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

JavaScriptの指定の順序

上の説明までで、いくつかのJavaScriptを読み込むことになったのだが、
読み込む順番に注意してもらいたい。

必ず上で説明した順番通りにscriptを指定する必要があり、
順番が違うだけでも動作しなくなる。

jQuery→classをつけるスクリプト→lightbox
この順番を間違えないように。

HTMLでの画像の指定

あとは画像へのリンクを下記のように指定すればいいだけ。

<a href="##.jpg"><img src="##.jpg" /></a>

以上の設定を終えて、画像を表示させてクリックしたときに、
画面が少し暗くなって、前面に画像が表示されるようになれば完成。

◆プレビュー

ハムロゴ

ブログやサイトのアクセントとして導入してみてはいかがでしょう。

関連エントリー:
この記事へのコメント
最後のプレビューですが、当方の環境ではライトボックスで表示されません。
ライトボックスで普通に表示されるサイトも有るのですが(例えばココは普通にライトボックス化されます)

http://arinogotokuatumarite.blog19.fc2.com/blog-entry-144.html

これはブラウザの設定等に因るものでしょうか?

環境はMAC FIREFOX16.0.1です。
Posted by minoruthreat at 2012年10月18日
>minoruthreat さん

コメントありがとうございます。
現在意図通りに動かないのは、おそらくこのseesaaブログの仕様で、
画像パスの最後に不要な文字が入るようになってしまいました。
そのために現在はLightboxで開かなくなってしまっているようです。

PCの環境ではなく、システムの関係だったことだけご連絡しておきます。
Posted by ハム at 2012年10月18日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/103880838
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。