前にお客様サイト上に「お問い合わせフォーム」を掲載する際に
prototype.js で 「lightbox」を使ってビューっとウィンドウ出したことがあったなぁと思い今回「jQuery」で実装しなければならなかったため調べたところ
「prettyPhoto」というものがありました。
本家サイトをいろいろ見れば使い方がわかるんですが（なんだかすごいです。）
今回、「お問い合わせフォーム」として使用するため、下記のような規制がありました。
・下部に表示される「twitter」をはじめとするボタンが不要
・リンクではなくボタンで起動する
で、こんな感じで出来ました！
下記を「test.html」としました。
[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();" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^=’prettyPhoto’]").prettyPhoto();
});
</script>
</div>
</body>
</html>
[/html]
で、中に表示されるhtml （その１：inquiry.html）
[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>&nbsp;</dt>
<dd><input value="送信" type="submit"></dd>
</form>
</body>
</html>
<hr />
続いて、結果ページ result.html
<hr />
<!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>○○○○</dd>
<dt>メールアドレス（※）</dt>
<dd>abcd@efgh.ij</dd>
<dt>サイトアドレス<br>ホームページアドレス<br>（存在する場合のみ）</dt>
<dd>http://www.wwww.com/</dd>
<dt>タイトル</dt>
<dd>マイホームページ</dd>
<dt>内容</dt>
<dd>お花屋さんのサイト</dd>
</form>
</body>
</html>
[/html]
※本来はPHPとかでやるはずです。
構成は下記の通り
[html]
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
[/html]
サンプルはこちらに置きました↓
http://ivankov.iscw.jp/prettyPhoto/test.html
↓↓↓
↓↓↓
アーカイブダウンロードはこちら
ダウンロード
