사진 갤러리의 이전 및 다음 버튼을 jquery 코딩

Question

사진 갤러리를 만들려고합니다. 대형 사진 컨테이너가 비어있는 상태에서 시작합니다. 미리보기를 클릭하면 ID를 사용하여 전체 크기의 사진을 컨테이너에로드하고 fadein 기능을 사용하면 페이드되기 전에로드됩니다. 갤러리의이 부분은 정상적으로 작동하지만, 이전 및 다음 버튼이 꽤 있습니다.

이전 및 다음 버튼이 작동하는 데 문제가 있습니다. 이 페이드 다시 컨테이너에 다음 사진을로드가 장전까지 기다리고, 그래서 나는 그것을 가지고 싶습니다. 여기 http://jsbin.com/esiduz/10/edit

JS

내가 지금까지 무엇을, 그리고 여기 jsbin의 데모입니다

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

내가 가지고 있던 문제는 버지니아로했다 riable 정의는, 내가 전역 변수를 사용하는 데 필요한,이처럼 보이는 결국 '

대답은 전역 변수이므로이 같은 었죠 :

$(".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; 
});