Jquery next button not working with image gallery

The big image would only change to the next image, after I have clicked on the next button 'twice'. It works okay for previous button, but not okay for next button whenever I reload the page.

It would be great if you can look at what is the problem, as I have tried a long time to fix it, but could not. Thank you in advance.

<div > 
   <table id = "frame-table">
   <tr>
      <td id = "left1">
         <img src="http://www.vintagevictorian.com/kuba_arrow_button_left.png" alt = "left"/>
      </td>
      <td id = "right1">
         <img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" alt = "right"/>
      </td>
  </tr>
  </table> 
  <img class="img" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt="Chania" width="204" height="236">  
</div>

<div id = "wrapper">
  <ul id = "portfolio">
     <li><img class="img-thumbnail" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" alt = "img"/></li>
     <li><img class="img-thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt = "img"/></li>
     <li><img class="img-thumbnail" src="https://lh3.googleusercontent.com/-JE-Vccj5xwk/AAAAAAAAAAI/AAAAAAAAABg/aFghGr0aeYw/photo.jpg" alt = "img"/></li>
  </ul> 
  <button id="zoom" type="button" class="btn btn-info"> 
     <span class="glyphicon glyphicon-search"> Zoom </span> 
  </button> 
</div>

$(function(){
  var current_li =$("#portfolio li").first().parent();
  $("#right1").click(function(){
     if (current_li.is(":last-child")){ 
        var next_li = $("#portfolio li").first();
     } else{ 
        var next_li = current_li.next();
     }

    var next_src = next_li.children("img").attr("src");
    alert(next_src);
    $(".img").attr("src", next_src);
    current_li = next_li;
   });

   $("#left1").click(function(){ 
    if (current_li.is(":first-child")){
        var prev_li = $("#portfolio li").last();
    } else{
        var prev_li = current_li.prev();
    }   
    var prev_src = prev_li.children("img").attr("src");
    $(".img").attr("src", prev_src);
    current_li = prev_li;
   });
});

var current_li =$("#portfolio li").first().parent();

should be

var current_li =$("#portfolio>li").first();

Tested locally and is Working.