画像をスライドショーのように表示させるという
プログラムを先日JavaScriptで作成しました。

今日は、画像の表示方法として、
エントリ内のサムネイルをクリックすると、
元の大きさの画像を別ウインドウで開き、
画像をスライドショーのように見ることができる、
という方法を簡単にご紹介したいと思います。

1. MovableTypeのファイルのアップロードから、
　 画像をアップし、サムネイルを作成します。

2. ブログのエントリにアップされた画像を取り出して操作するために、
　 テンプレートの<$MTEntryBody$>タグを<div>タグで囲み、
　 IDを付けておきます。
　
　　例) <div id="images"><$MTEntryBody$></div>
　
3. <$MTEntryBody$>内の画像全てに操作を行うために、
　 JavaScriptの[getElementById]を使って、
　「images」というID内の要素を取り出し、
　 さらに、IMGタグを[getElementsByTagName]で取り出します。
　
4. サムネイルのクリックで元の大きさの画像を別ウインドウで表示する
　 ために、配列内のサムネイルのsrcを元の画像のsrcに変換します。
　
　 ファイルのアップロードで作成されるサムネイルのデフォルトは、
　 ファイル名の後に「-thumb」が付くので、
　 JavaScriptの[replace]を使って、これを取り外します。
　 つまり、「-thumb」を「（空文字）」にします。
　 配列ですので、[for]でループさせて、この変換処理を繰り返します。
　
これで、サムネイルから元の画像に変換する処理が完了します。
あとは、サムネイルのクリックで別ウインドウを呼び出せばOKです。

最後に、配列となった画像をスライドショーにするには、
作成した配列のインデックスを利用して、
スライドショーの「前へ」や「次へ」というボタンを追加します。