Load new image when a user clicks on a link

Question

I'm trying to figure out how to load a new image with ajax when a link is clicked on.

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

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

And on the same page I have this markup:

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

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

This is what I have so far:

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

Not sure if what I'm doing is possible, maybe I need ajax?

Answer 1

You're definitely on the right track:

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

The html method sets the html content of the element it's called on.

Your code is putting a new IMG element inside the old one, which is meaningless.

You need to to use the attr method to set the src attribute of the existing image, like this:

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

Also, you need to add return false; to the end (or call event.preventDefault() and take an event parameter) to prevent the browser from following the link.