設置サンプル
【参照】piroBox v.1.2, jQuery 1.3.2 plugin
例1：単一画像表示
例2：自動再生ボタン付き
グループ1
グループ2
例3：画像がない時のエラー表示
設置サンプルのソース
<!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/piroBox.1_2.js"></script>
<script type="text/javascript">
$(function(){
$().piroBox({
my_speed: 600, //animation speed
bg_alpha: 0.5, //background opacity
radius: 4, //caption rounded corner
scrollImage : false, // true == image follows the page, false == image remains in the same open position
pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
pirobox_prev : 'piro_prev',// Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
close_all : '.piro_close',// add class .piro_overlay(with comma)if you want overlay click close piroBox
slideShow : 'slideshow', // just delete slideshow between '' if you don't want it.
slideSpeed : 4 //slideshow duration in seconds(3 to 6 Recommended)
});
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/img/ajax/jquery/css_pirobox/white/style.css" />
<!--link rel="stylesheet" type="text/css" href="/content/img/ajax/jquery/css_pirobox/black/style.css" />
<link rel="stylesheet" type="text/css" href="/content/img/ajax/jquery/css_pirobox/shadow/style.css" /-->
<style type="text/css">
#wrap ul {
list-style:none;
margin:0; padding:0;
}
#wrap li {
list-style:none;
margin:0; padding:0;
display:block;
float:left;
width:80px; height:80px;
}
</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://www.pirolab.it/pirobox/">piroBox v.1.2, jQuery 1.3.2 plugin</a></p>
<!-- CODE -->
<h2>例1：単一画像表示</h2>
<ul>
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" class="pirobox" title="サラダ@オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_s.jpg" alt="サラダ@オ・タン・ジャディス" /></a></li>
</ul>
<br clear="both" /
<h2>例2：自動再生ボタン付き</h2>
<h3>グループ1</h3>
<ul>
<li><a href="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b.jpg" class="pirobox_gall" title="サラダ@オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_s.jpg" alt="サラダ@オ・タン・ジャディス" /></a></li>
<li><a href="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc.jpg" class="pirobox_gall" title="ノルディック＠オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_s.jpg" alt="ノルディック＠オ・タン・ジャディス" /></a></li>
<li><a href="http://farm4.static.flickr.com/3611/3664132439_78c681eb6d.jpg" class="pirobox_gall" title="ノルディック＠オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3611/3664132439_78c681eb6d_s.jpg" alt="ノルディック＠オ・タン・ジャディス" /></a></li>
<li><a href="http://farm4.static.flickr.com/3348/3664935456_0ee9b93009.jpg" class="pirobox_gall" title="塩バターキャラメルのクレープ @オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3348/3664935456_0ee9b93009_s.jpg" alt="塩バターキャラメルのクレープ @オ・タン・ジャディス" /></a></li>
<li><a href="http://farm4.static.flickr.com/3394/3664935528_16fff63afc.jpg" class="pirobox_gall" title="塩バターキャラメルのクレープ @オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc_s.jpg" alt="塩バターキャラメルのクレープ @オ・タン・ジャディス" /></a></li>
</ul>
<br clear="both" />
<h3>グループ2</h3>
<ul>
<li><a href="http://farm3.static.flickr.com/2527/4193010288_532f1b80db.jpg" class="pirobox_gall2" title="ネギトロとアボカドの生春巻@福みみ by php_javascript_room, on Flickr"><img src="http://farm3.static.flickr.com/2527/4193010288_532f1b80db_s.jpg" alt="ネギトロとアボカドの生春巻@福みみ" /></a></li>
<li><a href="http://farm3.static.flickr.com/2642/4193010212_4ceb134d9c_o.jpg" class="pirobox_gall2" title="パチリ@福みみ by php_javascript_room, on Flickr"><img src="http://farm3.static.flickr.com/2642/4193010212_e36eba11b7_s.jpg" alt="パチリ@福みみ" /></a></li>
<li><a href="http://farm3.static.flickr.com/2545/4190252100_efe8f4d259.jpg" class="pirobox_gall2" title="焼酎なう♪ by php_javascript_room, on Flickr"><img src="http://farm3.static.flickr.com/2545/4190252100_efe8f4d259_s.jpg" alt="焼酎なう♪" /></a></li>
</ul>
<br clear="both" />
<h2>例3：画像がない時のエラー表示</h2>
<ul>
<li><a href="hoge.jpg" class="pirobox" title="サラダ@オ・タン・ジャディス by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_s.jpg" alt="サラダ@オ・タン・ジャディス" /></a></li>
</ul>
<br clear="both" /
<!-- / CODE -->
</body>
</html>