設置サンプル
【参照】jQuery Tools: Using the gallery plugin
複数の画像をグループ化してギャラリー表示。サムネイル画像をクリックすると、画像がポップアップ表示されます。
設置サンプルのソース
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function(){
$("#triggers a").overlay({
// トリガーはそれぞれ同じIDとオーバーレイを使用
target: '#gallery',
// エクスポージング効果
expose: '#f1f1f1'
// let the gallery plugin do its magic!
}).gallery({
// 速度
speed: 800
});
});
</script>
<style type="text/css">
/* the overlayed element */
.simple_overlay {
/* must be initially hidden */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(/content/img/ajax/jquery/close.png);
position:absolute;
right:-15px; top:-15px;
cursor:pointer;
width:35px; height:35px;
}
/* the large image. we use a gray border around it */
#img {
border:1px solid #666;
}
/* "next image" and "prev image" links */
.next, .prev {
/* absolute positioning relative to the overlay */
position:absolute;
top:40%;
border:1px solid #666;
cursor:pointer;
display:block;
padding:10px 20px;
color:#fff;
font-size:11px;
/* upcoming CSS3 features */
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.prev {
left:0;
border-left:0;
-moz-border-radius-topleft:0;
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
-webkit-border-top-left-radius:0;
}
.next {
right:0;
border-right:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
-webkit-border-top-right-radius:0;
}
.next:hover, .prev:hover {
text-decoration:underline;
background-color:#000;
}
/* when there is no next or previous link available this class is added */
.disabled {
visibility:hidden;
}
/* the "information box" */
.info {
position:absolute;
bottom:0; left:0;
padding:10px 15px;
color:#fff;
font-size:11px;
border-top:1px solid #666;
}
.info strong {
display:block;
}
/* progress indicator (animated gif). should be initially hidden */
.progress {
position:absolute;
top:45%;
left:50%;
display:none;
}
/* everybody should know about RGBA colors. */
.next, .prev, .info {
background:#333 !important;
background:rgba(0, 0, 0, 0.6) url(/content/img/ajax/jquery/h80.png) repeat-x;
}
/* active thumbnail is raised on top of the mask using the z-index property */
/* the thumbnails */
#triggers {
text-align:center;
}
#triggers img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:15px 2px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* the active thumbnail */
#triggers a.active img {
outline:1px solid #000;
/* show on top of the expose mask */
z-index:9999;
position:relative;
}
</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>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://flowplayer.org/tools/demos/overlay/gallery.html'>jQuery Tools: Using the gallery plugin</a></p>
<p>複数の画像をグループ化してギャラリー表示。サムネイル画像をクリックすると、画像がポップアップ表示されます。</p>
<!-- CODE -->
<!-- trigger elements -->
<div id="triggers">
<a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" title="サラダ@オ・タン・ジャディス"><img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_s.jpg" /></a>
<a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg" title="ノルディック＠オ・タン・ジャディス"><img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_s.jpg" /></a>
<a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg" title="塩バターキャラメルのクレープ @オ・タン・ジャディス"><img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc_s.jpg" /></a>
</div>
<!-- overlay element -->
<div class="simple_overlay" id="gallery">
<!-- "previous image" action -->
<a class="prev">prev</a>
<!-- "next image" action -->
<a class="next">next</a>
<!-- image information -->
<div class="info"></div>
<!-- load indicator (animated gif) -->
<img class="progress" src="/content/img/ajax/loading_black.gif" />
</div>
<!-- / CODE -->
</body>
</html>