Load new image when a user clicks on a link
<p>I'm trying to figure out how to load a new image with ajax when a link is clicked on.</p>

<p>The link looks like this (there are several links like this on the page they have little image thumbnails inside them so user can know approximately what image will load when he/she clicks on the link):</p>

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

<p>Href attribute contains relative path to the image and the id is the image name (also it's id in the database if it's relevant).</p>

<p>And on the same page I have this markup:</p>

<pre><code>&lt;div id="media-photo"&gt;
    &lt;img src="/path/to/image/1.jpg" alt="Image Title 1" /&gt;       
&lt;/div&gt;
</code></pre>

<p>I would like the image in #media-photo div to change without the page being reloaded.</p>

<p>This is what I have so far:</p>

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

<p>Not sure if what I'm doing is possible, maybe I need ajax?</p>
