jquery coding previous and next buttons for photo gallery
<p>I'm trying to make a photo gallery.  The large photo container starts empty, when you click a thumbnail it uses the ID to load the full-sized photo into the container and a fadein function makes sure it's loaded before fading.  This part of the gallery works fine, but it's the previous and next buttons that aren't quite there.</p>

<p>I'm having trouble getting the previous and next buttons to work.  I'd like to have it so it loads the next photo into the container, again waits till it's loaded and then fades in.  Here's what I have so far, and here is a demo in jsbin <a href="http://jsbin.com/esiduz/10/edit" rel="nofollow">http://jsbin.com/esiduz/10/edit</a></p>

<p>JS</p>

<pre><code>function fadeIn(obj) {
    $(obj).fadeIn(1000);
}

$(".photo").click(function() {
    var id = $(this).attr('id');
    $('#preload').prop('src',   
    'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

    fadeIn('#' + id);

$("#next").click(function() {  
  var id_a = $(id).next().attr('id');

  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#' + id);
  });



  $("#prev").click(function() {  
  var id_b = $(id).prev().attr('id');

  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

  fadeIn('#' + id);

});

});
</code></pre>

<p>CSS</p>

<pre><code>ul {
  list-style-type: none;
}

.UNH_album li{
  float:left;
  padding:10px;
}

#prev {
  width:50px;
  height:50px;
  background:green;
  float:left;
}

#next {
  width:50px;
  height:50px;
  background:blue;
  float:left;
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="loading_box_container"&gt;
   &lt;div id="loading_box"&gt;
        &lt;img id="preload" onload="fadeIn(this)" src="#" style="display:none;"/&gt;
&lt;/div&gt;

&lt;div id="nav"&gt;
  &lt;div id="prev"&gt;&lt;/div&gt;
  &lt;div id="next"&gt;&lt;/div&gt;
  &lt;br style="clear:both;"&gt;
&lt;/div&gt;

&lt;/div&gt;  


&lt;ul class="UNH_album"&gt;
  &lt;li id="DanteBalboni_1918" class="photo"&gt;
    &lt;img src="http://www.klossal.com/klossviolins/instruments/violins/DanteBalboni_1918.jpg"&gt;
&lt;/li&gt;
&lt;li id="KarlWurm_1978" class="photo"&gt;
    &lt;img src="http://www.klossal.com/klossviolins/instruments/violins/KarlWurm_1978.jpg"&gt;
&lt;/li&gt;
&lt;li id="KarlGramm_1923" class="photo"&gt;
    &lt;img src="http://www.klossal.com/klossviolins/instruments/violins/KarlGramm_1923.jpg"&gt;
&lt;/li&gt;
&lt;/ul&gt; 
</code></pre>
