Expression WebでLightbox.jsを使ったWebページを作成する方法

Check

最終更新日: 2011/04/26(Tue) 23:40:32

昨今では広く使われている Lightbox.js を使ったWebページをExpression Webで作成する方法を紹介します。

はじめに

自分の旅行記サイトや英語サイトでのPicture Galleryサイトでは、FrontPageやExpression Webでのオートサムネイル機能を利用して作成してきました。

「オートサムネイル」とは、とりあえず元画像をWebページに挿入したあとにその機能を実行すると、自動的にサムネイルを作成して元画像にリンクするというものです。

しかし、オートサムネイル機能では、ポップアップではなく、直接元画像に表示するという感じになり、ブラウザの［戻る］をクリックしないと元に戻れません。そこで、最近流行のlightbox.jsを使ってみようかと思って、ちょっと変えてみました。

ここでは、Lightbox.jsを使った画像のポップアップ表示ができるWebページをExpression Webで作成する方法を紹介します。

Lightbox.jsが利用できるように設定する

Lightbox 2.0 は以下のページあたりから入手できます。

Lightbox JS v2.0

スクリプトと画像素材をダウンロードしたら、画像素材を［フォルダ一覧］作業ウィンドウで、lightbox.js に使われる素材ファイルを入れる専用のフォルダを作成し、これらの素材をそのフォルダに入れます。
lightbox.js ファイルを開いて、48行目あたりに記述されている素材に使われる画像を絶対パスに書き換えます。もしドメイン持ってる人であれば、http://からでなくても、/から指定してもよいでしょう
。
```
//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif', 
fileBottomNavCloseImage: 'images/closelabel.gif',
```

lightbox.cssにlightbox.js用のスタイルを編集します。これは相対パスでもOKだと思います。

#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; }

Lightboxのファイル構成

当サイトの場合、以下のように構成しています。

wanichan.com
- common
  - lightbox
    - css
      - lightbox.css
    - images
      - bullet.gif
      - closelabel.gif
      - loading.gif
      - nextlabel.gif
      - prevlabel.gif
    - js
      - builder.js
      - effects.js
      - lightbox.js
      - lightbox-web.js
      - prototype.js
      - scriptaculous.js

WebページにLightbox.jsとCSSファイルをリンクする

Lightbox.jsとCSSファイルをそのWebページにリンクします。ダイナミックWebテンプレートファイル自体にそのリンクを作成すると手間要らずで便利ですね。

CSSファイルの場合、まず適用するWebページまたはDWTファイルを開き、デザインビューに切り替えた状態でフォルダ一覧から編集ウィンドウにドラッグ＆ドロップでリンクできます。

ただし、あいにく外部JSファイルをWebページにリンクする方法はコードビューに切り替えないとだめです。<head>と</head>の間に以下のようなタグを挿入します。

<script type="text/javascript" src="lightbox.jsファイルへのパス"></script>

Lightbox 2.0では、たとえば「lightbox」フォルダ内の「js」フォルダに外部JSファイルを入れた場合は以下のように記述します。

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>