画像をズームするサイトを作ってみよう【Jquery Image Zoom】

いよいよ10月4日にホームページビルダー(hpb18)が発売されます。近々hpb18詳細をまとめましょう。

今回の売りは、jQuery対応です。実は、発売を待たなくとも、簡単に実現できます。

Jquery Image Zoomサンプル



前回は、FlexSliderを使用して、Flash風のアニメーションを簡単に実現できることを説明しました。今回も、簡単に自分のWordPressの記事に、導入する方法を記載します。

事前準備

大きなサイズの画像と小さなサイズ2枚準備します。

large.jpg(クリックで拡大) small.jpg
large small

準備が面倒な方は、このphoto2.zip?をご利用ください。

作業1:画像ファイルのアップロード

普段ブログに投稿するように、「画像の挿入」ボタン20130821xを押して投稿してください。

ファイル名は、重複さえなければ、アップロードしたファイルと同じ名前になります。

20130917o

URLは、私のサイトの場合は、

http://pcmanabu.xtwo.jp/wp-content/uploads/large.jpg

http://pcmanabu.xtwo.jp/wp-content/uploads/small.jpg

になります。

ブラウザで、表示されるか確認してください。

自分のブログのURL +?/wp-content/uploads/ + 写真ファイル名

20130917p

作業2:必要ファイルのアップロード

必要なファイル

・jquery.elevatezoom.js

だけです。これらのファイルは、http://www.elevateweb.co.uk/image-zoomにあります。

クリックしてダウンロードしましょう。Downloadをクリック

20130917r

「Download Plugin Now」をクリック

20130917t

このZIPファイルを開くと、以下のようになっています。この1つのファイルをFFFTPなどを使ってサイトのルートにコピーします。

20130917u

作業3:記事に記述する

あとは、普通に投稿するだけです。赤の部分が人によって異なる部分ですね。

20130917v

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.elevatezoom.js"></script>
<img id="zoom" alt="" src="/wp-content/uploads/small.jpg" data-zoom-image="/wp-content/uploads/large.jpg" />
<script type="text/javascript">$("#zoom").elevateZoom();</script>

まとめ

思ったよりも、簡単に実装できて驚きです。ぜひ、みなさんもチャレンジしてください。

関連書籍

本が好きな方は、108ページに詳しく書いてありますので、参照ください。

書籍版 Kindle版

関連URL

WordPressで超簡単にFlash風サイトを作ってみよう【FlexSlider】

Flashの代わりに使える!?FlexSliderを使ってみよう

?

   このエントリーをはてなブックマークに追加