jquery編碼照片庫的上一個和下一個按鈕

Question

我正在試圖製作照片庫。大型照片容器開始爲空，當您單擊縮略圖時，它會使用ID將全尺寸照片加載到容器中，而淡入淡出功能可確保在淡入淡出之前加載它。畫廊的這部分工作正常，但是它的上一個和下一個按鈕並不在那裏。

我無法獲得上一個和下一個按鈕的工作。我想擁有它，所以它加載下一張照片放入容器中，再次等待，直到它的加載，然後消失在這裏就是我有這麼遠，這裏是jsbin演示http://jsbin.com/esiduz/10/edit

JS

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); 

}); 

}); 

CSS

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; 
} 

HTML

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

<div id="nav"> 
    <div id="prev"></div> 
    <div id="next"></div> 
    <br style="clear:both;"> 
</div> 

</div> 


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

Answer 1

我是有這個問題是與VA定義可變結構，我需要使用全局變量，它結束了看起來像這樣：」

答案是全局變量，所以它結束了是這樣的：

$(".photo").click(function() { 
    id = $(this).attr('id'); 
}); 

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

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