<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Sexy Lightbox2 | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
<script src="/content/lib/mootools/mootools-1.2-core-yc.js" type="text/javascript"></script>
<script src="/content/lib/sexy_lightbox2/sexylightbox.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
new SexyLightBox();
new SexyLightBox({find:'sexywhite',color:'white', OverlayStyles:{'background-color':'#000'}});
});
</script>
<link rel="stylesheet" href="/content/lib/sexy_lightbox2/sexylightbox.css" type="text/css" />
<style type="text/css">
#img_container ul { display:block; padding:0; margin:0; list-style:none; }
#img_container ul li { display:inline; margin:0 10px 0 0; padding:0; }
#img_container ul li a img { border:3px solid #ccc; }
#img_container ul li a:hover img { border:3px solid #ff6699; }
#login { width:95%; margin:0 auto; padding:0; border:0; background:transparent url(/content/lib/sexy_lightbox2/sexyimages/user.png) no-repeat left bottom; }
#login legend { font-weight:bold; margin:0; padding:0; }
#login p { margin:5px 0; }
#login input.txt { width:146px; height:22px; border:1px solid #ccc; }
#login .right { text-align:right; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1><a href='http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2'>Sexy Lightbox2</a> | 設置サンプル</h1>
<h2>テキストリンク</h2>
<p><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" rel="sexywhite">画像を「白枠」でセクシーに表示</a></p>
<p><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" rel="sexylightbox">画像を「黒枠」でセクシーに表示</a></p>
<h2>画像リンク</h2>
<p><a href="/content/img/pic1.png" rel="sexylightbox" title="<a href='http://krispykreme.jp/index.html'>Krispy Kreme Doughnuts</a>"><img src="/content/img/pic1-thumb.png" alt="" /></a></p>
<h2>画像をグループ化してギャラリー表示</h2>
<div id="img_container">
<ul>
<li><a href="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" rel="sexylightbox[group1]" title="クリスピー・クリーム・ドーナツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt=""/></a></li>
<li><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" rel="sexylightbox[group1]" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt=""/></a></li>
<li><a href="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2.jpg" rel="sexylightbox[group1]" title="CAFE EAT@代官山"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt=""/></a></li>
</ul>
</div>
<br style="float:none; clear:both;" />
<h2>インラインコンテンツ</h2>
<div id="myOnPageContent" style="display:none;">
<a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" width="75" height="75" alt="クリスピー・クリーム・ドーナツ" align="left" style="margin:0 5px 5px 0; border:5px solid #af632f;" /></a>
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。1時間20分も並んでGETしまいた！ドーナツの箱がピザの箱みたいでアメリカン！よくハリウッド映画で警察官がドーナツよく食べてるシーンがあるけど、まさにああいうイメージ！さぞかし甘くて巨大なのかと思ってたら、意外とほどよい甘さでこぶり。生地はややわらかくてふんわり。想像していたのと大きさも味も違って、そのギャップにびっくりでしたｗ
</div>
<p>
<a href="/content/lib/sexy_lightbox2/#TB_inline?height=200&width=400&inlineId=myOnPageContent" rel="sexylightbox" title="Krispy Kreme Doughnuts">インラインコンテンツ表示</a>
</p>
<p>
<a href="/content/lib/sexy_lightbox2/#TB_inline?height=150&width=300&inlineId=myOnPageContent" rel="sexylightbox" title="Krispy Kreme Doughnuts">インラインコンテンツ表示（スクロールあり）</a>
</p>
<h2>インラインフレームコンテンツ</h2>
<p><a href="http://www.google.com?TB_iframe=true&height=450&width=800" rel="sexylightbox" >Google</a></p>
<h2>Ajaxコンテンツ</h2>
<p><a href="/content/lib/sexy_lightbox2/data.html?height=210&width=455" rel="sexylightbox" title="Contenido cargado via AJAX.">外部ファイル読み込み</a></p>
<p><a href="/content/lib/sexy_lightbox2/login.html?height=160&width=300" rel="sexylightbox" >ログイフォーム</a></p>
<p><a href="/content/lib/sexy_lightbox2/video.html?height=390&width=465" rel="sexylightbox" >You Tube</a></p>
</body>
</html>