Expression WebでLightbox.jsを使ったWebページを作成するには
オートサムネイル機能を利用したWebページにおいて、そのリンク先の画像をLightbox.jsを利用してポップアップ表示する方法について説明します。
はじめに
自分の旅行記サイトや英語サイトでのPicture Galleryサイトでは、FrontPageやExpression Webでのオートサムネイル機能を利用して作成してきました。
「オートサムネイル」とは、とりあえず元画像をWebページに挿入したあとにその機能を実行すると、自動的にサムネイルを作成して元画像にリンクするというものです。
しかし、オートサムネイル機能では、ポップアップではなく、直接元画像に表示するという感じになり、ブラウザの［戻る］をクリックしないと元に戻れません。
そこで、Lightbox.jsを使って画像のポップアップ表示ができるWebページをExpression Webで作成する方法を説明します。
Lightbox.jsが利用できるように設定する
Lightbox 2.0 は以下のページあたりから入手できます。
スクリプトと画像素材をダウンロードしたら、画像素材を［フォルダ一覧］作業ウィンドウ（Expression Web 3以降は［フォルダーリスト］パネル）で、lightbox.js に使われる素材ファイルを入れる専用のフォルダを作成し、これらの素材をそのフォルダに入れます。
- C:\Users\<ユーザー名>\My Web Sites
- lightbox
- css
- lightbox.css
- images
- bullet.gif
- closelabel.gif
- loading.gif
- nextlabel.gif
- prevlabel.gif
- js
- builder.js
- effects.js
- lightbox.js
- prototype.js
- scriptaculous.js
- css
- index.html
- master.dwt
- lightbox
そのあと、lightbox.js ファイルを開いて、素材に使われる画像を絶対パスに書き換えます。独自ドメインを持っていない人の場合は、http://からはじまるパスを記述します。（48行目付近）
// -----------------------------------------------------------------------------------
//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: '/lightbox/images/loading.gif',
fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
そのあと、lightbox.css ファイルを開き、lightbox.js用のスタイルを追加します。これは相対パスでもOKです。上記階層の通りであれば、lightbox.cssを書き換える必要はありません。
#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; }
WebページにJSファイルとCSSファイルをリンクする
prototype.js、scriptaulous.js、lightbox.js および lightbox.css ファイルをそのWebページにリンクします。ダイナミックWebテンプレートファイル自体にそのリンクを作成すると手間要らずで便利ですね。
CSSファイルの場合、まず適用するWebページまたはDWTファイルを開き、デザインビューに切り替えた状態でフォルダ一覧から編集ウィンドウにドラッグ＆ドロップでリンクできます。
ただし、あいにく外部JSファイルをWebページにリンクする方法はコードビューに切り替えないとだめです。<head>と</head>の間に以下のようなタグを挿入します。たとえば「lightbox」フォルダ内の「js」フォルダに外部JSファイルを入れた場合、サイト直下のダイナミックWebテンプレートファイルやホームページファイル「index.html」には以下のように記述します。
<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>
オートサムネイル機能を使ったWebページを作成する
準備ができたら、Expression Webのオートサムネイル機能を使って写真ギャラリーページを作成します。 オートサムネイルを使ったWebページの作成方法については、私のExpression Web本に載せているので、説明を省略させていただきます。
検索と置換機能でLightbox.jsが動作するように処理する
検索と置換機能を使ってlightbox.jsが動くように属性値を設定します。
- 対象となるWebページを、［フォルダ一覧］作業ウィンドウ（Expression Web 3以降は［フォルダーリスト］パネル）からファイル単位、もしくはフォルダ単位で選択しておきます。
- ［編集］→［置換］をクリック、もしくは［Ctrl］＋［H］キーを押します。
- ［検索と置換］ダイアログボックスの［HTMLタグ］タブをクリックします。
- ［検索するタグ］には「a」を選択します。
- ［置換の処理］には「属性値の設定」を選択します。
- ［属性］には「rel」を指定し、［属性値］には「lightbox」と入力します。
- ［検索対象］では「選択したページ」を選択します。
- ［HTMLのルール］ボタンをクリックします。
- ［HTMLのルール］ダイアログボックスの［次のタグを検索 <a>］の下の「新しいルール」をクリックします。
- 下のボックスには下の図のように左側から
［次の属性］、［href］、［次の値を含む］、［.jpg］と指定して、［OK］ボタンをクリックします。
- 最後に［すべて置換］ボタンをクリックします。
- この置き換え処理は元に戻せません。続けてもよろしいですか?のメッセージが表示されるので、［はい］ボタンをクリックします。
イメージセットバージョンを利用するには
画像をクリックしたときに、前の画像、次の画像に切り替えるようにするには、［属性値］のボックスには lightbox[roadtrip]
と入力します。
