javascript - ギャラリー スライダーが画像を水平方向ではなく垂直方向に積み重ねる + キーボード入力が機能しない

Question

http://jsfiddle.net/zdYzg/5/

私は現在、ギャラリーの画像を移動するためのキーボード コントロール入力を使用して、Javascript で単純なギャラリーに取り組んでいます。jSFiddle はコードを示していますが、何らかの理由でスライダーが jSfiddle で動作していませんが、私のローカルホスト MAMP サーバーでは動作しています。

問題は、グリッド内の画像の垂直方向のスタックを停止できないことです。私はUL LI cssを見てきましたが、動作していないようで、li画像がそれぞれの上に垂直に浮かんでいます。

もう 1 つの質問は、一部の画面では 1100 が大きすぎるため、レスポンシブ Web の目的で Javascript の gridSize 変数を変更するように指示するにはどうすればよいかということです。

スライダーの Javascript。$(window).load (関数() {

 var image = $('img'); 
 var theWidth = image.width();
 var gridSize = -1100;
 var grid;
 var totalWidth = image.length * theWidth; 

$('ul.grid').css({ 
  width: function(){ 
  return totalWidth;     
}    
});

$('#back').click(function() {
if(gridSize - theWidth != -totalWidth) {
  grid = gridSize + 1100;
} else {
  grid = 0;
};
updatePosition();
});

$('#page').click(function(){
if(gridSize != 0) {
  grid = gridSize - 1100;
} else {
  grid =  0;
};
updatePosition();
});


var updatePosition = function() {
$('ul.grid').animate({ "margin-left": (grid)}, 650);
    gridSize = -1100;
}

$(document).keydown(function(e) {
if (e.keyCode == 39) {
    updatePosition();
}
else if (e.keyCode == 37) {
    grid = gridSize + 1100;
}
})

});

HTML

  <div class="grid-wrap">
   <ul class="grid">
    <li>
        <img src="http://f.cl.ly/items/363B3w2S0c3y22100R2D/img1.png">
    </li>
    <li>
        <img src="http://f.cl.ly/items/09110S1L2t2X0K0J1d1D/img2.png">
    </li>
    <li>
        <img src="http://f.cl.ly/items/0L152B400u0d0k1g2a1e/img3.png">
    </li>
    </ul>
 </div>

  <div id="btns">
     <div class="forward"></div>
     <div class="back"></div>
  </div>

CSS

  .grid-wrap {
     background: #FFF;
     margin: 0 auto;
     overflow: hidden;
     width: 600px;
 }
ul.grid li {
    display: inline;
    list-style: none;
 }

私は何を間違っていますか？ありがとう。