設置サンプル
実行結果
設置サンプル
【参照】IMGPREVIEW
デフォルト
プレビュー表示する画像の幅を200pxに指定
フェードイン効果付き+スタイル指定
プレビュー+画像のタイトル表示
プレビュー+画像の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>
<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/imgpreview.jquery.js"></script>
<script type="text/javascript">
$(function(){
/* demo1 */
$('ul#demo1 a').imgPreview();
/* demo2 */
$('ul#demo2 a').imgPreview({
imgCSS: { width: 200 }
});
/* demo3 */
$('ul#demo3 a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
// Animate link:
$(link).stop().animate({opacity:0.4});
// Reset image:
$('img', this).stop().css({opacity:0});
},
// When image has loaded:
onLoad: function(){
// Animate image
$(this).animate({opacity:1}, 300);
},
// When container hides:
onHide: function(link){
// Animate link:
$(link).stop().animate({opacity:1});
}
});
/* demo4 */
$('ul#demo4 a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('<span>' + $(link).text() + '</span>').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});
/* demo5 */
$('ul#demo5 a').imgPreview({
containerID: 'imgPreviewWithStyles',
/* Change srcAttr to rel: */
// srcAttr: 'rel',
srcAttr: 'href',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('<span>' + link.href + '</span>').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});
});
</script>
<!-- CSS -->
<style type="text/css">
#imgPreviewWithStyles {
background: #222;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 15px;
z-index: 999;
border: none;
}
#imgPreviewWithStyles span {
color: white;
text-align: center;
display: block;
padding: 10px 0 3px 0;
font-size:80%;
}
</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>
<h2 class='h'>設置サンプル</h2>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/'>IMGPREVIEW</a></p>
<!-- CODE -->
<h2>デフォルト</h2>
<ul id="demo1">
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg">サラダ@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg">ノルディック@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg">塩バターキャラメルのクレープ@オ・タン・ジャディス</a></li>
</ul>
<h2>プレビュー表示する画像の幅を200pxに指定</h2>
<ul id="demo2">
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg">サラダ@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg">ノルディック@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg">塩バターキャラメルのクレープ@オ・タン・ジャディス</a></li>
</ul>
<h2>フェードイン効果付き+スタイル指定</h2>
<ul id="demo3">
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg">サラダ@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg">ノルディック@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg">塩バターキャラメルのクレープ@オ・タン・ジャディス</a></li>
</ul>
<h2>プレビュー+画像のタイトル表示</h2>
<ul id="demo4">
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg">サラダ@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg">ノルディック@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg">塩バターキャラメルのクレープ@オ・タン・ジャディス</a></li>
</ul>
<h2>プレビュー+画像のURL表示</h2>
<ul id="demo5">
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg">サラダ@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg">ノルディック@オ・タン・ジャディス</a></li>
<li><a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg">塩バターキャラメルのクレープ@オ・タン・ジャディス</a></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>