jQuery pluginマルチウィンドウ
- ColorBox〔カスタマイズ性に富んだlightboxプラグイン〕
- prettyPhoto a jQuery lightbox clone〔jQuery版lightboxベース〕
- ThickBox〔画像スライドショー、外部ファイルや動的にコンテンツを読み込んで例や表示〕
- yoxview〔Flickrの写真セット、Picasaのアルバム、YouTubeの再生リストなどをURLを指定するだけで簡単に一覧表示できる多言語対応のLightbox風jQueryプラグイン〕
- TopUp beta〔画像や動画ファイルをLightbox風にポップアップ表示（jQuery UI使用）〕
ColorBox
カスタマイズ性に富んだlightboxプラグイン
unknown
ColorBox
［JS］jquery.js v1.1.3.2、jquery.colorbox.js
［CSS］colorbox.css、各種カスタム用CSS
［CSS］colorbox.css、各種カスタム用CSS
カスタマイズ性に富んだおしゃれなlightboxを作成できるjQueryプラグイン。
4種類のスタイルが用意されています。 画像のポップアップ表示、画像をグループ化してギャラリー表示したり、Ajaxコンテンツ、Flashムービー、インラインフレームなどのコンテンツを簡単にポップアップ表示することができます。
設置イメージColorBoxの設置サンプルサンプルを見る
<!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>ColorBox | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$("#flash").colorbox({contentAjax:"/content/demo/flash.html"});
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
});
</script>
<!-- CSS -->
<link type="text/css" media="screen" rel="stylesheet" href="/content/lib/jquery/colorbox/colorbox.css" />
<link type="text/css" media="screen" rel="stylesheet" href="/content/lib/jquery/colorbox/example2/colorbox-custom.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="/content/lib/jquery/colorbox/example2/colorbox-custom-ie.css" title="example" />
<![endif]-->
</head>
<body>
<div id="wrap">
<h1><a href='http://colorpowered.com/colorbox/'>ColorBox</a> | 設置サンプル</h1>
<!-- CODE -->
<ul>
<li><a class="cpModal" href="http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg" title="アボガド シーザーサラダ">1枚の画像をポップアップ</a></li>
<li><a class="cpModal" href="http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg" rel="platinum_lounge" title="アボガド シーザーサラダ">複数枚の画像をグループ化してギャラリー表示</a></li>
<li><a class="cpModal" href="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381.jpg" rel="platinum_lounge" title="アボガド刺">複数枚の画像をグループ化してギャラリー表示</a></li>
<li><a class="cpModal" href="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89.jpg" rel="platinum_lounge" title="アボガドとベーコンのピザ">複数枚の画像をグループ化してギャラリー表示</a></li>
<li><a id="ajax" href="/content/demo/ajax.html">外部ファイルをAjaxで取得して表示</a></li>
<li><a id="inline" href="#">ページ内のコンテンツをインライン表示</a></li>
<li><a id="flash" href="http://www.youtube.com/watch?v=rfqNXADl3kU" title="THE LEGEND of Hamster on a piano and pop corn! 5 MILLION VIEWS! THANKYOU ALL!">Flashムービーや動画を埋め込み</a></li>
<li><a id="google" href="http://www.google.com">指定したURLのページをインラインフレーム内に表示</a></li>
</ul>
<!-- This contains the hidden content for inline calls -->
<div style="display:none">
<div id="inline-content">
<div class="cf" style="padding:10px">
<div style="float:left;width:240px; margin-right:10px;"><a href="http://www.flickr.com/photos/22559849@N06/3273696493/" title="ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" width="240" height="180" alt="ハニートースト@アボガドダイニング Platinum Lounge" /></a></div>
<h3>ハニートースト@アボガドダイニング Platinum Lounge</h3>
<p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！</p>
</div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
prettyPhoto a jQuery lightbox clone
jQuery版lightboxベース
unknown
prettyPhoto a jQuery lightbox clone
Firefox 3.0 (Mac/PC/Linux)、Firefox 2.0 (Mac/PC)、Safari 3.1.1 (Mac)、IE 6.0 (PC)、IE 7.0 (PC)
［CSS］prettyPhoto.css
［JS］jquery.js、jquery.prettyPhoto.js
［JS］jquery.js、jquery.prettyPhoto.js
jQuery lightBoxベースで、画像をポップアップ表示するときの枠が角丸になっているタイプ。 Flashコンテンツをポップアップ表示したり、単一画像のポップアウトや画像をグループ化してギャラリーとしてポップアップすることができます。 タイトル表示のありなしや、説明文のありなしなども指定することができます。
設置イメージ設置サンプルサンプルを見る
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/prettyphoto/prettyPhoto.css" />
<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(function(){
$("a[rel^='prettyOverlay'],a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed:'normal', /* fast/slow/normal */
padding:40, /* padding for each side of the picture */
opacity:0.35, /* Value betwee 0 and 1 */
showTitle:true, /* true/false */
allowresize:true /* true/false */
});
});
</script>
<style type="text/css">
ul.gallery { list-style:none; margin:0 0 10px 0; list-style:none; }
ul.gallery li { display:block; float:left; margin:0 5px 0 0; }
ul.gallery li a { padding:2px; display:block; border:4px #9db2b9 double; line-height:0; }
ul.gallery li a:hover { border:4px #000 double; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/">prettyPhoto a jQuery lightbox clone</a></p>
<h2>Gallery（タイトルあり）</h2>
<ul class="gallery cf">
<li><a href="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_s.jpg" width="75" height="75" alt="サインがいっぱい@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3064/3031535599_2f8b454232.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_s.jpg" width="75" height="75" alt="レバ刺@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3217/3031535573_6e541be249.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_s.jpg" width="75" height="75" alt="明太子玉子焼き@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_s.jpg" width="75" height="75" alt="モツ鍋@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_s.jpg" width="75" height="75" alt="モツ鍋@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" width="75" height="75" alt="モツ鍋@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581.jpg" width="75" height="75" alt="ハツ刺@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_s.jpg" width="75" height="75" alt="ハツ刺@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3143/3032374956_30e2874e30.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3143/3032374956_30e2874e30_s.jpg" width="75" height="75" alt="鳥皮サラダ@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" width="75" height="75" alt="モツ鍋の〆@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_s.jpg" width="75" height="75" alt="モツ鍋@鳥小屋" /></a></li>
<li><a href="http://farm4.static.flickr.com/3243/3032374798_cec6385d35.jpg" rel="prettyPhoto[gallery1]"><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_s.jpg" width="75" height="75" alt="モツ鍋の〆@鳥小屋" /></a></li>
</ul>
<h2>Gallery（タイトルなし）</h2>
<ul class="gallery cf">
<li><a href="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3064/3031535599_2f8b454232.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3217/3031535573_6e541be249.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3143/3032374956_30e2874e30.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3143/3032374956_30e2874e30_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3243/3032374798_cec6385d35.jpg" rel="prettyPhoto[gallery2]"><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_s.jpg" width="75" height="75" alt="" /></a></li>
</ul>
<h2>単一画像のポップアップ</h2>
<h3>説明文（HTML可）あり</h3>
<ul class="gallery cf">
<li><a href="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" rel="prettyPhoto" title="<a href='http://www.flickr.com/photos/22559849@N06/3032375082/' target='_blank' >This will open Google.com in a new window</a>"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" width="75" height="75" alt="モツ鍋@鳥小屋" /></a></li>
</ul>
<h3>説明文なし</h3>
<ul class="gallery cf">
<li><a href="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" rel="prettyPhoto" title=""><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" width="75" height="75" alt="モツ鍋@鳥小屋" /></a></li>
</ul>
<h2>Flashコンテンツ</h2>
<p><a href="/content/media/flash/mv003b.swf" rel="prettyPhoto;width=500;height=400;flashvars=clip_id=173714&server=vimeo.com&autoplay=0&fullscreen=1&md5=0&show_portrait=0&show_title=0&show_byline=0&context=&context_id=&force_embed=0&multimoog=&color=00ADEF">Flashムービー</a></p>
</div>
</body>
</html>
ThickBox
画像スライドショー、外部ファイルや動的にコンテンツを読み込んで例や表示
unknown
ThickBox v3.1
IE 6.0+、Firefox 2.0.0.6+、Opera Win 9.0+/Mac 9.10+、Safari Mac 2.0.4+
MIT＆GNU一般公的使用許諾（個人利用であれば再配布・改変可）
jquery.js v1.2.6、thickbox.js
リンク（テキストまたはサムネイル画像）をクリックすると、現在のページ上に原寸大画像をスタイルシートでレイヤー表示するだけでなく、 IFRAMEやAjaxコンテンツでHTMLファイルを読み込んでレイヤー表示できるJSライブラリです。
ThickBoxを使用するには、「jQuery.js」ライブラリも必要です。最新版のjQueryはjQueryのサイトからダウンロードできます。 ソースの読み込みを軽くしたい場合は、「thickbox.js」（12KB）から改行やスペースなどを取り除いた軽量版の「tickbox-compressed.js」（6KB）の方を使いましょう。
大きな画像など、画像の読み込みに時間がかかる場合は、読み込まれるまでローディングイメージ（loadingAnimation.gif）が表示されます。
ローディングイメージは「thickbox.js」にあるvar tb_pathToImage = "images/loadingAnimation.gif";のパスを設置場所に応じて変更してください。
原寸大表示時に画像下部にキャプション（画像のタイトルや説明文）を表示したい場合は、A要素のTITLE属性に記述します。 何も表示したくない場合は、TITLE属性を空にするか省略してください。
インナーコンテンツ
インラインフレーム
イメージギャラリー設置サンプルサンプルを見る
<!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>設置サンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/thickbox3/thickbox.js"></script>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<link rel="stylesheet" href="/content/lib/thickbox3/thickbox.css" type="text/css" />
<style type="text/css">
div.gallery {
margin:1em 0; padding:0;
}
div.gallery ul {
margin:0; padding:0;
list-style:none;
overflow:hidden;
}
div.gallery li {
margin:0 0 1em 10px; padding:0;
display:block;
float:left;
width:160px;
text-align:center;
background-color:#eee;
border:1px solid #ccc;
}
div.gallery p {
margin:0 0 5px 0; padding:0;
}
div.gallery div.title {
margin:0 0 10px 0; padding:2px 5px;
background-color:#ccc;
color:#fff;
font-weight:bold;
}
div.gallery div.image {
margin:10px auto; padding:0;
width:140px; height:120px;
overflow:hidden;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href="http://jquery.com/demo/thickbox/">Thickbox 3.1</a></p>
<div id="content">
<h2>インナーコンテンツ</h2>
<p><input alt="#TB_inline?height=100&width=400&inlineId=myOnPageContent" title="タイトル部分" class="thickbox" type="button" value="表示" /> ThickBox内に下記の赤枠で囲まれている要素の内容を表示します。</p>
<div id="myOnPageContent" style="border:1px solid red; padding:10px;">
<div><a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" width="75" height="75" alt="くまさんケーキ" align="left" style="border:3px solid #000; margin:0 10px 5px 0;" /></a>
むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写！どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかｗ
<br clear="all" />
</div>
</div>
<p><a href="#TB_inline?height=200&width=360&inlineId=hiddenModalContent&modal=true" class="thickbox">モーダルコンテンツを表示.</a></p>
<div id="hiddenModalContent" style="display:none;">
<div style="text-align:center;margin:0 auto;">
<a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" width="320" height="240" alt="くまさんケーキ" /></a>
<p>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。<br>新宿アルタの地下で見かけて思わず激写！<br>どこから食べようか考えちゃうよね。<br>とりあえず耳からいっておきますかｗ</p>
<input type="submit" id="Login" value=" 閉じる " onclick="tb_remove()" />
</div>
</div>
<h2>インラインフレームコンテンツ</h2>
<ul>
<li><a href="index.php?keepThis=true&TB_iframe=true&height=400&width=600" title="PHP & JavaScript Room" class="thickbox">index.phpを表示</a></li>
<li><a href="http://www.google.co.jp?keepThis=true&TB_iframe=true&height=400&width=600" title="Google" class="thickbox">Googleを表示</a></li>
<li><a href="/content/libthickbox3/iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="HTMLコンテンツをインラインフレーム表示" class="thickbox">Open iFrame Modal</a></li>
</ul>
<h2>シングルイメージ</h2>
<p>
<a href="/content/libgalleryimages/image.jpg" title="クリスマスパーティー" class="thickbox"><img src="/content/libgalleryimages/thumb/image.jpg" alt="Image" /></a>
</p>
<h2>ギャラリーイメージ</h2>
<div class="gallery">
<ul>
<!-- Achievement [start] -->
<li>
<div class="cf">
<div class="title">Achievement</div>
<p>
<a href="/content/libgalleryimages/achievement-1.jpg" title="Achievement #1" class="thickbox" rel="achievement"><img src="/content/libgalleryimages/thumb/achievement.jpg" width="140" height="120" alt="Achievement" /></a>
<a href="/content/libgalleryimages/achievement-2.jpg" title="Achievement #2" class="thickbox hide" rel="achievement">#2</a>
</p>
</div>
</li>
<!-- Achievement [end] // -->
<!-- Imagenation [start] -->
<li>
<div class="cf">
<div class="title">Imagination</div>
<p>
<a href="/content/libgalleryimages/imagination-1.jpg" title="Imagination #1" class="thickbox" rel="imagination"><img src="/content/libgalleryimages/thumb/imagination.jpg" width="140" height="120" alt="Imagination" /></a>
<a href="/content/libgalleryimages/imagination-2.jpg" title="Imagination #2" class="thickbox hide" rel="imagination">#2</a>
<a href="/content/libgalleryimages/imagination-3.jpg" title="Imagination #3" class="thickbox hide" rel="imagination">#3</a>
<a href="/content/libgalleryimages/imagination-4.jpg" title="Imagination #4" class="thickbox hide" rel="imagination">#4</a>
</p>
</div>
</li>
<!-- Imagination [end] // -->
<!-- Christmas Party [start] -->
<li>
<div class="cf">
<div class="title">Christmas Party</div>
<p>
<a href="/content/libgalleryimages/christmas-party-1.jpg" title="Christmas Party #1" class="thickbox" rel="christmas-party"><img src="/content/libgalleryimages/thumb/christmas-party.jpg" width="140" height="120" alt="Christmas Party" /></a>
<a href="/content/libgalleryimages/christmas-party-2.jpg" title="Christmas Party #2" class="thickbox hide" rel="christmas-party">#2</a>
<a href="/content/libgalleryimages/christmas-party-3.jpg" title="Christmas Party #3" class="thickbox hide" rel="christmas-party">#3</a>
<a href="/content/libgalleryimages/christmas-party-4.jpg" title="Christmas Party #4" class="thickbox hide" rel="christmas-party">#4</a>
<a href="/content/libgalleryimages/christmas-party-5.jpg" title="Christmas Party #5" class="thickbox hide" rel="christmas-party">#5</a>
<a href="/content/libgalleryimages/christmas-party-6.jpg" title="Christmas Party #6" class="thickbox hide" rel="christmas-party">#6</a>
<a href="/content/libgalleryimages/christmas-party-7.jpg" title="Christmas Party #7" class="thickbox hide" rel="christmas-party">#7</a>
<a href="/content/libgalleryimages/christmas-party-8.jpg" title="Christmas Party #8" class="thickbox hide" rel="christmas-party">#8</a>
<a href="/content/libgalleryimages/christmas-party-9.jpg" title="Christmas Party #9" class="thickbox hide" rel="christmas-party">#9</a>
</p>
</div>
</li>
<!-- Christmas Party [end] // -->
<!-- Technology [start] -->
<li>
<div class="cf">
<div class="title">Technology</div>
<p>
<a href="/content/libgalleryimages/technology-1.jpg" title="Technology #1" class="thickbox" rel="technology"><img src="/content/libgalleryimages/thumb/technology.jpg" width="140" height="120" alt="Technology" /></a>
<a href="/content/libgalleryimages/technology-2.jpg" title="Technology #2" class="thickbox hide" rel="technology">#2</a>
<a href="/content/libgalleryimages/technology-3.jpg" title="Technology #3" class="thickbox hide" rel="technology">#3</a>
</p>
</div>
</li>
<!-- Technology [end] // -->
</ul>
</div><!-- div#wrap/div#content/div.gallery -->
<p>写真素材：<a href="http://www.nwyhstockimages.com/">NWYH Stock Image Library</a></p>
</div><!-- div#wrap/div#content -->
</div><!-- div#wrap -->
</body>
</html>
yoxview
Flickrの写真セット、Picasaのアルバム、YouTubeの再生リストなどをURLを指定するだけで簡単に一覧表示できる多言語対応のLightbox風jQueryプラグイン
2011/1/18
YoxView
[JS]jquery.js v1.4.2、jquery.yoxview-2.2.js／[Plugin]picasa.js、youtube.js、flickr.js／[CSS]yoxview.css
Lightboxのように写真、動画、インラインコンテンツ、Flashファイル、Webページをポップアップ表示するjQueryプラグイン。 見た目や挙動の細かなカスタマイズが可能です。
多言語に対応しており、ボタン表記などを日本語にしたい場合は、プリセットに「lang:'ja'」を指定するだけでOK。 また、Flickrの写真セット、Picasaのアルバム、YouTubeの再生リストのURLを指定するだけで、一覧表示できる専用プラグインも提供されています！
ローカルにある動画ファイルだけでなく、オンライン上の動画共有サイトにYouTube/Vimeo/Huluにアップした動画も簡単に埋め込めます。 写真も動画も単一表示だけでなく、は複数画像をグループ化してスライド形式で表示することができます。
ウィンドウ上の操作は、キーボードでの操作が可能になっており、ウィンドウのタイトルにはリンクなどHTML文も指定可能です。 出力先の要素のクラス名に「top_menu」クラスを指定すれば、スキンを全画面表示タイプにすることができます。
YoxViewが開かれた時（onOpen）、閉じられようとした時（onClose）、画像選択時（onSelect(imagesIndex, image））、スライドショーの最後まで来た時（onEnd）のイベントが用意されています。 ウィンドウの下に表示するボタン群には任意のボタン（カートに入れる、ダウンロードなど）を入れられるので、上記のイベントと組み合わせてボタンをクリックした時の挙動等をコールバック関数で指定して制御することができます。
例：画像スライドショー
画像選択時は、画像のインデックスとタイトルを取得することができます。
設置イメージ設置サンプルサンプルを見る
<!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>設置サンプル</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/yoxview/yoxview.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/yoxview/jquery.yoxview-2.2.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.yoxview').yoxview(
{
lang: "ja",
loopPlay: false,
onOpen: yoxviewOnOpen,
onClose: yoxviewOnClose,
onEnd: youviewOnEnd,
onSelect: youviewonSelect
}
);
});
function youviewonSelect(imageIndex, image){
alert(imageIndex + '番目の画像が選択されました。その画像のタイトルは「' + image.media.title + '」です。');
}
function yoxviewOnOpen(){
alert('YoxViewが開かれました。');
}
function yoxviewOnClose(){
alert('YoxViewを閉じようとしています。');
}
function youviewOnEnd(){
alert('スライドショーの最後まできたので、YoxViewを閉じます。');
$.yoxview.close();
}
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.yoxigen.com/yoxview/' target='_blank'>YoxView</a></p>
<p>▼複数画像をグループ化して表示</p>
<!-- CODE -->
<div class="thumbnails yoxview">
<a href="http://farm6.static.flickr.com/5205/5346147203_9bb2223b32.jpg"><img src="http://farm6.static.flickr.com/5205/5346147203_9bb2223b32_t.jpg" alt="First" title="The first image" /></a>
<a href="http://farm6.static.flickr.com/5243/5345903411_1f52c03df5.jpg"><img src="http://farm6.static.flickr.com/5243/5345903411_1f52c03df5_t.jpg" alt="First" title="The SECOND image" /></a>
<a href="http://farm6.static.flickr.com/5206/5345898195_3fb570e238.jpg"><img src="http://farm6.static.flickr.com/5206/5345898195_3fb570e238_t.jpg" alt="First" title="The THIRD image" /></a>
</div>
<!-- / CODE -->
</div>
</body>
</html>
例：動画共有サービスの動画ファイル
YouTube、Vimeo等動画共有サービスの動画URLを指定するだけで簡単に埋め込めます。
設置イメージ設置サンプルサンプルを見る
<!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>設置サンプル</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/yoxview/yoxview.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/yoxview/jquery.yoxview-2.2.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.yoxview').yoxview(
{
lang: "ja",
skin:"top_menu"
}
);
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.yoxigen.com/yoxview/' target='_blank'>YoxView</a></p>
<p>▼動画をグループ化して表示（YouTube、Vimeo）</p>
<!-- CODE -->
<div class="thumbnails yoxview">
<a href="http://vimeo.com/18833959"><img src="http://b.vimeocdn.com/ts/118/800/118800869_100.jpg" alt="Sleeping Dog!" title="Vimeo: Sleeping Dog! by cocoism" /></a>
<a href="http://www.youtube.com/watch?v=9YEEl52u8XE"><img src="http://i1.ytimg.com/vi/8e_wXc0m97w/default.jpg" alt="寝てるとこ" title="YouTube: 寝てるとこ - cocoism3" /></a>
</div>
<!-- / CODE -->
</div>
</body>
</html>
例：Flashファイル
SWFの幅・高さ、FlashVarsに渡す値を指定可能です。
設置イメージ設置サンプルサンプルを見る
<!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>設置サンプル</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/yoxview/yoxview.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/yoxview/jquery.yoxview-2.2.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.yoxview').yoxview(
{
lang: "ja"
}
);
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.yoxigen.com/yoxview/' target='_blank'>YoxView</a></p>
<p>▼サムネイルクリックで、Flashファイル（SWF）をポップアップ表示</p>
<!-- CODE -->
<div class="yoxview">
<a href='media/chuta.swf?width=320&height=235&customVal=123'>
<img src="http://i2.ytimg.com/vi/9YEEl52u8XE/default.jpg" alt="Flash" title="うろうろ" />
</a>
</div>
<!-- / CODE -->
</div>
</body>
</html>
例：Flickrの写真セットを一覧表示
プラグイン「flickr.js」を使用すると、簡単に指定した写真セットを取得して一覧表示することができます。
設置イメージ設置サンプルサンプルを見る
<!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>設置サンプル</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/yoxview/yoxview.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/yoxview/jquery.yoxview-2.2.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/yoxview/jquery.yoxthumbs.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/yoxview/data/flickr.js" ></script>
<script type="text/javascript">
$(function(){
$("#yoxview_flickr").yoxview(
{
lang: "ja",
autoPlay: false,
dataUrl: 'http://www.flickr.com/photos/22559849@N06/sets/72157625312071876/', /* FlickrのSetのURL */
dataSourceOptions: {
"per_page": 100, /* 1ページ当たりの表示数 */
"page": 1
}
}
);
});
</script>
<style type="text/css">
.thumbnails a {
padding:3px;
}
.thumbnails a img {
padding:3px;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.yoxigen.com/yoxview/' target='_blank'>YoxView</a></p>
<p>▼Flickrの<a href='http://www.flickr.com/photos/22559849@N06/sets/72157625312071876/'>写真セット</a>を一覧表示。</p>
<!-- CODE -->
<div id="yoxview_flickr" class="thumbnails"></div>
<!-- / CODE -->
</div>
</body>
</html>
TopUp beta
画像や動画ファイルをLightbox風にポップアップ表示（jQuery UI使用）
2011/1/18
TopUp beta
jquery v1.4.2（all.js、core.js、fxc-clip.js、uic-resizable.js）、top_up.js
画像や動画ファイルやWebページをLightbox風にポップアップ表示するjQueryプラグイン。 オプションで、ウィンドウのタイトル、リサイズの有無、開閉する際のエフェクトなど細かなカスタマイズができます。 また、写真も動画もWebページもすべて単一表示、または複数画像をグループ化してスライド形式で表示することができます。
ウィンドウの見た目や挙動のオプション設定は、プリセットに指定してもよいし、出力先のリンク要素に直接独自のtoptions属性として指定することもできます。
ポップアップウィンドウの外観にはjQuery UIが使用されています。 ウィンドウデザインは「dashboard」「flatlook」「quicklook」の3パターン用意されています。 flatlookまたはquicklookを指定すると、ウィンドウのドラッグ＆ドロップが可能です。
動画ファイルの設置イメージ（左からdashboard/flatlook/quicklook）ポップアップ表示時のスタイルは、画面の背景暗くするタイプとそうでないタイプの2種類が用意されています。 たとえばaタグのtoptions属性に「shaded=1,overlayClose=1」と指定すると、ポップアップ時に背景を暗くし、背景クリックで閉じるを有効にすることができます。
画像ファイルの設置イメージWebページも動画も、HTMLタグ（リンク形式）で簡単に埋め込め、ウィンドウやプレーヤーの幅、高さも指定可能です。 指定可能な動画ファイルは、SWF、FLV、Windows Media/QuickTime/RealPlayer形式の動画、YouTube動画と幅広く対応しています。
Webページの設置イメージ（quicklook）設置サンプルサンプルを見る
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="/content/lib/jquery/top_up/top_up.js"></script>
<script type="text/javascript">
TopUp.addPresets({
/* 例3 */
"#slideshow a": {
group:"slideshow",
layout:"dashboard",
resizable:0
},
/* 例4 */
"#slideshow2 a": {
group:"slideshow2",
layout:"quicklook",
shaded:1,
overlayClose:1,
effect:"clip"
},
"#demo a.youtube": {
layout:"flatlook",
width:400,
height:250,
type:"flash",
title:"寝てるとこ by cocoism3",
resizable:0
},
"#demo a.swf": {
layout:"quicklook",
width:550,
height:400,
effect:"clip",
shaded:1,
title:"♥サンプルムービー♥",
resizable:0
},
"#web a": {
group:"web"
}
});
</script>
<!-- CSS -->
<style type="text/css">
#demo a img { vertical-align:middle; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参考：<a href='http://gettopup.com/' target='_blank'>TopUp beta</a></p>
<!-- CODE -->
<div id="demo">
<h2>画像</h2>
<h3>例1：基本</h3>
<p>
<a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg" class="top_up"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a>
<br>※a要素に「top_up」クラス指定。オプションなしのデフォルト（quicklook、ウィンドウリサイズ化）。
</p>
<h3>例2：単一表示</h3>
<p>
<a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg" toptions="shaded=1,overlayClose=1"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a>
<br>※toptions指定（shaded=1,overlayClose=1）＝ポップアップ時に背景を暗くし、背景クリックで閉じるを有効に。
</p>
<h3>例3：複数画像のグループ化</h3>
<p id="slideshow">
<a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a>
<a href="http://farm6.static.flickr.com/5003/5320540118_b8394f7736.jpg"><img src="http://farm6.static.flickr.com/5003/5320540118_b8394f7736_t.jpg" /></a>
<a href="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2.jpg"><img src="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2_t.jpg" /></a>
<br>※レイアウト「dashboard」、リサイズ無効（resizable=0）
</p>
<h3>例4：複数画像のグループ化</h3>
<p id="slideshow2">
<a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a>
<a href="http://farm6.static.flickr.com/5003/5320540118_b8394f7736.jpg"><img src="http://farm6.static.flickr.com/5003/5320540118_b8394f7736_t.jpg" /></a>
<a href="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2.jpg"><img src="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2_t.jpg" /></a>
<br>※レイアウト「quicklook」、リサイズ有効、ポップアップ時に背景を暗く（shaded=1）、背景クリックで閉じるを有効（overlayClose=1）、エフェクト「clip」指定。
</p>
<h2>動画</h2>
<h3>YouTube動画</h3>
<p>
<a class="youtube" href="http://www.youtube.com/v/9YEEl52u8XE&hl=nl&fs=1&rel=0&hd=1&autoplay=1"><img src="/content/img/picon/youtube.png" />YouTube動画をみる</a>
※レイアウト「flatlook」、動画タイプ「flash」
</p>
<h3>SWF</h3>
<p>
<a class="swf" href="/content/media/flash/va002a.swf"><img src="/content/img/picon/flash.png" />SWFムービーをみる</a>
※レイアウト「quicklook」、ポップアップ時に背景を暗く（shaded=1）、エフェクト「clip」
</p>
<h3>QuickTimeムービー</h3>
<p>
<a href="media/SampleMovie.mov" toptions="width=192,height=260,layout=dashboard,shaded=1"><img src="/content/img/picon/mov.png" />QuickTimeムービーをみる</a>
※toptions指定（width=192,height=260,layout=dashboard,shaded=1）
</p>
<h2>Webページ</h2>
<p id="web">
<a href="http://www.google.com" toptions="width=800,height=450,type=iframe,overlayClose=1,title=Google検索,shaded=1,layout=dashboard">Google検索</a>
<a href="http://www.google.co.jp/imghp?hl=ja" toptions="width=800,height=450,type=iframe,overlayClose=1,title=Google画像検索,shaded=1,layout=quicklook">Google画像検索</a>
※toptions指定（width=800,height=450,type=iframe,overlayClose=1,title=Google検索,shaded=1,layout=quicklook）
</p>
</div>
<!-- / CODE -->
</div>
</body>
</html>