circular linked list not working as expected (jquery)

Question

I created a circular linked list to transverse through an ul of images (i made an image gallery and am using the linked list to go through the images with the left and right arrow keys). Everything works fine until I get to the end of the list and try to go back to the first picture (or pressing left, when i get to the beginning and try to get to the last). This is my first time using jQuery and I'm not very good with circular linked lists (i only had to use one once--for school) and it seems like the problem is the if/else statement in my getNextPic function.

BTW I know this is really sloppy. Like I said, first time, so I'm sorry if it's a little difficult to follow. I'm posting a lot of my code because I always see people on here not posting enough to find the problem. Most of this i know works fine. The problem lies in getNextPic function as I said, 3rd snippet down. Thank you to anyone who attempts to help :)

here is a fiddle

html

<div id="gallery">
<div id="main">
    <img id="main_img" src="d:/allyphotos/amanda_1.jpg" alt=""/></div>
    <div id="thumbnail">
    <ul>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/olivia_2.jpg"/></li>
        <li><img class="thumb" id="long" src="d:/allyphotos/thumb/autumn_1.jpg"/></li>
    </ul>   
    </div>
</div>

jQuery

document ready function

$(document).ready(function(){

//these ($first and $last) dont change
    var $first = $('li:first img', '#gallery ul');
    var $last = $('li:last img', '#gallery ul');
//set to current selected image to be displayed
    var current = $first;   
    var previousImage = current;

runGallery(current, $first, $last, previousImage);
});

my runGallery function

    function runGallery($current, $first, $last, previousImage){
//first and last thumbnails, selected and current           
    $("body").keydown(function(e){
        // left arrow pressed
        if ((e.keyCode || e.which) == 37)
        {   $current = getNextPic($current, $first, $last, false);//false gets previous img, true gets following img

            fade($current, previousImage);//fade selected, unfade previously selected
            previousImage=$current;

            var newlink = $($current).attr('src').replace('thumb/', '');
            $('#main_img').attr('src', newlink);//set $current to main_img
        }
        // right arrow pressed
        if ((e.keyCode || e.which) == 39)
        {
            $current = getNextPic($current, $first, $last, true);

            fade($current, previousImage);
            previousImage=$current;

            var newlink = $($current).attr('src').replace('thumb/', '');
            $('#main_img').attr('src', newlink);
        }   
    });


    $("#gallery li img").click(function()
    {
    //fade selected and unfade previous selected
        fade(this, previousImage);
        $current = this;
        previousImage = this;

    //get src for clicked thumb and change to full version
        var newlink = $(this).attr('src').replace('thumb/', '');
        $('#main_img').attr('src', newlink);
    });

    var imgSwap =[];

    $("gallery li img").each(function()
    {
        imgUrl = this.src.replace('thumb/','');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
}

my getNextPic function -- this is where I believe the problem lies. I have commented the lines that aren't working properly

function getNextPic(current, first, last, boolval)
{
    var next = $(current).closest('li');

    if(boolval===true)
    {
        if(current === last)
        {
            next = first;//this seems to never happen???
        }
        else
        {
            next = $(next).next('li');
            next =  $(next).find('img');
        }
    }
    else
    {
        if(current === first)
        {
            next = last;//this also never happens
        }
        else
        {
        next = $(next).prev();
        next = $(next).find('img');
        }
    }

    return next;
}

my fade function, 99.999% sure this has absolutely nothing to do with the problem but posting it anyway

 function fade(current, previous)
{
    $(previous).fadeTo('fast',1);
    $(current).fadeTo('fast', 0.5);
}

The preload function, which i did not write (i got it from a tutorial) but i know isnt contributing to the problem. Posting so anyone who looks can rule it out too.

$.fn.preload = function(){
this.each(function(){
    $('<img/>')[0].src=this;
});

}

Answer 1

Comparison of jquery objects cannot be done directly.

Your code contains, for example

current === last

Instead, as suggested in this answer, use the inner object:

You need to compare the raw DOM elements, e.g.:

if ($(this).parent().get(0) === $('body').get(0))

or

if ($(this).parent()[0] === $('body')[0])

Check out this fixed fiddle for your expected results.