ошибка показа слайдов при вставке тега <a>в код

Question

У меня есть одно изображение слайд-шоу. Код JS:

function slideSwitch() 
{
    var $active = $('#slideshow IMG.active');
    if ($active.length == 0 ) $active = $('#slideshow IMG:last');
    // use this to pull the images in the order they appear in the markup

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    var $sibs  = $active.siblings();

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1400, function() {
            $active.removeClass('active last-active');
        });
}

$(function() 
{
    setInterval( "slideSwitch()", 4000 );
}); 

Если я использую следующий код, он отлично работает и показывает изображения в последовательности ...

<div id="slideshow">
<?php
    $getGa=$objN->getGa();
    foreach($getGa as $getGa)
    {
        echo '<IMG src="banner/'.$getGa['gall'].'">';
    }
?>
</div>

Теперь, если я изменю код с <a> следующим образом

<div id="slideshow">
<?php
    $getGa=$objN->getGa();
    foreach($getGa as $getGa)
    {
        echo '<a href="'.$getGa['ti'].'"><IMG src="banner/'.$getGa['gall'].'"></a>';
    }
?>
</div>

Если вы видите, я просто добавляю <a> перед каждым тегом изображения и это снова и снова показывает одно и то же изображение ....

Я думаю, мне нужно что-то изменить в коде JS?

Спасибо

Answer 1

Это может быть потому, что у вашего <img> больше не будет <img> братьев и сестер. Поскольку вы обернули каждый тег изображения в другой элемент, у него больше нет родных элементов. Поэтому вы должны изменить

var $sibs  = $active.siblings();

до

var $sibs = $active.parent().siblings().children('img');

Вам также необходимо изменить $next

var $next =  $active.parent().next().find('img').length ? $active.parent().next().find('img')
        : $('#slideshow IMG:first');

Answer 2

Попробуйте изменить IMG для вашего JS:

function slideSwitch() {
var $active = $('#slideshow a.active');
if ($active.length == 0 ) $active = $('#slideshow a:last');
// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow a:first');

 var $sibs  = $active.siblings();

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1400, function() {
        $active.removeClass('active last-active');
    });
}