画像などをライトボックス化する方法は前回書いたとおりですが、今回はHTMLファイルなども表示する方法。

前回同様JQueryを使いますが、今回はtickboxというプラグインを使用します。
thickboxのソースはここでダウンロードできます。
ダウンロードする際、thickbox.js、thickbox.css、loadingAnimation.gifの3つを必ずダウンロードしてください。
※Downloadの項目にあるjs、css、gifのことです。

ダウンロードしたらthickbox.jsを開き、8行目を修正します。

修正したらhead部にthickbox.jsとthickbox.cssを読み込ませ、ライトボックス化したいaタグにclass=”thickbox”と入れることでライトボックス化できます。
複数の画像をギャラリーとして使う場合は、

というようにrel=”gallery-plants”とすることで、画像をnextやprevすることができます。

htmlファイルをライトボックス化する際は、

というように横幅と縦幅を指定する必要がありますので注意してください。