<!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しまいた!ドーナツの箱がピザの箱みたいでアメリカン!よくハリウッド映画で警察官がドーナツよく食べてるシーンがあるけど、まさにああいうイメージ!さぞかし甘くて巨大なのかと思ってたら、意外とほどよい甘さでこぶり。生地はややわらかくてふんわり。想像していたのと大きさも味も違って、そのギャップにびっくりでしたw </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>