画像オーバーレイプラグイン Lightbox+導入

  • 投稿日:
  • by
  • カテゴリ:

以前のブログでも使っていたLightbox+。今回もコレを使ってみようと思います。

 

■1
まずはプラグインの入手。以下からDLします。

Lightbox+

 

■2
DLしたファイルを解凍し、その中の以下のファイルを使用します。

blank.gif
close.gif
expand.gif
lightbox.css
lightbox_plus.js
loading.gif
next.gif
prev.gif
shrink.gif

 

■3
lightbox_plus.jsの内容を修正します。

301行目~

if (!anchor.getAttribute("href") || !rel.match('lightbox')) continue;

これを以下のように修正。

301行目~

//if (!anchor.getAttribute("href") || !rel.match('lightbox')) continue;
if (!anchor.getAttribute("href")) continue;
if (!anchor.getAttribute("href").match(/.+(jpg|JPG|gif|GIF|png|PNG)$/i)) continue;

Lightbox+を使うために本来rel属性を付与しなければいけないところ、↑のように修正することで画像ファイルを識別して動作するようになります。 過去の画像全部にrel書くなんて面倒だし。 以前のblogでも同じようにカスタマイズしていました。

さらに、

1023行目~

loadingimg:'resource/loading.gif',
expandimg:'resource/expand.gif',
shrinkimg:'resource/shrink.gif',
blankimg:'resource/blank.gif',
previmg:'resource/prev.gif',
nextimg:'resource/next.gif',
closeimg:'resource/close.gif',

これらも実際のパスに合わせて修正。

 

■4 各テンプレートの<head>~</head>の間に、以下の記述を追記。

<script type="text/javascript" src="<$MTBlogURL$>/lightbox_plus.js"></script>

<link rel="stylesheet" href="<$MTBlogURL$>/lightbox.css" type="text/css" />

青字部分は、ファイルのアップロード先に合わせて適宜修正。

 

■5 上記までの修正内容に合わせて、ファイルをアップロード。

 

以上で、かっちょよく画像が表示されるようになります。

お疲れ様でした。

 

今日のおまけ。

今朝のサンデーモーニングでの、サッカーの日本対北朝鮮戦のVTR後の張本氏の発言。

日本の国歌斉唱時の北朝鮮人観客のブーイングについて、「優秀な民族なんだから、そんなことやっちゃいかん」的な発言をしてました。

あぁ、そーいやこの人も在日だったなぁ、と。

なんだか朝からびみょーな気分になりました。