need help traversing/retrieving info

need help traversing/retrieving info

trying to create left right image traversing gallery, but i can't figure out what I'm doing wrong. No matter what I do I can't get the left and right buttons to bring up the previous or next image.

main page:

  1. <div class="blackout"></div>

    <div class="view_comic">
        <div class="close_view"></div>
            <div class="comic_navl" ></div>
            <div class="comic_navr"></div>
                <div class="comic_img">
                   
                </div>
    </div>

    <?php echo '<p>', $comic_data['name'], '</p>'; ?>


    <ul class="comic_book">
    <?php if (empty($images)) {
        echo 'There are no images in this file.';
    } else {
        foreach ($images as $image) { 
            echo '<li class="comic_page">
                    <img class="comic_image" src="uploads/', $image['comic'], '/', $image['id'], '.', $image['ext'], '"
                         title="Uploaded ', date('D M Y / h:i:s', $image['timestamp']), '"
                         alt="image" >
                  </li>';
                if(admin_check() === true) {
                echo '[<a href="delete_image.php?image_id=', $image['id'],'">x</a>]';
                } else {
                }
        }
    }
    ?>
    </ul>
































jquery:

  1. //View Comic Functions
    $('.comic_image').click(function() {
        var comicPage = $(this).attr('src');
        var nextPage = $('.comic_book').find('.comic_page').next('.comic_image').attr('src');
        var prevPage = $('.comic_image').prev().attr('src');
       
       
        $('.blackout').fadeTo(500, 0.8);
        $('.view_comic').fadeTo(500, 1);
            $('.comic_img').html('<img src="'+comicPage+'" alt="" />');
               
                $('.comic_navl').hover(function() {
                    $('.comic_navl').css('opacity', '0.8');
                },function(){
                    $('.comic_navl').css('opacity', '1');
                });

                $('.comic_navr').hover(function() {
                    $('.comic_navr').css('opacity', '0.8');
                },function(){
                    $('.comic_navr').css('opacity', '1');
                });
               
           
                   
                    $('.comic_navl').click(function() {
                        $('.comic_img').html('<img src="'+prevPage+'" alt="'+prevPage+'" />');
                    });           
                   
                   
                    $('.comic_navr').click(function() {
                        $('.comic_img').html('<img src="'+nextPage+'" alt="'+nextPage+'" />');
                    });
               
           
    });


    $('.blackout').click(function() {
        $('.blackout').fadeOut(300);
        $('.view_comic').fadeOut(300);
    });



    // View Comic End