設置サンプル
【参照】jQuery Tools: The Apple effect for overlay
サムネイル画像をクリックすると、画像と説明文をオーバーレイ表示します。
ノルディック＠オ・タン・ジャディス
ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。
ノルディック＠オ・タン・ジャディス
ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。
ノルディック＠オ・タン・ジャディス
ガレットは、スモークサーモンとトマトのガレット『ノルディック』をチョイス！スモークサーモンの中には、クリームチーズがたっぷり♪さっぱりとした夏向きのガレットです。
塩バターキャラメルのクレープ @オ・タン・ジャディス
デザートは、「塩バターキャラメルのクレープ 」にしました。クレープの上にキャラメルソースとバターがかかっています。クレープの熱でバターがとろ～りと溶けて、しっとりとした生地とすごく合います。
設置サンプルのソース
<!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 img[rel]").overlay({effect: 'apple'});
});
</script>
<style type="text/css">
/* 白背景 */
/* the overlayed element */
.apple_overlay {
display:none;
background-image:url(/content/img/ajax/jquery/white.png);
width:500px;
padding:35px;
}
/* default close button positioned on upper right corner */
.apple_overlay div.close {
background-image:url(/content/img/ajax/jquery/close.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}
/* 黒背景 */
div.apple_overlay.black {
background-image:url(/content/img/ajax/jquery/transparent.png);
color:#fff;
}
/* サムネイル */
#triggers {
margin-top:10px;
text-align:center;
}
#triggers img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:2px 5px;
cursor:pointer;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/* ボックス内のタイトルと説明 */
div.details h2 {
margin:10px 0; padding:0;
}
div.details p {
margin:10px 0 0 0; padding:0;
}
</style>
<!--[if lt IE 7]>
<style>
div.apple_overlay {
background-image:url(/content/img/ajax/jquery/overlay_IE6.gif");
color:#fff;
}
/* default close button positioned on upper right corner */
div.apple_overlay div.close {
background-image:url(/content/img/ajax/jquery/overlay_close_IE6.gif);
}
</style>
<![endif]-->
<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/apple.html'>jQuery Tools: The Apple effect for overlay</a></p>
<p>サムネイル画像をクリックすると、画像と説明文をオーバーレイ表示します。</p>
<!-- CODE -->
<!-- trigger elements -->
<div id="triggers">
<img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_t.jpg" rel="#photo1"/>
<img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_t.jpg" rel="#photo2"/>
<img src="http://farm4.static.flickr.com/3611/3664132439_78c681eb6d_t.jpg" rel="#photo3"/>
<img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc_t.jpg" rel="#photo4"/>
</div>
<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
<img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" />
<div class="details">
<h2>ノルディック＠オ・タン・ジャディス</h2>
<p>ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。</p>
</div>
</div>
<div class="apple_overlay black" id="photo2">
<img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg" />
<div class="details">
<h2>ノルディック＠オ・タン・ジャディス</h2>
<p>ガレットは、フランスのブルターニュ地方の料理で、そば粉を使用したお食事クレープですが、蕎麦の味はしませんｗ 生地はもっちりとしていて、かみ締めるほどに美味しいです。</p>
</div>
</div>
<div class="apple_overlay" id="photo3">
<img src="http://farm4.static.flickr.com/3611/3664132439_78c681eb6d.jpg" />
<div class="details">
<h2>ノルディック＠オ・タン・ジャディス</h2>
<p>ガレットは、スモークサーモンとトマトのガレット『ノルディック』をチョイス！スモークサーモンの中には、クリームチーズがたっぷり♪さっぱりとした夏向きのガレットです。</p>
</div>
</div>
<div class="apple_overlay" id="photo4">
<img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg" />
<div class="details">
<h2>塩バターキャラメルのクレープ @オ・タン・ジャディス</h2>
<p>デザートは、「塩バターキャラメルのクレープ 」にしました。クレープの上にキャラメルソースとバターがかかっています。クレープの熱でバターがとろ～りと溶けて、しっとりとした生地とすごく合います。</p>
</div>
</div>
<!-- / CODE -->
</body>
</html>