***久しぶりの書込み [#z9f4daef]
暫く書いていませんでしたがネタが無かったわけではありません。書いている途中で内容に付属する部品を作り始めて、それが大掛かりになってきてしまい。途中で他の事やり始めた結果、放置していました。orz&br;
まぁ1月ぐらいに書いた内容ですが、せっかく部品も完成させたので・・・。
//cut
***[Javascript][php][plugin] [#a1a57b5f]
***[Javascript][plugin] [#a1a57b5f]
ホームページ上の部品として、画像数枚をボタンで切替表示できるものを作ってくれと頼まれたのだが、それってjavascriptじゃないと作れないなぁと思いつつ、要望を満たしているようなjavascriptを使っているサイトを探してみると、単純なものが少ない。
しかたがないので、要望条件に近く単純な構造のものを探し改造してみることにした。&br;
ただjavascriptなんて殆ど触ったことが無いので、構造とルールを読取るのに少し苦労させられた。
特に見つけた参考プログラムには改行、レベルの段階構造が無く、変数名に意味の無いa、aaといった一文字二文字を使っている事が多く読取りにくさと同時に移植時に元からあるjavascriptと変数名が被りやすい書き方をしていた。後々の事を考えるとめんどくさくても変数名はなるべく意味のあるものを使いたいし((私は間違った単語をよく使っているがorz))、内容を正しく読み取れるように整理も必要と考え、殆ど書き換える作業が必要だった。まぁ最終的にロジックもおかしい気がしたから作り直したのだが・・・。&br;
#geshi(javascript,number){{{
<html>
<head>
<title>img view</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script language="JavaScript">
<!--
//*****img view 1.0
var i_count=0,last_count,hantei=1,position=0;
var img_f="../test/img/test_";
store_file=new Array();
//画像ファイル名の配列格納しカウントを増やす
function img_name(){
store_file[i_count]=new Image();
store_file[i_count].src=img_f+i_count+".jpg";
i_count++;
}
//画像ファイルが存在するかチェックするためにhtmlに参照先を定義
function img_set_check(){
document.getElementById("check").src=img_f+i_count+".jpg";
}
//hanteiが1の間、画像が存在すればimg_name()とimg_set_check()を繰返す
function on_load(){
p_no_set();
document.getElementById("button1").style.visibility="visible";
if(hantei){
img_name();
img_set_check();
}
}
//画像が存在しなければ、hanteiを0にして処理を終了する
function on_error(){
document.getElementById("total_img").firstChild.nodeValue=i_count+"]";
last_count=i_count-1;
hantei=0;
}
function top(){
position=0;
img_set();
p_no_set();
}
function previous(){
if(position>0){
position--;
img_set();
p_no_set();
}else{
position=last_count;
img_set();
p_no_set();
}
}
function next(){
if(position<last_count){
position++;
img_set();
p_no_set();
}else{
position=0;
img_set();
p_no_set();
}
}
function img_set(){
document.getElementById("imgview").src=store_file[position].src;
}
function p_no_set(){
document.getElementById("count").firstChild.nodeValue="[ "+(position+1)+"/";
}
-->
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="img_set_check();">
<table width = "580">
<tbody>
<tr>
<td id="imgtd" align="center" valign="middle" colspan="2">
<div id="imgdiv">
<img id="imgview" galleryimg="no" src="../test/img/test_0.jpg" />
</div>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<div id="button1" style="visibility:hidden;">
<input type="button" onclick="top();" value="top" />
<input type="button" onclick="previous();" value="< 前" />
<input type="button" onclick="next();" value="次 >" />
</div>
</td>
<td><span id="count">[ 1/</span><span id="total_img">1]</span></td>
</tr>
</tbody>
</table>
<img id="check" galleryimg="no" style="height:10;visibility:hidden;" onload="on_load();" onerror="on_error();" />
</body>
</html>
}}}
とりあえずhtml文に追加するならこれで十分なんだが、この話を書くと実際の動作サンプルを置きたくなる。もちろん画像と単純なhtmlファイルを適当なwebフォルダーにUPすれば簡単なのだろうが、一応PukiWikiプラグインを下手なりにも作っているサイトとしてはプラグインの構造なんかを考えてしまう。勿論こんなプラグインに需要なんてなさそうだが自己満足の世界で作ってしまうのが私なのでしょう。
#img_view
サンプル画像に、以前 友達からもらった風景がちょうど良いサイズだったので遣わさせて貰いました。
![[PukiWiki]](wiki/image/dog3.png "[PukiWiki]")