zoomi

シンプルな画像拡大

Example

縮小画像←→原寸画像 (mouse click)
img/yn.jpg

画像１枚で縮小表示←→原寸大 (mouse over)

img/yn2-tint.jpg Rollover Effect 

<script type="text/javascript" src="../common/jquery-1.2.2.min.js"></script>
<script type="text/javascript" src="zoomi.js"></script>

<script type="text/javascript">
$(function(){
   $('img.zoomi').zoomiClick();  /* fadeIn() by click */
   for(i=1; i<=6; ++i)
       $('#garnet').append('<img class="zoomi" src="img/'+i+'.jpg" />');
   $('#garnet img.zoomi').zoomi();
    $('.bw img')
       .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
       .zoom2().mouseout(function(){ $(this).fadeOut(1600); });
    });
</script>

<p>縮小画像←→原寸画像 (mouse click)<br />
<a href="http:// .. ">
<img class="zoomi" 
 src="img/yn-s.jpg" alt="img/yn.jpg">
 width="160" height="160"
</a></p>

<p id="garnet" class="frame">
  画像１枚で縮小表示←→原寸大  (mouse over)<br />
</p>

<p class="bw">
<img class="bw" 
 src="img/yn2-bw.jpg" alt="img/yn2-tint.jpg" 
 width="360" height="300" /> Rollover Effect
</p>

img.zoomi { border:4px solid #fff; }
img.zoomi:hover { border-color:#eee #ccb #ddc #eed; }

Links