JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropbox.com/u/6594481/tabs/tabs.js"></script>
<script src="http://dl.dropbox.com/u/6594481/tabs/toolbox.history.js"></script>
<button>Loop</button> <span id="loopStatus">true</span>
<br><br>
<div id="list">
<a href="one.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="two.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="three.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="four.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="five.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="six.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="seven.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="eight.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
<a href="nine.html" title=""><img src="http://dl.dropbox.com/u/6594481/tabs/photo.gif" width="30" height="30" alt="" /></a>
</div>
<div id="content">
    <div style="display:block"></div>
</div>

CSS

#list{
        width: 150px;
    }
    #list a img{
        border: 1px solid #C0C0C0;
        background-color: #C0C0C0;
        padding: 2px;
    }
    #list a.current img, #list a:hover img{
        border: 1px solid #FF8040;
        background-color: #FF8040;
    }

JavaScript

$(function() {
 var list = $('#list'),
     imgPerRow = -1,
     loop = true;
 // find first image y-offset to find the number of images per row
 var topOffset = list.find('img:eq(0)').offset().top,
     numTabs = list.find('a').length - 1,
     current, newCurrent;

 function changeTab(diff){
  current = list.find('a.current').index();
  newCurrent = (loop) ? (current + diff + numTabs + 1) % (numTabs + 1) : current + diff;
  if (loop) {
   if (newCurrent > numTabs) { newCurrent = 0; }
   if (newCurrent < 0) { newCurrent = numTabs; }
  } else {
   if (newCurrent > numTabs) { newCurrent = numTabs; }
   if (newCurrent < 0) { newCurrent = 0; }
  }
  // don't trigger change if tab hasn't changed (for non-looping mode)
  if (current != newCurrent) {
   list.find('a').eq(newCurrent).trigger('click'); // trigger click on tab
  }
 }

 list
  // set up tabs
  .tabs("#content > div", {effect: 'ajax', history: true})

  // find number of images on first row
  .find('img').each(function(i){
   if (imgPerRow < 0 && $(this).offset().top > topOffset ) {
    imgPerRow = i;
   }
  });

  // Set up arrow keys
  // Set to document for demo, probably better to use #list in the final version.
  $(document).bind('keyup', function(e){
   var key = e.which;
   if (key > 36 && key < 41) {
    if (key == 37) { changeTab(-1); }         // Left
    if (key == 38) { changeTab(-imgPerRow); } // Up
    if (key == 39) { changeTab(+1); }         // Right
    if (key == 40) { changeTab(+imgPerRow); } // Down
    e.preventDefault();
   }
  });

 // toggle looping through tabs
 $(':button').click(function(){
  loop = !loop;
  $('#loopStatus').text(loop);
 });

});