JavaScript

Javascript

zoomi.jsでオンマウス時に画像を拡大

画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼があり、

早速、zoomi.jsというライブラリを使って対応してみることにしました。

 

設置方法は簡単で、

まずは、

jQuery(現時点での最新版は「jquery-1.3.2.min.js」)とzoomiを以下よりダウンロードします。
jQuery
zoomi.js

 

次に、

<head>~</head>の部分に以下の記述を追加します。

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

<script type="text/javascript">
$(function(){
  $(".onZoom")
    .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
    .zoom2().mouseout(function(){ $(this).fadeOut(400); });
});
</script>

 

あとは、

<a href="#"><img src="./img/thum/sample.jpg" alt="./img/sample.jpg" width="50px" height="50px"></a>

というように「class="onZoom"」を<img>タグに追記してやるだけです。

 

こうすることで、

「alt=""」に記載されている画像を拡大時に表示してくれます。

 

因みに、

「alt=""」に何も記載されていなければ、

<img>タグの「src=""」に記載されている画像を拡大表示させます。

 

あと、

画像を閉じる際の速度は、

部分に記載した「fadeOut(400);」で調整してください。

 

ついでに説明しておくと、

オンマウスではなくクリック時に画像を拡大させたい場合には、

 

<head>~</head>の部分に追記した

$(".onZoom")
  .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
  .zoom2().mouseout(function(){ $(this).fadeOut(400); });

$(".onZoom").zoom1().click(function(){
$(this).zoom2().fadeIn().click(function(){
$(this).hide(); return false; })
.end().parent(); return false; });

と変更してみてください。

WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    ajaxzip2からajaxzip3へ変えてみました!!

    弊社で日頃からお世話になっているライブラリーといえば、ajaxzi…

  2. JavaScript

    Javascript

    Javascriptで画像サイズを取得したい

    &lt;img src="sample.jp" alt="サンプル" …

  3. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

    前回の続きで、ストリートビュー未対応地域を想定した…

  4. JavaScript
  5. JavaScript

    Javascript

    Google マップのストリートビューを実装してみました!!

    Google マップのストリートビューを実装してみました。&nbs…

  6. JavaScript

    Javascript

    「jQuery ui Datepicker」のオプション

    前回の記事では、「jQuery ui Datepicker」の設定…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. CakePHP
  2. PHP(ピー・エイチ・ピー)
  3. PHP(ピー・エイチ・ピー)
  4. PHP(ピー・エイチ・ピー)
  5. WP:WordPress(ワードプレス)
  6. WP:WordPress(ワードプレス)
  7. WP:WordPress(ワードプレス)
  8. Security(セキュリティ)
  9. WP:WordPress(ワードプレス)
  10. WP:WordPress(ワードプレス)
PAGE TOP