2Drops! » Lightbox http://www.2drops.jp アナログ好きなデジタル人間の頭の中 Tue, 29 Mar 2011 09:12:18 +0000 ja hourly 1 http://wordpress.org/?v=3.1.3 Lightbox 2.04をWoedpressで使う http://www.2drops.jp/2009/02/lightbox/ http://www.2drops.jp/2009/02/lightbox/#comments Sun, 01 Feb 2009 05:33:17 +0000 きさら http://www.2drops.jp/?p=108 今までHighslide JSを利用していたのですが、タグの記述がかなり面倒でした。
得に複数の画像をグループ化するのが・・・(^^;
ブログを書く環境が完全にLinuxに移行したので、またテキストエディタで下書き生活なんですよね。
簡単に記述できるものはないかと探して、最終的に[Lightbox JS](http://www.lokeshdhakar.com/projects/lightbox2/)で落ち着きました。

使うとこのような感じで画像が表示されます。


Red dragonflies / あかとんぼ

完全にいまさらな、という状態ですが、導入手順と使い方をメモしておきます。

### 手順1：ダウンロード

[Lightbox 2](http://www.lokeshdhakar.com/projects/lightbox2/)からダウンロードします。

わずか2クリックでダウンロード完了なので、英語が苦手でも問題無です。
zip形式なので、最近のPCなら解凍ソフトを入れなくても開けますね。

### 手順2：スクリプトの修正

以下の2つのファイルを修正します。
絶対パスで指定するので、ブログのようなテンプレートで全ページを生成する場合でも、きちんとファイルの場所を参照できます。

#### js/lightbox.js

48
49
50

LightboxOptions = Object.extend({
   fileLoadingImage:              'images/loading.gif',     
   fileBottomNavCloseImage:  'images/closelabel.gif',

上記の部分を、下記のように修正

48
49
50

LightboxOptions = Object.extend({
   fileLoadingImage:             '＜サイトURL＞/images/loading.gif',     
  fileBottomNavCloseImage: '＜サイトURL＞/images/closelabel.gif',

#### css/lightbox.css

16
17

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

上記の部分を、下記のように修正

16
17

#prevLink:hover, #prevLink:visited:hover { background: url(＜サイトURL＞/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(＜サイトURL＞/images/nextlabel.gif) right 15% no-repeat; }

### 手順3：アップロード

3つのフォルダ(css/js/images)をサイトのトップか、Wordpressの設定で「ブログのアドレス (URL)」に設定したところに配置します。
このブログだと http://www.2drops.jp/ 直下になります。

### 手順4：テーマの修正

header.phpの最後のほう**``から``**までに以下を追記します。

<?php endif; ?>
<script type="text/javascript" src="<?php bloginfo('home'); ?>/highslide/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = '<?php bloginfo('home'); ?>/highslide/graphics/';
</script>
<?php wp_head(); ?>

### 手順5：記事を書く

Lightboxを適用したいリンクを、以下のように記述します。
テキストならこのような感じ

<a href="画像のファイル名" rel="lightbox" title="開いた時に表示される説明">リンクの文字</a>

画像ならこのような感じ

<a href="画像のファイル名" rel="lightbox" title="開いた時に表示される説明"><img src="サムネイルのファイル名" alt="画像名"></a>

複数の画像をグループ化することもできます。
その場合は*[group_name]を半角英数で*記述します。同じ[group_name]がセットとなり、スライドショーで表示されます。

<a href="画像1のファイル名" rel="lightbox[group_name]" title="開いた時に表示される説明"><img src="サムネイル1のファイル名" alt="画像名"></a>
<a href="画像2のファイル名" rel="lightbox[group_name]" title="開いた時に表示される説明"><img src="サムネイル2のファイル名" alt="画像名"></a>
]]> http://www.2drops.jp/2009/02/lightbox/feed/ 0