画像のポップアップ(Lightbox)

2010年04月02日

サムネイル画像をクリックしたとき、別ウィンドウやポップアップで表示せずにその場でかっこよく出す方法です。

上記のような感じで画像を表示する方法を「ライトボックス」といいます。


JQueryを使用して表現する方法です。

まず、JQueryとLightboxのプラグインをダウンロードします。

ダウンロードしたファイルをすべて同じ場所にアップロードします(画像もです)。

次にヘッダーに記述します。

1
2
3
4
5
6
7
8
9
10
11
12
<head>
  <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
  <link rel="stylesheet" src="lightbox.css" media="screen" />
  <script type="text/javascript" src="lightbox.js"></script>
  <script type="text/javascript">
  <!--
   $(function() {
     $('.lightbox').lightBox();
   });
 //-->
  </script>
</head>

そして、ライトボックスにしたい画像をリンクにします。

1
2
3
<body>
  <a href="表示画像" class="lightbox" title="xxx"><img src="サムネイル" width="xx" height="xx" alt="xx" /></a>
</body>

リンクタグに class=”lightbox” とすることで、表示できます。

コメントする ：コメント(0) ：トラックバック(1)
カテゴリ
関連記事

コメント：0件

  1. コメントはありません。
投稿者名
E-Mail

メールアドレスは公開いたしません
URL
コメント

トラックバック：1件

  1. [...] This post was mentioned on Twitter by のぶ. のぶ said: 画像のポップアップ(Lightbox) http://is.gd/baBIs [...]
    Tweets that mention 画像のポップアップ(Lightbox) -- Topsy.com
ページのトップへ

artprojectteam & festiva Tweet

Loading..