東京ロケット CEO のブログ

道玄坂交番のカレーうどん屋さんの5階で「助太刀くん」という建設現場と職人さんをつなぐアプリを開発・運営してます。

ティザーサイトに虫眼鏡を追加してみた

今日は鈴木先生が来る日なので、前からやろうと思っていて保留していたティザーサイトに虫眼鏡を実装をやってみました。
基本的には
OKZoom
これを使えば簡単に実装できる予定なんですが、このままだとマウスを乗せないと虫眼鏡が出ない仕様なんですね。
最初から任意の位置に出しておいて、マウスが行ったら移動させれるように改造してみました。
PCサイト用に作りましたが、スマホでもちゃんと動くように調整してます。(スマホ版はスワイプで表示です)
本当はスマホの時は、二本指と一本指で動作をgoogle map風に分けようかと思ったんですが、目的が違うなと思いとどまりサイズを小さくして端の方でスワイプできるようにしました。
では、始めます。まずは上記サイトからGithubに飛べるので
okzoom.min.jsをダウンロードしましょう。
f:id:TRocket:20170425223756p:plain
HTMLに下記のコードを貼り付けます。

<!--okzoom-->
<script src='js/okzoom.min.js'></script>
<script>
$(function(){
    $('.zoom').okzoom({
        width: 250,  // ルーペの幅
        height: 250,  // ルーペの高さ
        round: true,  // ルーペの形
        border: "8px solid black", // ルーペのボーダー指定
        shadow: null  // ルーペの影指定
    });
});
</script>

この辺は説明は大丈夫ですね。
cssでは画像のサイズは表示の1.5倍で作りました。2倍も試しましたがこの辺が丁度いいかと思います。
これで、あとは該当するイメージにクラス名zoomを追加すればOKなんですが、最近UIをちょっとお勉強し始めたボクとしては「マウス乗せないで気づかない人もいるんでない?」などど心配になり、最初に書いた任意の位置に虫眼鏡を出しておく。というのをどうしてもやりたくなってしまったわけです。
鈴木先生にokzoom.jsをハックして頂き下記のコードを追加します。
ここからがポイントですよ。

  zoom.each(function() {
    // 2回目は実行しない
    if ($(this).data('init')) {
      return;
    }
    // イメージの位置
    var offset = $(this).offset();
    // イメージの高さ
    var iHeight = $(this).height();
    // ウィンドウの高さ
    var wHeight = $(window).height();
    // ウィンドウの下端がイメージの高さの半分を超えてない時は、処理をしない
    if (scroll + wHeight < offset.top + iHeight / 2) {
      return;
    }
    // 虫眼鏡の位置の計算
    var option = {
      pageX: offset.left + $(this).data('offset-x'),
      pageY: offset.top + $(this).data('offset-y')
    };
    // イベントを偽装して発火
    $(this).data('init', true).trigger($.Event('mouseover', option));
    // ライブラリがカーソルを消すのをやめさせる
    $('body').css('cursor', 'auto');
  });

Cromeの検証ツールを使って色々調べて行くんですが、イベントを偽装して発火するところがなかなか苦労していました。(ボクは見てるだけ…。)
でも、JavaScriptはやっぱり勉強するのも楽しいですね。作ってる感がとてもあります。
PHPの勉強はちょっとお休みして、しばらくJSをゴリゴリやろうかと思い始めました。
最後にHTMLのイメージに付けるクラスのところも位置を個別に調整できるように下記のように追加します。

<html>
<div class="col-md-6"> <img class="img-responsive zoom" src="images/feature-mobile_5.png" data-offset-x="260" data-offset-y="400"> </div>
</html>

さあ、ティザーサイトがますますCOOLになっちゃいました。
内容もリニューアルしています。ぜひ虫眼鏡で遊んでみてくださいねー。
suke-dachi.jp