www.wanichan.com

Web > Expression > Tips > Webページの作成

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

最終更新日: 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 は以下のページあたりから入手できます。

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

オートサムネイル機能を使ったWebページを作成する

準備ができたら、Expression Webのオートサムネイル機能を使って写真ギャラリーページを作成します。 オートサムネイルを使ったWebページの作成方法については、私のExpression Web本に載せているので、説明を省略させていただきます。

検索と置換機能でLightbox.jsが動作するように処理する

検索と置換機能を使ってlightbox.jsが動くように属性値を設定します。

  1. 対象となるWebページを、[フォルダ一覧]作業ウィンドウからファイル単位、もしくはフォルダ単位で選択しておきます。
  2. [編集]→[置換]をクリック、もしくは[Ctrl]+[H]キーを押します。
  3. [検索と置換]ダイアログボックスの[HTMLタグ]タブをクリックします。
  4. [検索するタグ]には「a」を選択します。
  5. [置換の処理]には「属性値の設定」を選択します。
  6. [属性]には「rel」を指定し、[属性値]には「lightbox」と入力します。
  7. [検索対象]では「選択したページ」を選択します。
  8. [HTMLのルール]ボタンをクリックします。
  9. [HTMLのルール]ダイアログボックスの[次のタグを検索 <a>]の下の「新しいルール」をクリックします。
     HTMLのルール
  10. 下のボックスには下の図のように左側から
    [次の属性]、[href]、[次の値を含む]、[.jpg]と指定して、[OK]ボタンをクリックします。
    HTMLのルール
  11. 最後に[すべて置換]ボタンをクリックします。
  12. この置き換え処理は元に戻せません。続けてもよろしいですか?のメッセージが表示されるので、[はい]ボタンをクリックします。
スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ