Question

I’m creating what should be a simple image slider/flipper. I have a set of images with text. use the next arrow shows the next image with text and the previous arrow would show the previous image with text.

The “next arrow” works perfect. However, the “previous arrow” acts as though there is one more image than there is. Again, this is only with the previous arrow and ONLY on the images (attachment-full) NOT the text (frameData). The images do cycle through but previous tosses in a non-existant image in and throws the text (frameData) off.

HTML on the page:

<div id="headerFrame"> 
    <span id="moveLeft"></span> 
    <span id="moveRight"></span> 
    <img width="329" height="239" src="http://beta.tortugatwins.com/wp-content/uploads/2011/07/hopeAvatar.png" class="attachment-full wp-post-image" alt="hopeAvatar" title="hopeAvatar" />
    <img width="329" height="239" src="http://beta.tortugatwins.com/wp-content/uploads/2011/06/firalicon.png" class="attachment-full wp-post-image" alt="firalicon" title="firalicon" />                                                            </div> 
<div id="featuredContent"> 
    <div class="frameData"> 
        <h1 class="headTitle">Test Me Again</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae mauris quis ligula mattis bibendum. Nam accumsan libero eget arcu aliquet pretium sit amet sed lorem. Mauris porttitor, ipsum in mollis sagittis, turpis justo ultricies eros, vitae pellentesque magna sem &hellip; <a href="http://beta.tortugatwins.com/?p=6" class="excerpt-more-link">Continue reading</a></p> 
    </div> 
    <div class="frameData"> 
        <h1 class="headTitle">Hello world!</h1>
        <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p> 
    </div> 
</div>

jquery on the page:

$('#headerFrame .attachment-full, #featuredContent .frameData').css({'opacity':'0'});
$('#headerFrame .attachment-full:first, #featuredContent .frameData:first').addClass('show').css({'opacity':'1'});
$('#moveRight').click(function()
{
    var $currentFrame = $('#headerFrame .attachment-full.show');
    var $currentContent = $('#featuredContent .frameData.show');

    var $nextFrame = $currentFrame.next().length ? $currentFrame.next() : $('#headerFrame .attachment-full:first').addClass('show').animate({'opacity':'1'});
    var $nextContent = $currentContent.next().length ? $currentContent.next() : $('#featuredContent .frameData:first').addClass('show').animate({'opacity':'1'});

    $nextFrame.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentFrame.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});

    $nextContent.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentContent.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});
});
$('#moveLeft').click(function()
{
    var $currentFrame = $('#headerFrame .attachment-full.show');
    var $currentContent = $('#featuredContent .frameData.show');

    var $prevFrame = $currentFrame.prev().length ? $currentFrame.prev() : $('#headerFrame .attachment-full:last').addClass('show');
    var $prevContent = $currentContent.prev().length ? $currentContent.prev() : $('#featuredContent .frameData:last').addClass('show');

    $prevFrame.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentFrame.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});

    $prevContent.addClass('show').css({'display':'block'}).animate({'opacity':'1'});
    $currentContent.removeClass('show').css({'display':'none'}).animate({'opacity':'0'});
});

Answer 1

Give your prev() call a selector so it doesn’t select siblings that aren’t images (i.e. the spans that make up your arrows that aren’t actually currently visible.