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

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();
 });