Webデザイナーブログから学ぶホームページ制作

ホームページの画像をクリックしたときに、JavaScriptライブラリを使うことによって、背景が暗くなって画像がポップアップして浮かびあがってくる表示をすることができます。
画像をポップアップで拡大表示させる仕組みのことをlightbox「ライトボックス」とよびます。
画像をポップアップで拡大表示させるjQueryプラグイン「Sexy Light Box Plugin」の設定方法を解説します。

下記からJavaScriptライブラリ、のダウンロードを行ってください。
jQueryライブラリダウンロード
Lightbox.jsダウンロード
Lightbox.cssダウンロード

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

<meta charset="UTF-8">
<title>画像も動画もポップアップで拡大表示させるLightbox「sexy-lightbox」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="jQueryを使った画像も動画もポップアップ出来るjQuery「Lightbox jQuery」のご紹介を致します。">
<meta name="keywords" content="動画,ホームページ作成方法,jQuery,ホームページ制作,ポップアップ,lightbox,sexy-lightbox,画像">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/003/base.css" media="all" />
<script type="text/javascript" src="/sample/003/jquery.js"></script>
<script type="text/javascript" src="/sample/003/jquery.lightbox.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
      $('.lightbox').lightbox();
    });
  </script>

<a href="/sample/003/img/magazine01.jpg" width="960" title="sexy-lightbox" class="lightbox"><img src="/sample/003/img/magazine01.jpg" width="300" alt="sexy-lightbox" /></a>

実装サンプルを作りましたのでこちらでも確認してみてください。
Sexy Light Box デモ

以上で設定完了となりますが、簡単に設定ができますね。
ここでご紹介したlightbox「ライトボックス」は比較的綺麗に見えるlightbox「ライトボックス」ですが、この手のライブラリは沢山ありますので、色んなライブラリを試してみるのも良いかと思います。
画像にアクションを起こすことでユーザーへの意識を寄せることができます。Webサイトは見ている人が飽きずに楽しめるWebサイトづくりを心掛けましょう。