虫眼鏡で覗くとレントゲンのように透けて見える効果を画像につけれる「MagnigierRentgen」

実用性はさておき、「画像にマウスカーソルを置くと、その部分が透けて見える」という効果をつけれるMagnifierRentgenを使ってみたら、面白いjQueryプラグインだったので紹介です。

MagnigierRentgenとは

MagnifierRentgenは、画像にレントゲンのような透かし効果を付けることができるjQueryプラグインです。

画像の上に、マウスカーソルを置くと、その部分に虫眼鏡が現れて、その虫眼鏡の部分が透けて見える表現を手軽に実装することができます。

言葉で説明するよりも、実際のものを見た方が早いので、実際のMagnifierRentgen効果を使った画像が以下。

このように、画像2枚用意して、通常表示時には「透けていない画像」を表示し、マウスカーソルを乗せたときだけ「透けた画像」を表示するような仕組みになっています。

MagnifierRentgen利用の主な手順

MagnifierRentgenを利用するには、主に以下の手順が必要です。

MagnifierRentgenのダウンロード＆設置
ヘッダーでCSSを読み込む
フッターでスクリプトを呼び出す
画像を表示する要素を書く

多少の設定は必要ですが、手順通りに行えば、そこまで難しい使い方ではないと思います。

MagnifierRentgenのダウンロード＆設置

まずは、jQuery MagnigierRentgen Pluginで「Download ZIP」ボタンをクリックします。

「MagnifierRentgen-master.zip」というファイルがダウンロードされます。

中にある以下のファイルを、取り出します。

dist/jQuery.MagnifierRentgen.min.css
dist/jQuery.MagnifierRentgen.min.js

そして、プロジェクトフォルダ直下に、以下のように設置します。

css/jQuery.MagnifierRentgen.min.css
js/jQuery.MagnifierRentgen.min.js

WordPressテーマ（子テーマ）に設置した場合は、以下のようになります。

ヘッダーでCSSを読み込む

次に、<head></head>内でCSSファイルを以下のように読み込みます。

通常サイトの場合

通常サイトでは以下のように<head></head>内で読み込みます。

<link rel="stylesheet" href="css/jQuery.MagnifierRentgen.min.css">

WordPressテーマの場合

WordPressの、子テーマから利用する場合は以下のように。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/jQuery.MagnifierRentgen.min.css">

WordPress親テーマから利用する場合は以下のように書きます。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/jQuery.MagnifierRentgen.min.css">

WordPressテーマの作法に則って書くなら、wp_enqueue_style()関数を使用してください。

追加のCSS

通常<head></head>内には上記の内容だけで十分ではありますが、今回はわかりやすくするために、以下のCSSを追加しています。

<style type="text/css">
.wrap {
  max-width: 580px;
  margin: 80px auto;
  padding: 10px 20px;
  border: tomato 7px solid;
  position: relative;
}
.wrap img{
  max-width: none !important;
}
</style>

.wrapは、範囲をわかりやすく表示させるためのものです。

.wrap imgにmax-width: none !important;を指定しているのは、max-widthに値が指定してあると、MagnifierRentgenが正常動作しなくなるからです。

これを指定しないと、虫眼鏡で覗いた画像が小さく表示されてしまいます。こういった症状が現れた場合は、上記の方法で、画像要素のMAX幅を無効にしてやる必要があります。

フッターでスクリプトを呼び出す

次にフッターの</body>手前で以下のように呼び出します。

通常サイトの場合

スクリプトファイル呼び出して、jQueryコードを記入します。

<script src="js/jQuery.MagnifierRentgen.min.js"></script>
<script type="text/javascript">
(function($){
  $(".test-plugin").magnifierRentgen();
})(jQuery);
</script>

コード部分は、たったこれだけ。

$(".test-plugin").magnifierRentgen();

WordPressテーマの場合

WordPress子テーマで呼び出す場合は以下を、

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jQuery.MagnifierRentgen.min.js"></script>
<script type="text/javascript">
(function($){
  $(".test-plugin").magnifierRentgen();
})(jQuery);
</script>

WordPress親テーマで呼び出す場合は以下のように記入してください。

<script src="<?php echo get_template_directory_uri(); ?>/js/jQuery.MagnifierRentgen.min.js"></script>
<script type="text/javascript">
(function($){
  $(".test-plugin").magnifierRentgen();
})(jQuery);
</script>

WordPressテーマの作法に則って書くなら、wp_localize_script()関数を使用してください。これを使うと、説明がややこしくなるので割愛。

画像を表示する要素を書く

あとは、コンテンツ部分に以下のようにHTML要素を記入します。

<div class="wrap">
    <div class="test-plugin"
    data-image="https://nelog.jp/wp-content/uploads/2016/03/human.png"
    data-image-zoom="https://nelog.jp/wp-content/uploads/2016/03/bone.png"
    data-size="100"></div>
</div>

HTML要素に必要な属性は以下になります。