[ｈｅａｄの中]

<link href="css_pirobox/pirobox_b.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!-- OTIONAL-->
<script type="text/javascript" src="js/piroBox.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
jQuery.easing.def = 'easeOutBack';<!--OPTIONAL-->
$('.thumbs').piroBox({
mySpeed: 500,
bg_alpha: 0.7,
pathLoader : 'url(css_pirobox/ajax-loader_b.gif) center center no-repeat;',
gallery : '.pirobox li a',
gallery_li : '.pirobox li',
single : '.single a',
next_class : '.next',
previous_class : '.previous'
});
});
-->
</script>

[ｂｏｄｙの中]

[Image set (prev/next inside)]

<div class="pirobox_in">
<ul class="thumbs_all">
<>
<li>
<a href="images/大きな画像ファイルa.jpg" title="">
<img src="images/画像ファイルa.jpg" alt="demo" width="100" height="100" />
</a>
</li>
<li>
<a href="images/大きな画像ファイルb.jpg" title="">
<img src="images/画像ファイルb.jpg" alt="demo" width="100" height="100" />
</a>
</li>
<li>
<a href="images/大きな画像ファイルc.jpg" title="">
<img src="images/画像ファイルc.jpg" alt="demo" width="100" height="100" />
</a>
</li>
</ul>
</div>

[Image set (prev/next inside)]

<div class="pirobox">
<ul class="thumbs_all">
<>
<li>
<a href="images/大きな画像ファイルa.jpg" title="">
<img src="images/画像ファイルa.jpg" alt="demo" width="100" height="100" />
</a>
</li>
<li>
<a href="images/大きな画像ファイルb.jpg" title="">
<img src="images/画像ファイルb.jpg" alt="demo" width="100" height="100" />
</a>
</li>
<li>
<a href="images/大きな画像ファイルc.jpg" title="">
<img src="images/画像ファイルc.jpg" alt="demo" width="100" height="100" />
</a>
</li>
</ul>
</div>