こんにちは。
需要はわからない。
只野です。
最近のwebページで画像がないwebページはほぼないと言ってよいでしょう。
私はweb系のシステム開発をする仕事をしているのですが、お客様からのご要望で
指定のタイミングで画像を拡大表示できませんか？
こんな要望もよく聞くところです。ただ画像を拡大していと言ってもどのように？はバラバラだったりします。「別画面で大きく見たい。」、「ページ遷移はせず画像クリックで拡大させたい。」、「一部だけ拡大できるようにしたい。」と様々です。
毎回作るのも手間なので、最適なプラグインでも導入すれば手っ取り早いですが、ライセンスや要望が細かいお客様だとそうもいかない。結局作る羽目になることも多いです。
画像の拡大鏡が欲しい。
はい。今回は「複数ある画像毎にマウスカーソルを当てた時に一部を拡大したい。」とのご要望だったので、インターネットさんの力を借り、お客様に合う形で以下のような画像を拡大できるものを作成いたしました。
画像内にマウスカーソルを合わせると指定した場所が拡大されます。画像の範囲からマウスカーソルが外れると拡大鏡も閉じます。
ソースは以下のようになっています。
【CSS】
.imagearea{
width:200px;
display:inline-block;
margin: 1em 1em;
}
#loupe{
border:2px solid white;
background-repeat: no-repeat;
background-color: white;
width:200px; height:200px; /* 拡大鏡大きさ */
position:absolute;
display:none;
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
-webkit-border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
}
CSSはインターネットさんの力を借り自分に必要な場所をかき集めました←
基本は拡大鏡の大きさを調整すれば色々使える(はず)です。
【jQuery】
$(function(){
var imageWidth = 200; //画像サイズ
var magnification = 3; //拡大率
$('[id^="image"]').mousemove(function(e){
var offset = $(this).offset();
var left = (e.pageX - offset.left);
var top = (e.pageY - offset.top);
var width = $(this).width();
var height = $(this).height();
var loupe = $(this).children('#loupe');
//拡大鏡起動反転
if(loupe.is(':not(:animated):hidden')){
$(this).trigger('mouseenter');
}
//範囲外判定
if(e.pageX < offset.left || e.pageY < offset.top || e.pageX > (offset.left + width) || e.pageY > (offset.top + height))
{
if(!loupe.is(':animated')){
$(this).trigger('mouseleave');
}
return false;
}
//拡大鏡表示位置
loupe.css('left', e.pageX - loupe.width() / 2);
loupe.css('top', e.pageY - loupe.height() / 2);
//画像表示位置
var x = (magnification * left * -1) + (loupe.width() / 2);
var y = (magnification * top * -1) + (loupe.height() / 2);
loupe.css('background-position', x + 'px ' + y + 'px');
}).mouseleave(function(){
$(this).children('#loupe').stop(true, true).fadeOut('fast');
}).mouseenter(function(){
$(this).children('#loupe').css('background-size', (imageWidth * magnification) + 'px auto');
$(this).children('#loupe').stop(true, true).fadeIn('fast');
});
});
仕組みとしてはマウスムーブイベントを利用し、マウスカーソルが画像内にいるときに、拡大鏡の起動、拡大鏡で表示する画像位置を設定するシンプルな仕組みです。
拡大率に任意の値を設定することで大きさを変えられるようにしています。注意点は横幅を固定で指定する必要があります。
【使い方】
<div id="image1" class="imagearea"> <img src="表示する画像URL" alt="" width="200" /> <div id=loupe style="background-image:url(上記imgと同じ表示する画像URL)" ></div> </div>
拡大鏡を表示した画像をdivで囲みます。そのdiv内に拡大鏡となるdivをさらに入れ子にしています。画像を増やす場合は上記セットで増やしていけば拡大鏡が使えるようになります。
はい。
動きは面白いけれど、需要そんななさそうプログラムです。拡大表示するならやはり普通にモーダルウィンドウとかで大きくしたほうが使いやすいのではと思う今日この頃です。
本日はこの辺で
