Lightwindowを導入

画像をクリックした場合に、画面前方に浮き出て、こう・・・グワッとするLightbox。
今回はHTMLや画像、動画にも対応するLightwindowをこのblogに導入してみました。

[参考]ウェブクリエイターへの道:Light Window で、何でも Lightbox 風

■手順

  • Lightwindow.zip(v2.0)をダウンロード
  • Javascriptフォルダの各jsファイルを最新のものに差し替え

    lightwindow.jsの画像の相対パスを絶対パスに書き換え

    • 156行目
    • 157行目
    • 207行目
  • Lightwindowを使用したいリンクに以下のようにclass=lightwindowを付ける

    <a href=”http:~.com” class=”lightwindow”>text</a>

以上終了。
今回はprofileページを作ってみました!

Profile:Click Here!

ついでに画像でも試してみる。
Image:Click Here!

結構簡単でした。視覚効果的には抜群ですね。

コメントを残す

メールアドレスが公開されることはありません。