jQuery版lightbox的なprettyPhotoを試してみました｜フリーフードファイター兼SE社長活動日記

アイ・エス・シー実験室より

前にお客様サイト上に「お問い合わせフォーム」を掲載する際に
prototype.js で「lightbox」を使ってビューっとウィンドウ出したことがあったなぁと思い今回「jQuery」で実装しなければならなかったため調べたところ
「prettyPhoto」というものがありました。

本家サイトをいろいろ見れば使い方がわかるんですが（なんだかすごいです。）
今回、「お問い合わせフォーム」として使用するため、下記のような規制がありました。
・下部に表示される「twitter」をはじめとするボタンが不要
・リンクではなくボタンで起動する

で、こんな感じで出来ました！
下記を「test.html」としました。

<!DOCTYPE html>
<html>
<head>
<title>jQuery lightbox clone – prettyPhoto – by Stephane Caron</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script src=”http://www.google.com/jsapi”></script>
<script>
google.load(“jquery”, “1.6”);
</script>
<link rel=”stylesheet” href=”css/prettyPhoto.css” type=”text/css” media=”screen” title=”prettyPhoto main stylesheet” charset=”utf-8″ />
<script src=”js/jquery.prettyPhoto.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javaScript”>
function openInquiry() {
$.prettyPhoto.open(‘inquiry.html?iframe=true&width=500&height=500′,’お問い合わせフォーム’,’内容を入力してください。’);

}
</script>
</head>
<body>
<div id=”main”>
<h2>Iframe JavaScriptから起動</h2>
<input type=”button” value=”click” onclick=”openInquiry();” />

で、中に表示されるhtml （その１：inquiry.html）

<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<TITLE>お問い合わせ</TITLE>
</head>
<body>
<form name=”form” action=”result.html” method=”get”>
<dt>お名前（※）</dt>
<dd><input name=”お名前” size=”50″ maxlength=”255″ value=”” type=”text”></dd>
<dt>メールアドレス（※）</dt>
<dd><input name=”メールアドレス” size=”50″ maxlength=”255″ value=”” type=”text”></dd>
<dt>サイトアドレス<br>ホームページアドレス<br>（存在する場合のみ）</dt>
<dd><input name=”ホームページアドレス” size=”50″ maxlength=”255″ value=”” type=”text”></dd>
<dt>タイトル</dt>
<dd><input name=”タイトル” size=”50″ maxlength=”255″ value=”” type=”text”></dd>
<dt>内容</dt>
<dd><textarea name=”内容” rows=”10″ cols=”30″></textarea></dd>
<dt> </dt>
<dd><input value=”送信” type=”submit”></dd>
</form>
</body>
</html>

続いて、結果ページ　result.html

※本来はPHPとかでやるはずです。

構成は下記の通り

prettyPhoto
│ inquiry.html
│ result.html
│ test.html
│
├─css
│ prettyPhoto.css
│
├─images
│ │
│ ├─fullscreen
│ │ 1.jpg
│ │ 2.jpg
│ │ 3.jpg
│ │ 4.jpg
│ │ 5.jpg
│ │ 6.jpg
│ │ high.gif
│ │ huge.gif
│ │ wide.gif
│ │
│ ├─prettyPhoto
│ │ ├─dark_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─dark_square
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─default
│ │ │ default_thumb.png
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │ sprite_next.png
│ │ │ sprite_prev.png
│ │ │ sprite_x.png
│ │ │ sprite_y.png
│ │ │
│ │ ├─facebook
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPatternBottom.png
│ │ │ contentPatternLeft.png
│ │ │ contentPatternRight.png
│ │ │ contentPatternTop.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─light_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ └─light_square
│ │ btnNext.png
│ │ btnPrevious.png
│ │ default_thumbnail.gif
│ │ loader.gif
│ │ sprite.png
│ │
│ └─thumbnails
│ flash-logo.png
│ quicktime-logo.gif
│ t_1.jpg
│ t_2.jpg
│ t_3.jpg
│ t_4.jpg
│ t_5.jpg
│
└─js
jquery-1.3.2.min.js
jquery-1.4.4.min.js
jquery.prettyPhoto.js