続々、画像クリック時のjavascript
ミドルサイズになっている通常表示の画像を、クリックしたときに隠していたdivを表示してpop upさせて拡大表示させるのは、画像クリック時のjavascriptにて作りました。
で、pop up表示させた画像をクリック、またはスクロールすることで閉じる処理は、続、画像クリック時のjavascriptでやっています。
この状態だと、画像を拡大表示させて次々に見ていきたい時は、閉じてまた開いてを繰り返さないといけません。
一度拡大表示させたら、そのまま次や前の画像を見れた方が全然使い勝手がいいわけです。
画像を変更するのは<img src="">タグの画像の url を変更するだけなので簡単なことです。
そのページに表示されている画像は javascript の imageオブジェクトに配列で格納されているので、それを利用できます。
imageオブジェクトから画像の url を得るには、
document.images[].src
の、書式になります。
配列imagesの添え字には番号か、<img src=""> タグに id が設定してあればその id を指定することもできます。
ということで、作った javascript コード。
var imageslist=new Array();
var imagesdirnum=-1;
function nextarrow(openum){
var doc=document;
//初めて呼ばれた時に表示したい画像のリストを作る
if(imageslist.length==0){
var tmpimagessrc;
for(var i=0;i<doc.images.length;i++){
tmpimagessrc=doc.images[i].src;
//ページにはデザイン用の画像も含まれるために選り分ける
if(tmpimagessrc.indexOf("-500")!=-1){
tmpimagessrc=tmpimagessrc.substring(0,tmpimagessrc.lastIndexOf("-5"))+".jpg";
imageslist.push(tmpimagessrc);
}
}
}
//その時表示されている画像がリスト中の何番かを得る
if(imagesdirnum==-1){
var curimg=doc.images["upimage"].src;
for(var j=0;j<imageslist.length;j++){
tmpimagessrc=imageslist[j];
if(tmpimagessrc==curimg){
imagesdirnum=j;
break;
}
}
}
//openumは次か前の画像かの判断
if(openum==1){
imagesdirnum++;
if(imagesdirnum>=imageslist.length){
imagesdirnum=0;
}
}else{
imagesdirnum--;
if(imagesdirnum<0){
imagesdirnum=imageslist.length-1;
}
}
var targeturl=imageslist[imagesdirnum];
doc.getElementById("upimage").src=targeturl;
}
リストとリスト内の画像を指定する添え字に使う変数は、呼び出されるたびに使用するのでグローバル変数にしています。
8～19行目は初めて呼び出された時に、表示したい画像のリストを作る処理です。
画像にはページのデサインのための画像も含まれるので、鳥の画像だけに絞り込みます。
ページ上に表示されている鳥の画像はミドルサイズが指定してあり、その画像の url には "-500x375" の文字列を必ず含んでいるのでそれを利用しています。
22～31行目は、これも初めて呼び出された時に、そのとき表示されている画像がリスト中で何番の画像かを調べる処理です。
後は、次か前かを指定された時に、その番号を増減することで画像の url を得る事が出来ます。
pop upを閉じるときはこの番号を初期化する必要があります。
下はpop up用隠しdivのhtml。
4,5行目が新たに追加した箇所。
<div id="imageframe">
<p id="explain">画像をクリックするかスクロールさせると元に戻ります。</p>
<div id="popup"><a href="JavaScript:erasepop()"><img src="" id="upimage" name="upimage" alt="" /></a></div>
<div id="rightarrow"><a href="Javascript:nextarrow(1)">»</a></div>
<div id="leftarrow"><a href="Javascript:nextarrow(0)">«</a></div>
</div>
Post : 2012/08/11 13:14
Comments feed
Trackback URL : https://strix.main.jp/wp-trackback.php?p=21445