画像を拡大したい!プラグインでズーム機能を実装しよう

large

ECサイト運営者は必見の画像ズーム機能

システムエンジニア(SE)かっきーです。

インターネット通販で何かものを買いたいとき、たとえばECサイトに掲載されている商品画像をクリックすると、ズームすることがありますよね。

ブログやサイトに写真があるだけで、サイトが華やかになりますし、文字だけでは伝わらない情報を一目でわかりやすく伝えるのでとても重要です。
画像が大きくなることで細かいところが見られるようになりますから、画像をズームしたいと思っている方も多いのではないでしょうか?

そこで今回は画像をクリックしたらズームさせる機能を実装していきます。

JavaScriptプラグイン[jquery.colorbox.js]

今回は、JavaScriptプラグイン[jquery.colorbox.js]を使用します。

jquery.colorbox.jsは下記からダウンロードできます。

まずダウンロードしたファイルをAPサーバにアップロード。
必要となるファイルは下記の4点です。

●query.colorbox-min.js
●example/colorbox.css
●example/images/controls.png
●example/images/loading.gif

exampleは1から4まであるため、お好きなズーム手法をお選びください。

script、cssファイルの読み込み

header.phpのファイルを読み込んでいるところに
必要なファイルを読み込ませます。

<link rel="stylesheet" href="colorbox.css" />
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

サーバにアップロードした階層に合わせてパスは変更してください。

HTMLへの記載

画像を表示させたいか所に下記コードを記載していきます。

<a class="colorbox" href="画像パス" title="画像タイトル">
    <img src="画像パス" alt="" />
</a>

aタグにズームさせたい画像のパスを記載し、お好きなクラス名を指定します。
タイトルはズームしたとき表示されますが記載しなくてもOKです。

jQueryの呼び出し

先ほど指定したaタグのクラス名に対し、jQueryを呼び出します。
オプションでズームした際の画面大きさを指定することができます。

$(function() {
    $(".colorbox").colorbox({
    maxWidth:"90%",
    maxHeight:"90%",
    opacity: 0.7
  });
});

またオプションでrelに「slideshow」を指定し、slideshow:trueを設定することにより、
ズームした際スライドショーにして表示させることができます。
slideshowSpeed:をしてすることによりスライドするスピードも指定することも可能です。

$(function() {
    $(".gallery").colorbox({
    rel:'slideshow',
    slideshow:true,
    slideshowSpeed:3000,
    maxWidth:"90%",
    maxHeight:"90%",
    opacity: 0.7
  });
});

簡単にズーム機能を実装することができるため、皆さんもぜひ試してください。

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です