サムネイルをクリックし、メインに表示→クリックでリンク先へ。

サムネイルをクリックし、メインに表示→クリックでリンク先へ。
というJavaScriptを採用したいのですが、下記サイトを参考にして、サムネイルをクリックし、メインに表示までは出来たのですが、メインに表示された画像をクリックして別ページへリンクというのがどうしてもできません。
どのような記述にすれば可能でしょうか？
よろしくおねがいします。

http://chibatch.jp/blog/archives/change-image2.h …

No.2 ベストアンサー 回答者： steel_gray 回答日時： 2010/05/05 13:05

#1です。

メインに表示する画像の拡張子jpgをhtmlに書き換えたURLがリンク先になるようにしてあります。
サンプル通り画像の拡張子がjpgじゃなくて、jpegとかJPGとか違うものだと画像へのリンクのままです。

replaceの正規表現(※)を変更すれば他の拡張子に対応させることもできるし、画像URLをHTMLに変換できる法則があるならパスを変更する事もできます。

※ http://www.tohoho-web.com/js/regexp.htm#Expression

No.1 回答者： steel_gray 回答日時： 2010/05/04 19:35

サンプル。

メインの画像のURLを.htmlに置き換えたものがリンク先URLになります。


Javascript
$(function(){
$(".thumbnail a").click( function() {
var changeSrc = $(this).attr("href");
$(".target a").attr("href", changeSrc.replace(/jpg$/,'html')); // １行追加。
$(".target img").attr("src", changeSrc);
return false;
});
});

HTML
<p class="target"><a href="path/to/img/image01.html"><img src="path/to/img/image01.jpg" alt="テスト画像1" /></a></p>
・・・以下略（変更なし）

この回答への補足

ご回答ありがとうございます。
メイン画像をクリックするとその画像ではなく別ページにリンクしたいのですが、それは今回の記述で不可と言うことでしょうか？
ご回答いただいた記述ですと、その画像へリンクはできても別ページにリンクさせるのはできないようです(>_<)

補足日時：2010/05/04 20:11