当用户单击链接时加载新图像

我试图弄清楚当点击链接时如何使用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>

在同一页上,我有这样的标记:

<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 + '" />');
    });
});

不确定我所做的是否可行,也许我需要ajax?