пользовательский массив изображений не работает с простым слайдером

Question

Я работаю с WordPress, и это мой код для изображения, которое находится на правой боковой панели

<?php
            $custom_fields = get_post_custom($post->ID);
            $my_custom_field_img = $custom_fields['sidebarimage'];
            $my_custom_field_desc = $custom_fields['imagedesc'];
            $results = count($my_custom_field_img);
            $i=0;

            if ($my_custom_field_img != null) { ?>
                <div id="right-sidebar">
                    <?php while($i<$results){ ?>
                            <div id="rightimagediv" class="imagediv">
                        <a href="<?php echo $my_custom_field_img[$i]; ?>" rel="testing"><img  id="rightimage" src="<?php echo $my_custom_field_img[$i]; ?>" width="217px" height="150" /></a>
                        </div>
                        <?php if($mycustom_field_desc[$i] != null)?>
                            <span id="imagetext"><?php echo $my_custom_field_desc[$i]; ?></span>                            
                    <?php $i++; } ?>
                </div>
            <?php } ?>

, и это простое слайд-шоу, которое я использовал из блога JonRaasch

function slideSwitch() {
var $active = $('#rightimagediv IMG.active');

if ( $active.length == 0 ) $active = $('#rightimagediv IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#rightimagediv IMG:first');

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

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

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

Это работает, изображения располагаются друг на друге, но дело в том, что когда они исчезают, они продолжают возвращаться к первому изображению ... любая помощь будет с благодарностью оценена .. Заранее спасибо!:)

вот CSS:

#rightimagediv .imagediv{
        position:relative;
        height:150px;
        }

        #rightimagediv img{
        position:absolute;
        top:0px;
        left:0px;
        z-index:8;
        }

        #rightimagediv img.active {
        z-index:10;
        }

        #rightimagediv img.last-active {
        z-index:9;
        }

Answer 1

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

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

Но это зависит от того, что у каждой ссылки есть только один ребенок и несколько других вещей ...