五島ツーレポとスライドスクリプト

先の五島ツーリングレポートは上五島編と福江島編に分けてようやく脱稿。今回はGoogleMaps航跡図の位置調整などを行ったので結構手間取ってしまったが、更に写真のスライドショー的な機能を追加した。

やっぱり料理の写真で全景とクローズアップのどちらを使うか悩ましかったので、いつものようにアニメーションgifで順繰りに表示しようとしたのだが、画像が汚くてちっともうまそうで無くなってしまったのがそもそもの発端。

かといって食い物画像ばかり掲載するのはページ全体のバランスを欠くし、何より興味の無い人にとって不要な画像はウザイだけだ。そういうわけで、マウスのクリック操作でスライドショーよろしく画像を次々と差し替えるJavaScriptを実装してみたわけ。

そのJavaScriptを公開すると

<script language=JavaScript>
<!--
function SlideShow(img,rtx){
  var baselen, imgix;
  baselen=img.src.lastIndexOf(".");
  imgix=Number(img.src.substr(baselen-1,1));
  imgix++;
  if ( rtx < imgix ) imgix=1;
  img.src=img.src.slice(0, baselen-1)+String(imgix)+img.src.slice(baselen);
}
//-->
</script>

という感じ。これをヘッダーとかに入れておいて、

<img src="images/20061104a1.jpg" **onClick="SlideShow(this,4);"** />

という感じで呼び出せば良い。".jpg"の前の数字1桁をカウントアップしていき、引数の4を越えたら1に戻る単純な仕組みだ。可変部分が数字1桁なので最大9画像という制限はあるものの、取り敢えず充分だろう。

JavaScriptが使えなかったり、禁止している場合も最初の1枚が表示される。

できてしまえば何という事の無いコードだが、汎用化させるのに結構頭を使ってしまった。その甲斐あって初版コードに比べて随分コンパクトになったわけで、やはり「優れたコード程シンプルである」という金言を再確認した次第。

実質5ステップのJavaScriptにオリジナリティを立証するのも馬鹿らしいので、気に入ったらパクるなり参考にするなり自由に使って頂きたい。