olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(Popup)>
  4. ちょっと便利な拡大エフェクト

画像エフェクト(Popup)zoomi.js

ちょっと便利な拡大エフェクト

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Slider</title>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="zoomi.js"></script>
<script type="text/javascript"> 
$(function(){
  $('.zoomme').zoom1().click(function(){
    $(this).zoom2().fadeIn().click(function(){
      $(this).hide(); return false; })
    .end().parent(); return false; });
 
  $('.bw')
  .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
  .zoom2().mouseout(function(){ $(this).fadeOut(1600); });
});
</script> 
<style type="text/css" media="screen">
body {
	text-align: center;
	margin-top: 100px;
}
img{
	margin-right:150px;
}
</style>
</head>
<body>
<img src="1.jpg" width="100" class="zoomi">
<img src="2.jpg" width="100" class="bw"><br><br><br><br><br><br><br><br><br><br><br>
<img src="3.jpg" width="100" class="zoomme">
</body>
</html>

使い勝手の良さそうな拡大エフェクト、zoomi.js。
jQueryを使用して、マウスオーバーで拡大したり、フェードしたり、クリックで拡大したりと小回りが利きます。
設定も簡単なのでポップアップするまでもないような場合検討するのも良いかもしれません。 

１．jQueryとzoomi.jsのダウンロード

まずはjQueryで最新版のjQueryをダウンロードし、次にZoomiへ行き、zoomi.js をダウンロードしてください。
完了したらそれらをサーバーへアップしておきます。

２．<head>設定

アップしたスクリプトを読み込ませます。

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

次にエフェクトの設定を記述します。

<script type="text/javascript"> 
$(function(){
  $('.zoomme').zoom1().click(function(){
    $(this).zoom2().fadeIn().click(function(){
      $(this).hide(); return false; })

    .end().parent(); return false; });

  $('.bw')

  .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })

  .zoom2().mouseout(function(){ $(this).fadeOut(1600); });
});
</script>　

.zoomme はクリックして拡大表示させたい場合の設定で、
.bw はマウスオーバーさせた時にフェードエフェクトで拡大させる設定です。
.fadeIn() , .fadeOut() のカッコ内に数値を入れるとフェードのスピードを調節できます。

３．HTMLマークアップ 

以上の設定が済んだら画像に class をつけるだけで動作します。

<img src="1.jpg" width="100" class="zoomi">
<img src="2.jpg" width="100" class="bw">
<img src="3.jpg" width="100" class="zoomme">　

zoomi はマウスオーバーで拡大、bw はマウスオーバーでフェードしながら拡大、zoomme はクリックして拡大するクラス名です。
サムネイルの画像はCSSやサンプルのように width で指定してもOKかと思います。 

関連スクリプト

感想

ライトボックス系のポップアップ表示はいかついと思っている方にはピッタリでしょうね。
使いやすいし分かりやすいし便利だと思います。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。