はてなブログでサムネイル画像をクリックすると、大きい写真が表示される機能を実装してみた

ブログで困った？？？

ブログで画像を載せるとき、たくさん載せると縦長になってしまうので、
取捨選択せざる負えない時ってありませんか？

そこで画像をクリックすると、大きな写真が表示されるjavascriptを今回作成しました。

必要な物

必要なものは載せたい写真と、それを小さくした写真です。
あとできれば大きな写真の方は、同じサイズの方がいいかもしれません。

記述するコード

<input type="image" src="画像のURL" alt="test1" id="image1" value=1>

<input type="image" src="小さい画像のURL" alt="test1"  onclick="kakudai(0);">
<input type="image" src="小さい画像のURL" alt="test1"  onclick="kakudai(1);">
<input type="image" src="小さい画像のURL" alt="test1"  onclick="kakudai(2);">

javascript側

<script>
function kakudai(num){
    var elements = document.getElementById('image1');
    if(num == 0){
         elements.setAttribute("src", "画像のURL");
    }else if(num == 1){
         elements.setAttribute("src", "画像のURL");
    }else if(num == 2){
         elements.setAttribute("src", "画像のURL")
    }
}
</script>

解説

サムネイル画像のクリックイベントに引数を持たせて、渡ってきた引数によって
初期表示されている画像のsrcの値を書き換えています。

実装した結果

下のサムネイル画像をクリックしてみてください。
クリックした画像が表示されると思います。

もし使用する機会がありましたら使ってみてください。