【IE6】【IE7】
写真を一覧表示しクリックで拡大表示
最近一眼レフを買ったのでその写真を自分のHPに掲載しようと思い掲載方法を検討しました。参考→「
検討結果ページ」。
JavaScriptとCSSが判れば簡単にできるが、汎用性の高いと思われる掲載方法について作成方法の
説明を前項「画像関連」と内容が一部ダブリますが本ページを新設しました。
1．実行方法
(1)HTMLファイルを開くと左図のような一覧写真を表示します
・表示される写真はｊｓファイルにJPGファイルリストを記述
(2)写真をクリックで下図のような原寸の拡大写真が表示されます。
・「撮影状況の表示」にチェックで拡大写真に撮影状況も表示されます
（撮影状況は一般的には不要でありこの機能は通常は削除）
(3)拡大表示されたWebを右クリックで次の写真を表示します
・最終まで表示すると最初に戻る設定になっています
(4)左クリックで(1)の一覧の画面に戻ります
この写真を一覧表示しクリックで拡大表示のサンプルは「
土手の上の花壇-コスモス」を実行で見えます。
2．作成方法＆ソース説明
2-1 表示する写真の保存場所を記載の一覧表を作成
(1)下記が一覧表ｊｓファイルの例です
(2)配列photo[**]は写真のファイル名を指定（別フォルダの場合はパス名も記入のこと）
(3)配列phw[**]は縦写真は"t"(t1は横写真の逆サイズ）、横写真は"y"を指定
(4)配列phm[**]はコメントを記入
(5)配列phz[**]は撮影状況（通常は不要あり削除、その場合は各ソースの配列phz部もの削除のこと）
-------------------------------------------------------------------
photo=new Array();var pn=1;
phw=new Array();var wn=1;
phm=new Array();var mc=1;
// **************** 以下に表示の写真を指定 ***************
= "d01-01.jpg"; phw[wn++] = "y"; phm[mc++] = "ヒナゲシ-1";
photo[pn++] = "d01-02.jpg"; phw[wn++] = "y"; phm[mc++] = "ヒナゲシ-2";
photo[pn++] = "d01-03.jpg"; phw[wn++] = "y"; phm[mc++] = "花菱草";
photo[pn++] = "d01-04.jpg"; phw[wn++] = "y"; phm[mc++] = "かすみ草";
photo[pn++] = "d01-05.jpg"; phw[wn++] = "y"; phm[mc++] = "矢車草";
// *************** 撮影状況 *********************************
phz=new Array();var zc=1;
phz[zc++] = "../h01-01s.gif";
phz[zc++] = "../h01-02s.gif";
phz[zc++] = "../h01-03s.gif";
phz[zc++] = "../h01-04s.gif";
phz[zc++] = "../h01-05s.gif";
---------------------------------------------------------------------
jsファイルの読み込みは以下です
<SCRIPT Language='JavaScript' src='dai1.js'></SCRIPT>
2-2 制御用メインのHTMLファイル
ソースの主な内容を以下に説明します。
(1) 一覧表示する写真のサイズを指定
一覧表示する写真のサイズをここで指定します。
// ***** 表示サイズ指定*****
var yoko ="150";
var tate ="113";
//************************
(2) 別ウインドウを開き拡大写真を表示
・ここで新ウインドウで拡大表示するHTMLファイル（本例：dai1a.html）(2-3項参照)を開く
・その時HTMLファイルの後ろに？+「写真の縦横情報」+写真番号を付けて送付する
function daiph(phno) {
if (document.forms(0).ch1.checked == true) yn="y";
if (document.forms(0).ch1.checked == false) yn="n";
win=window.open("dai1a.html?" + yn + phno,"Myshasin","fullscreen=yes");
}
(3) 一覧表示写真の影付き台紙の表示
・影付き台紙は下記のようにCSSでimgタグ実行毎に背景を付けています
・影付きの絵（本例：kage-150.jpg）（下図参照）は事前に作成すること
・paddingで画像の右側(10px)と下側(9px)に余白を加えています
<style type="text/css"><!--
div.images img {
background-image: url("kage-150.jpg");
background-repeat: no-repeat;
background-position: right bottom;
: 0px 10px 9px 0px;
}
--></style>
(4)テーブルへ一覧表を表示
・下記内容は写真5個で1テーブル作成
・1個のセル〜 | にはコメントphm[*j]と写真を表示
・縦写真（phw[*]=="t"）は横幅を狭く（tate*0.75）して縦に表示
・写真クリック（Onclick='daiph(*)'）でファンクションdaiph()を実行します
document.write("<div class='images'>");
for(i=1;i<endph+1;i++){
document.write("<table><tr>");
for(j=0;j<5;j++){
if (i+j < endph+1){
document.write("<td>");
document.write(phm[i + j] + "<br>");
document.write("<a href='#' Onclick='daiph("+ (i+j) + ")'>");
if(phw[ i+j]=="t"){
document.write("&hlt;img src=" + photo[ i+j] + " width=" + tate*0.75 + " height=" + tate + " border='0' &hgt;&hlt;/a&hgt;");
}
if(phw[ i+j]=="t1"){
document.write("&hlt;img src=" + photo[ i+j] + " width=" + tate + " height=" + yoko + " border='0' &hgt;&hlt;/a&hgt;");
}
if(phw[ i+j]=="y"){
document.write("&hlt;img src=" + photo[ i+j] + " width= "+ yoko + " height=" + tate+ " border='0' &hgt;&hlt;/a&hgt;");
}
document.write("</td>");
}
}
i=i+4;
document.write("</tr></table><br>");
}
document.write("</div>");
document.write("</center>");
-->
</script>
2-3 拡大写真表示用のHTMLファイル
・写真リストは<SCRIPT Language='JavaScript' src='dai1.js'></SCRIPT>でメインと同じｊｓファイルを使用
・開いているこのHTMLファイルは左クリックで閉じる（onclick="window.close()）
・右クリックで通常のショートメニュー禁止（oncontextmenu="return false"）
・右クリックで（onmousedown=migid）ファンクションmigidを実行
・拡大写真はdocument.myimg.src= photo[*]で表示します
・メッセージの撮影状況不要の場合はsch0=="y"の列は削除して下さい
<BODY BGCOLOR=#FFFFEE onclick="window.close()" oncontextmenu="return false">
<SCRIPT Language='JavaScript'>
<!--
sch = unescape(location.search);
sch0 =sch.substr(1,1);
sch1 =sch.substr(2,100);
endph=photo.length-1 ;
siz="";
// siz=" width='100%' height='100%'";
document.write("<center>");
document.write("<img src='kari.jpg' NAME='myimg' border=0" + siz + " alt='左：閉じる/右：次へ'>");
document.write("<div id='mytitle' style='position:absolute;bottom:1%;right:1%'>");
document.write("</div>");
document.write("</center>");
no2=sch1;
phot();
function migid(){
if(event.button == 2){
no2++;
if(no2 > endph )no2=1;
phot();
}
}
document.onmousedown=migid;
function phot(){
document.myimg.src= photo[no2];
if (sch0=="y"){
document.getElementById('mytitle').innerHTML="<table><tr><td>【"+ no2+ "】"+ phm[no2] + " <img src='"+ phz[no2] + "'</td></tr></table>";
}
else{
document.getElementById('mytitle').innerHTML="<table><tr><td>【"+ no2+ "】"+ phm[no2] + "</td></tr></table>";
}
}
// -->
</SCRIPT>
3 サンプルファイルのダウンロード
ここでは「土手の上の花壇-コスモス」を参考に説明しましたが、何方も簡単にこの表示が出来るように使用したサンプルファイル
をまとめてダウンロードできるようにしました。
写真を一覧表示しクリックで拡大表示の
サンプルファイルダウンロード
圧縮ファイル名：phot1.zip
解凍でフォルダ内に、dai1.js(2-1で説明）、dai1.html(2-2で説明）、dai1a.html(2-3で説明）、kage-150.jpg があります
【HOME】
【実用編へ戻る】