Jqueryの超初心者です

質問

いつもはコピペで作業しています。
こちらのサイトを参考にサムネイル画像をクリックするとメイン画像が切り替わるページを作成しています。
http://memocarilog.info/jquery/7477

表示されたメイン画像に外部リンクを設定するにはどう記述したら良いでしょうか？
お願いします。

回答No.2

t_ohta

＞　ちなみになのですが、メインに表示される画像それぞれに違うリンクを設定することは出来るのでしょうか？

JavaScriptサンプルの45行目あたりから書いてあるサムネイルのクリックイベントの中でリンク先を書き換えることは可能でしょうね。
どこへリンクさせたくて、そのURLをどこに持たせるか決めなければいけませんが、例えばHTMLの中で
<li><a href="image/1.jpg" data-linkurl="リンク先URL"><img src="image/thumb/1.jpg" alt="photo1" /></a></li>
と言った感じで各サムネイルのAタグにリンク先URLを設定しておき、メインフォトのタグは
<div id="main_photo" data-linkurl="">
としておきます。
で、JavaScriptサンプルの52行目で
mainPhoto.attr("data-linkurl", $(this).attr("data-linkurl"));
って感じで属性値を書き換えるようにして、先の回答に書いた
mainPhoto.click(function () { window.location = "リンク先URL"; });
を
mainPhoto.click(function () { window.location = $(this).attr("data-linkurl"); });
と書き換えれば行けるんじゃないでしょうか。

テストしてないので、エラーがでたら頑張ってデバッグしてください。

お礼

詳しく教えてくださりありがとうございます。
さっそく試してみたいと思います。

回答No.1

t_ohta

JavaScriptサンプルの67行目あたりに
mainPhoto.click(function () { window.location = "リンク先URL"; });
って書けば行くと思いますよ。

お礼

ありがとうございます！リンクで飛ぶことが出来ました。
ちなみになのですが、メインに表示される画像それぞれに違うリンクを設定することは出来るのでしょうか？