jquery编码照片库的上一个和下一个按钮

我正在试图制作照片库。大型照片容器开始为空，当您单击缩略图时，它会使用ID将全尺寸照片加载到容器中，而淡入淡出功能可确保在淡入淡出之前加载它。画廊的这部分工作正常，但是它的上一个和下一个按钮并不在那里。jquery编码照片库的上一个和下一个按钮

我无法获得上一个和下一个按钮的工作。我想拥有它，所以它加载下一张照片放入容器中，再次等待，直到它的加载，然后消失在这里就是我有这么远，这里是jsbin演示http://jsbin.com/esiduz/10/edit

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>

来源

2013-02-14 loriensleafs

我是有这个问题是与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; 
});

来源

2013-02-14 02:28:13 loriensleafs

jquery编码照片库的上一个和下一个按钮

回答

相关问题