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

質問

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

http://chibatch.jp/blog/archives/change-image2.html

回答No.2

steel_gray · ベストアンサー

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

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

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

回答No.1

steel_gray

サンプル。
メインの画像の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>
・・・以下略（変更なし）

補足

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