ユーザーがリンクをクリックしたときに新しい画像を読み込む

Question

リンクをクリックしたときにajaxで新しい画像を読み込む方法を理解しようとしています。

リンクは、この（このようないくつかのリンクがあるページに、彼らは彼らの内側に小さな画像のサムネイルを持っているので、ユーザは、彼/彼女がリンクをクリックしたときにロードされますどのような画像が約知ることができる）ようになっています

<div class="box-content2"> 
    <a href="/path/to/image/2.jpg" id="2"> 
     <img src="/path/to/image/thumbnail/2.jpg" title="Image Title 2" /> 
    </a> 
    <a href="/path/to/image/3.jpg" id="3"> 
     <img src="/path/to/image/thumbnail/3.jpg" title="Image Title 3" /> 
    </a> 
</div> 

Href属性にはイメージへの相対パスが含まれ、idはイメージ名です（関連する場合はデータベース内のIDです）。

と同じページに、私は、このマークアップを持っている：

<div id="media-photo"> 
    <img src="/path/to/image/1.jpg" alt="Image Title 1" />  
</div> 

私は再ロードされているページなしに変更する＃メディア・写真divの中にイメージをしたいと思います。

これは私がこれまで持っているものです。

$(document).ready(function() { 
    $('.box-content2 a').click(function() { 
     var path = $(this).attr('href'); 
     $('#media-photo img').html('<img src="' + path + '" />'); 
    }); 
}); 

ない可能性が何であるかを私がやっている、多分私はアヤックスが必要な場合は必ず？

Answer 1

あなたは正しい軌道に乗って間違いだ：

$(document).ready(function() { 
    $('.box-content2 a').click(function() { 
     var path = $(this).attr('href'); 
     $('#media-photo img').attr('src', path) 
          .attr('alt', $('img', this).attr('title')); // in anticipation of your need 
     return false; // stop the default behavior (following the link) 
    }); 
}); 

Answer 2

html方法は、それが上と呼ばれる要素のHTMLコンテンツを設定します。

あなたのコードは新しいIMG要素を古いものの中に入れていますが、意味がありません。

あなたはこのように、既存の画像のsrc属性を設定するattrメソッドを使用するようにする必要があります。

$('#media-photo img').attr('src', path); 

また、あなたが最後にreturn false;を追加（またはevent.preventDefault()を呼び出して、イベントを取る必要がありますパラメータ）を使用して、ブラウザがリンクをたどらないようにします。