링크와 이미지가 함께 작동하지 않습니다

Question

앵커 태그가 없으면 완벽하게 작동하고 있습니다 만, 이미지 태그 앞에 앵커 태그를두면 이미지 링크를 만들기 위해 하나의 이미지 만 보여줍니다. 데모 링크 : http://jsfiddle.net/vrD2C/

자바 스크립트 코드 :

$(document).ready(function() { 

    $("#photos a img:gt(0)").hide(); 
    setInterval(function() { 
     var current = $('#photos a img:visible'); 
     var next = current.next().length ? current.next() : $('#photos a img:eq(0)'); 
     current.fadeOut(); 
     next.fadeIn(); 
    }, 3000); 

}); 

HTML 코드 :

<div id="photos"> 
    <a href="advertise.php"> 
     <img src="images/in-the-outfield.jpg" /> 
    </a> 
    <a href="advertise.php"> 
     <img src="images/ballpark-scoreboard.jpg" /> 
    </a> 
    <a href="advertise.php"> 
     <img src="images/batting-helmets.jpg" /> 
    </a> 
    <a href="advertise.php"> 
     <img src="images/baseball-in-glove.jpg" /> 
    </a> 
</div> 

Answer 1

사용 a 대신하여 선택기에 img.

HTML

<div id="photos"> 
    <a href="advertise.php"> 
     <img src="http://imagefader.s3.amazonaws.com/0.jpg" /> 
    </a> 
    <a href="advertise.php"> 
     <img src="http://imagefader.s3.amazonaws.com/1.jpg" /> 
    </a> 
</div> 

스크립트

$(function() { 
    $("#photos a:gt(0)").hide(); //Updated selector here 
    $("#photos a:first").addClass("shadow"); //Updated selector here 
}); 

function next() { 
    var $currentImage = $("#photos a:visible"); //Updated selector here 
    var $nextImage = $currentImage.next(); 
    if ($nextImage.length == 0) { 
     $nextImage = $("#photos a:first"); //Updated selector here 
    } 
    swapImage($currentImage, $nextImage); 
} 

DEMO