クリックした画像を拡大・縮小する（JavaScript/jQuery）
ホーム>クリックした画像を拡大・縮小する（JavaScript/jQuery）
[JavaScript][jQuery]
小さい画像をクリックすると、ブラウザのサイズに合わせて拡大表示し、もう一度その画像をクリックすると、拡大されていた画像を縮小します。
また、拡大されている画像があるときに、別の画像をクリックすると、拡大されている画像を縮小した後、クリックした画像を拡大します。
→サンプル
ソースコード
HTML
<body>
<div id="text"></div>
<img src="../../../data/img/information/20100918-01.jpg" class="img" alt="青い画像" />
<img src="../../../data/img/information/20100918-02.jpg" class="img" alt="グラスの画像" />
<img src="../../../data/img/information/20100918-03.jpg" class="img" alt="ひまわりの画像" />
<img src="../../../data/img/information/20100918-04.jpg" class="img" alt="ペットボトルの画像" />
</body>
HTMLソースでは、拡大縮小したい画像を配置し、class属性に「img」という名前を指定します。また、alt属性には、その画像の説明を書きます。
<div id="text"></div>
は、画像のalt属性に書いたテキストを画面表示するためのボックスです。
CSS
html,body{
height:100%;
}
.img{
width:100px;
height:80px;
display:block;
margin:10px 0px 10px 0px;
}
#text{
display:none;
position:absolute;
margin:auto auto auto auto;
}
CSSでは、html要素とbody要素に、高さ100%の指定をします。
この指定をしないと、ブラウザのサイズを正しく取得できません。
.imgクラスには、最初に画像を表示しておくサイズを指定します。
ここでは、横100ピクセル、高さ80ピクセルにしています。
つまり、最初に配置する画像は、大きなサイズの画像をCSSで小さく表示しており、その画像をJavaScriptによって拡大するようにしています。
textセレクタには、画像のalt属性に設定したテキストが拡大したときに表示されます。最初はdisplay:noneで、非表示にしています。
position:absoluteにすることで、画像のサイズに合わせてテキストの表示位置を決めます。
JavaScript
$(function(){
$(".img").click(function(){
var Index=$(".img").index(this);
if($(this).attr("name")!='clicked'){
var ID=$("[name='clicked']").attr("id");
ResizeSmall(ID);
ResizeBig(this,Index);
}
else{
ResizeSmall(Index);
}
});
});
// 画像を拡大
function ResizeBig(Object,Index){
$(Object).css("z-index","1");
var w,h,run,mem,imgWidth,imgHeight;
if(!jQuery.support.opacity){ // IEの場合
run=Object.runtimeStyle;
mem={ w:run.width, h:run.height };
run.width="auto";
run.height="auto";
w=Object.width;
h=Object.height;
run.width=mem.w;
run.height=mem.h;
}
else if(!jQuery.support.checkOn){ // SafariとChromeの場合
w=Object.naturalWidth;
h=Object.naturalHeight;
}
var BrowserWidth=document.body.clientWidth-110;
var BrowserHeight=document.body.clientHeight-110;
var Top=10+80*Index;
if(w>h){ imgWidth=BrowserWidth;
imgHeight=h/w*imgWidth;
if(imgHeight>BrowserHeight)
{
imgHeight=BrowserHeight;
imgWidth=w/h*imgHeight;
}
}
else{
imgHeight=BrowserHeight;
imgWidth=w/h*imgHeight;
if(imgWidth>BrowserWidth){
imgWidth=BrowserWidth;
imgHeight=h/w*imgWidth;
}
}
if(imgHeight > imgWidth){
Left=300;
}
else{
Left=120;
}
var ST=80;
if($(window).scrollTop()>0){
ST=$(window).scrollTop();
}
$(Object).css({"position":"absolute","top":Top,"left":3});
$(Object).animate({ top:ST,left:Left },500,function(){
$(Object).animate({
width:imgWidth, height:imgHeight },500,function(){
var textTop=ST-30;
$(Object).attr({"name":"clicked","id":Index});
$("#text").css({"display":"block","color":"#fff","top":textTop,
"left":"150","z-index":"2","text-align":"center","font-size":"40px"});
$("#text").text($(Object).attr("alt"));
});
});
}
// 拡大した画像を縮小
function ResizeSmall(Index){
$("[name='clicked']").css("z-index","0");
$("#text").css("display","none");
var imgWidth=100;
var imgHeight=80;
var Top=10+80*Index;
$("[name='clicked']").animate({
width:imgWidth,height:imgHeight},500,function(){
"[name='clicked']").animate({top:Top,left:3},500,function(){
$("[name='clicked']").css({"position":"static"});
$("[name='clicked']").attr("name","");
});
});
}
まず、最初の部分です。
$(function(){
$(".img").click(function(){
var Index=$(".img").index(this);
if($(this).attr("name")!='clicked'){
var ID=$("[name='clicked']").attr("id");
ResizeSmall(ID);
ResizeBig(this,Index);
}
else{
ResizeSmall(Index);
}
});
});
.imgクラスを指定している要素がクリックしたらアクションを起こします。
Index=$(".img").index(this)
は、imgクラスを指定している画像が何番目であるのかを調べています。
この順番を調べることで、画像が移動するときの場所を特定します。
if($(this).attr("name")!='clicked'){ ...
は、画像のname属性がclickedという値でなければ次の命令を実行する、という意味です。
このスクリプトでは、クリックした画像は拡大表示されます。このとき、拡大表示された画像には、name属性に「clicked」という値を与えています。
つまり、name属性がclickedではないということは、拡大表示されていない画像をクリックした、ということになります。
var ID=$("[name='clicked']").attr("id");
ResizeSmall(ID);
ResizeBig(this,Index);
拡大表示されていない画像をクリックした場合に実行される命令です。
まず、拡大表示されている画像が在る場合、その画像のidを取得して、ResizeSmallという関数（後述）に渡します。
その後、ResizeBigという関数（後述）に、クリックした画像のidを渡します。
次の部分は、ResizeBig関数です。
この関数では画像を拡大表示します。
function ResizeBig(Object,Index){
$(Object).css("z-index","1");
var w,h,run,mem,imgWidth,imgHeight;
if(!jQuery.support.opacity){ // IEの場合
run=Object.runtimeStyle;
mem={ w:run.width, h:run.height };
run.width="auto";
run.height="auto";
w=Object.width;
h=Object.height;
run.width=mem.w;
run.height=mem.h;
}
else if(!jQuery.support.checkOn){ // SafariとChromeの場合
w=Object.naturalWidth;
h=Object.naturalHeight;
}
var BrowserWidth=document.body.clientWidth-110;
var BrowserHeight=document.body.clientHeight-110;
var Top=10+80*Index;
if(w>h){ imgWidth=BrowserWidth;
imgHeight=h/w*imgWidth;
if(imgHeight>BrowserHeight) {
imgHeight=BrowserHeight;
imgWidth=w/h*imgHeight;
}
}
else{
imgHeight=BrowserHeight;
imgWidth=w/h*imgHeight;
if(imgWidth>BrowserWidth){
imgWidth=BrowserWidth;
imgHeight=h/w*imgWidth;
}
}
if(imgHeight > imgWidth){
Left=300;
}
else{
Left=120;
}
var ST=80;
if($(window).scrollTop()>0){
ST=$(window).scrollTop();
}
$(Object).css({"position":"absolute","top":Top,"left":3});
$(Object).animate({ top:ST,left:Left },500,function(){
$(Object).animate({ width:imgWidth, height:imgHeight },500,function(){
var textTop=ST-50;
$(Object).attr({"name":"clicked","id":Index});
$("#text").css({"display":"block","color":"#000","top":textTop,
"left":"150","z-index":"2","text-align":"center","font-size":"40px"});
$("#text").text($(Object).attr("alt"));
});
});
}
まず、画像のz-indexプロパティを1にします。
$(Object).css("z-index","1");
画像を自由に移動するためには、positionプロパティをabsoluteにする必要があります。そして、画像が移動するときに、他の画像と重なることがあるため、そのときに上に表示されるようにするために、指定します。
if(!jQuery.support.opacity){ // IEの場合
run=Object.runtimeStyle;
mem={ w:run.width, h:run.height };
run.width="auto";
run.height="auto";
w=Object.width;
h=Object.height;
run.width=mem.w;
run.height=mem.h;
}
else if(!jQuery.support.checkOn){ // SafariとChromeの場合
w=Object.naturalWidth;
h=Object.naturalHeight;
}
次の部分では、本来の画像のサイズを取得します。
本来の画像のサイズを取得するには、InternetExplorerとその他のブラウザでは方法が異なります。そのため、ブラウザによって処理を分けています。
var BrowserWidth=document.body.clientWidth-110;
var BrowserHeight=document.body.clientHeight-110;
var Top=10+80*Index;
この部分ではブラウザのサイズを取得しています。
左側に並んでいる画像から離れて拡大画像を表示するため、実際のブラウザのサイズよりも画像の幅の分だけ小さくサイズを取得します。
if(w>h){ imgWidth=BrowserWidth;
imgHeight=h/w*imgWidth;
if(imgHeight>BrowserHeight) {
imgHeight=BrowserHeight;
imgWidth=w/h*imgHeight;
}
}
else{
imgHeight=BrowserHeight;
imgWidth=w/h*imgHeight;
if(imgWidth>BrowserWidth){
imgWidth=BrowserWidth;
imgHeight=h/w*imgWidth;
}
}
if(imgHeight > imgWidth){
Left=300;
}
else{
Left=120;
}
この部分では、画像をブラウザのサイズよりはみ出さないようにするために大きさを調整しています。また、画像の縦横比から、拡大する大きさを割り出します。
Left=300は、画像が縦長だった場合、表示する場所を少し中央よりにするため、左から300ピクセル移動させています。
if($(window).scrollTop()>0){
ST=$(window).scrollTop();
}
小さいサイズの画像がたくさんありすぎて、ブラウザをスクロールした場合、拡大画像を表示するときに、スクロールした分だけ移動させます。
$(Object).css({"position":"absolute","top":Top,"left":3});
拡大する画像のpositionプロパティをabsoluteにします。
$(Object).animate({ top:ST,left:Left },500,function(){
画像のサイズを変更しないまま、画面の上に移動します。
500というのは、0.5秒かけて移動する、という意味です。
$(Object).animate({ width:imgWidth, height:imgHeight },500,function(){
次に、画像のサイズを先ほど決定したサイズになるまで拡大します。
var textTop=ST-50;
$(Object).attr({"name":"clicked","id":Index});
$("#text").css({"display":"block","color":"#000","top":textTop,
"left":"150","z-index":"2","text-align":"center","font-size":"40px"});
$("#text").text($(Object).attr("alt"));
});
});
画像のname属性にclickedを設定します。
画像のalt属性に入力されているテキストを拡大した画像の上に表示します。
次は、最後の部分です。
画像を縮小する、ResizeSmall関数です。
// 拡大した画像を縮小
function ResizeSmall(Index){
$("[name='clicked']").css("z-index","0");
$("#text").css("display","none");
var imgWidth=100;
var imgHeight=80;
var Top=10+80*Index;
$("[name='clicked']").animate({
width:imgWidth,height:imgHeight},500,function(){
$("[name='clicked']").animate({top:Top,left:3},500,function(){
$("[name='clicked']").css({"position":"static"});
$("[name='clicked']").attr("name","");
});
});
}
$("[name='clicked']").css("z-index","0");
$("#text").css("display","none");
縮小する画像のz-indexプロパティを0にして、重なり順を背面にします。
また、表示していたテキストを消します。
$("[name='clicked']").animate({
width:imgWidth,height:imgHeight},500,function(){
拡大している画像を元の大きさに縮小します。
$("[name='clicked']").animate({top:Top,left:3},500,function(){
縮小した画像を、元の位置に移動します。
$("[name='clicked']").css({"position":"static"});
元の位置に移動したところで、positionプロパティをstaticにして、本来配置してあった位置に戻します。
$("[name='clicked']").attr("name","");
name属性を空にします。
関連リンク
- マウスクリックでテキストを入れ替える（JavaScript/JQuery）
- 一定時間で変わる広告(JavaScript/jQuery)
- 一定時間でローテーションする広告(JavaScript/jQuery)
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る（クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-9-18
〔Amazonの書籍紹介ページを開きます〕
|
jQueryの入門書。つくるスクリプトを明確にしており、それを短いサンプルコードを参考に実現していきます。jQueryの使い方が理解できるようになります。 |
|
Windows OSの最新版。メモリを4G積めば非常に速く快適に動作します。XPに満足している人には当分必要ないかもしれませんが、不評のVistaよりはるかにいいOSです。 |