JavaScript

Javascript

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

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

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

 

設置方法は簡単で、

まずは、

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

 

次に、

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

 

あとは、

<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>の部分に追記した

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

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript
  2. JavaScript

    Javascript

    「jQuery ui Datepicker」のオプション

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

  3. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

  4. JavaScript

    Javascript

    Google Maps API Ver.3 で地図を表示

    久しぶりにGoogleMap APIを利用しようとして、今更なんで…

  5. JavaScript

    Javascript

    pickadate.js【デートピッカー・タイムピッカー用ライブラリ】

    pickadate.jsについてデートピッカーと言えば、「…

  6. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

コメント

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

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

最近の記事

  1. PHP(ピー・エイチ・ピー)
  2. SONY 広角レンズ「SEL1018」
  3. PHP(ピー・エイチ・ピー)
  4. 俺流塩ラーメン
  5. SEO(エスイーオー)
  6. Linux(リナックス)
  7. Linux(リナックス)
  8. PHP(ピー・エイチ・ピー)
  9. バージョンアップ
  10. Google Search(グーグル検索)
PAGE TOP