사용자가 링크를 클릭하면 새 이미지로드

Question

링크를 클릭하면 아약스로 새 이미지를로드하는 방법을 알아 내려고하고 있습니다.

<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> 

내가 페이지를 다시로드하지 않고 변경 # 미디어 사진 사업부에서 이미지를 싶습니다

그리고 같은 페이지에

나는이 마크 업을 가지고있다.

이것은 내가 지금까지 무엇을 가지고 :

$(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()를 호출하고 이벤트를 취할 필요 매개 변수)를 사용하여 브라우저가 링크를 따르지 못하도록합니다.