今では画像のイメージビューアーとしてのjQueryプラグインは多々あります。
最近よく見かけるもので、画像をクリックもしくはロールオーバーすることで
周りのレイアウトは保持したままで画像のみがその場で拡大表示されるエフェクト。
画像の見せ方としてちょっと興味があったので
プラグインを使わず実際にスクリプトを組んで実装する方法を、
あれこれ試してみたサンプルを紹介してみます。
まずは動作サンプルは以下から。
画像にマウスオーバーしてみてください。
jQuery IMG HOVER ZOOMUP【SAMPLE01】
画像にマウスオーバーすることで周りのレイアウトを崩さずに画像のみを拡大表示します。
拡大後、画像からマウスアウトすると元に戻ります。
内部構成について、まずはHTMLから。
配置する画像とそれに付随するテキストのみの形で
HTMLはあくまでシンプルな形にしておきます。
◆HTML <div id="container"> <div> <img src="img/photo01.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div> <img src="img/photo02.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> </div><!--/container-->
実際にマウスオーバーで拡大動作を実行させる＜img＞タグに対して
「class=”magnify”」を付けます。（もちろんこのクラス名は変更可）
※＜img＞タグの属性「width」「height」はjQuery側から追加するのでHTMLソースには記述しません。
そして、今回は特にCSSで特別な指定はしていませんが
演出として、拡大表示した際に画像にCSS3を使ってのドロップシャドウをつけているのでその指定方法について。
クラスを一つ用意して「box-shadow」を指定。（もちろんIEは表示されません。）
◆CSS
.shadow {
-moz-box-shadow: 0 0 10px #333;
-webkit-box-shadow: 0 0 10px #333;
box-shadow: 0 0 10px #333;
}
そして実際の動作スクリプトは以下。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).load(function(){
var thumbSize = 150;
var magnifySize = 350;
$(".magnify").each(function(){
$(this).css({width:(thumbSize)});
});
var objWidth = $('.magnify').width();
var objHeight = $('.magnify').height();
$(".magnify").each(function(){
$(this).wrapAll('<span class="magnify_cover"></span>');
$(this).parent('.magnify_cover').css({
margin: '0 10px 10px 0',
width: (objWidth),
height: (objHeight),
float: 'left',
position: 'relative'
});
});
$(".magnify").hover(function(){
$(this).css({top:'0',left:'0',position: 'absolute'});
$(this).stop().animate({width:(magnifySize)},500,function(){
$(this).addClass('shadow');
});
}, function(){
$(this).stop().animate({width:(thumbSize)},300,function(){
$(this).css({top:'',left:'',position: 'relative'});
$(this).removeClass('shadow');
});
});
});
});
</script>
スクリプト上部にある変数「thumbSize」は縮小（通常）表示の画像サイズ（width）で、
もう一方の「magnifySize」は拡大表示した際の画像サイズ（width）を指定する項目になります。
※ここには任意の値を入力します。
ページロードした際にクラス「magnify」がついた画像に対して
その周りを「span class=”magnify_cover”」が覆い被さり、
「span class=”magnify_cover”」は縮小表示の画像サイズと同じ大きさで配置されます。
画像にマウスオーバーした際には「span class=”magnify_cover”」が
縮小画像が配置されている状態と同じ役目をしてレイアウトを保持。
画像自体は「position:absolute」状態で拡大表示しています。
拡大後は画像に対してクラス「shadow」が追加され、
CSS3でドロップシャドウがついた状態になります。
ひとまず全体構成については、この様な感じに。
上記サンプルは画像が左寄せの場合のみのサンプルになりますが、
左右交互に画像を配置するような場合には以下の様な構成で可能になります。
jQuery IMG HOVER ZOOMUP【SAMPLE02】
HTML側でそれぞれのセクションを囲っている＜div＞に対してクラスを付けることで
画像を右に配置するか左に配置するか記述します。
◆HTML <div id="container"> <div class="left"> <img src="img/photo01.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div class="right"> <img src="img/photo02.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div class="left"> <img src="img/photo03.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> <div class="right"> <img src="img/photo04.jpg" alt="" class="magnify" />これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 </div> </div><!--/container-->
画像を左に配置する場合は＜div class=”left”＞
画像を右に配置する場合は＜div class=”right”＞ とします。
CSS側は一つ目のサンプルと同じ構成。
スクリプトは下記の様な構成になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).load(function(){
var thumbSize = 150;
var magnifySize = 350;
$(".magnify").each(function(){
$(this).css({width:(thumbSize)});
});
var objWidth = $('.magnify').width();
var objHeight = $('.magnify').height();
$(".magnify").each(function(){
$(this).wrapAll('<span class="magnify_cover"></span>');
$(this).parent('.magnify_cover').css({
width: (objWidth),
height: (objHeight),
position: 'relative'
});
if($(this).parents().hasClass('left')) {
$(this).parent('.magnify_cover').css({
margin: '0 10px 10px 0',
float:'left'
});
}
if($(this).parents().hasClass('right')) {
$(this).parent('.magnify_cover').css({
margin: '0 0 10px 10px',
float:'right'
});
}
});
$(".magnify").hover(function(){
if($(this).parents().hasClass('left')) {
$(this).css({top:'0',left:'0',position: 'absolute'});
}
if($(this).parents().hasClass('right')) {
$(this).css({top:'0',right:'0',position: 'absolute'});
}
$(this).stop().animate({width:(magnifySize)},500,function(){
$(this).addClass('shadow');
});
}, function(){
$(this).stop().animate({width:(thumbSize)},300,function(){
if($(this).parents().hasClass('left')) {
$(this).css({top:'',left:'',position: 'relative'});
}
if($(this).parents().hasClass('right')) {
$(this).css({top:'',right:'',position: 'relative'});
}
$(this).removeClass('shadow');
});
});
});
});
</script>
親にあたる＜div＞のクラスを見て条件分岐で
「float:left」「float:right」とそれに伴う配置設定を振り分けています。
全体構成については以上です。
この様なその場で拡大表示させるイメージビューアーも
そんなに複雑なスクリプトにならずに実装可能になりそうなので
何かの時に使えそうです。
スクリプトを少しカスタマイズすれば
マウスオーバーではなくクリックして動作実行に変更するのも可能になります。
この様なイメージビューアーが必要になった際に是非。。。