jQuery - Open image parent link in another div

Question

I have a carousel that when an image is clicked, Id like to take the source of the image and open it up in another div on the page, 'big-image'

$('.gallery-viewport-ext ul li a img').on('click', function () {
     alert($(this).parent('a').attr('src');)
 return false;  
});

Im trying to just alert the src at first only Im sure I must have done something wrong?

<div id="tabs1-ext">
<section class="gallery-viewport-ext">
        <ul>
            <li><a href="_includes/images/slide-1.jpg"><img src="_includes/images/slide-1.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-2.jpg"><img src="_includes/images/slide-2.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-3.jpg"><img src="_includes/images/slide-3.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-1.jpg"><img src="_includes/images/slide-1.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-2.jpg"><img src="_includes/images/slide-2.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-3.jpg"><img src="_includes/images/slide-3.jpg" alt="image" /></a></li>
        </ul>
        <a id="simplePrevious"><img src="_includes/images/larr.png" alt="Left Arrow" /></a>
        <a id="simpleNext"><img src="_includes/images/rarr.png" alt="Right Arrow" /></a>
    </section>

<div class="big-image"><</div>

Im new to jQuery so excuse my naivity!

Answer 1

It should be attr('href') , instead of src , also, remove the semicolon after attr()

alert($(this).parent('a').attr('href'))

EDIT:

$('.gallery-viewport-ext ul li a img').on('click', function () {
     $('.big-image').html($(this).parent().html());
     return false;  
});

OR

$('.gallery-viewport-ext ul li a').on('click', function () {
     $('.big-image').html($(this).html());
     return false;  
});

Answer 2

Why don't you use link instead of img

$('.gallery-viewport-ext ul li a').on('click', function () {
     alert($(this).attr('href'));
     var $bigImg = $("<img />").attr("src", $(this).attr('href'));
     $(".big-image").html($bigImg);
     event.preventDefault();
 });

Answer 3

The following will add the image to the big div.

$('.gallery-viewport-ext ul li a img').on('click', function (event) {
 event.preventDefault();
 $('.bigimage').html('').append($('<img</img>').attr('src',$(this).parent('a').attr('href')));
});