将上一个/下一个按钮添加到图片库？

我正在使用最新版本的“jQuery lightGallery”插件。我想添加一个上一个/下一个按钮来显示传送带中的上一张/下一张图像。我找不到任何有关这方面的文档，所以也许这里有人知道如何做到这一点？将上一个/下一个按钮添加到图片库？

<div style="float:left"> 
<a href="#"> 
Previous 
</a> 
&nbsp; | &nbsp; 
<a href="#"> 
Next 
</a> 
</div>

这里是的jsfiddle jsfiddle.net/rhh7j2sx/

来源

2015-05-04 GeenId

下面是完整的代码示例： CSS：

.thumb{ 
    display:inline-block; 
    margin:0px; 
    padding:0px; 
    cursor:pointer; 
} 
#thumbs{text-align:center;background:#77a5c6;padding:5px;} 
#thumbs .active{border:3px solid #333;} 
.controls{margin-left:10px;} 
.controls img{margin:0px;cursor:pointer;} 
.controls span{font-size:13px;vertical-align:top;display:inline-block;margin-top:5px;} 
#large{text-align:center;} 
#large .bigthumb{display:none;} 
#large .active{display:block;}

，你必须使用此HTML：

<div id="panel"> 

    <!-- Here is your button --> 
    <div class="controls"> 
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" /> 
    <span> 
     Thumbnail Navigation 
    </span> 
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" /> 
    </div> 


    <!-- Here is your thums image --> 


    <div id="thumbs"> 
    <div class="thumb active"> 
     <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" /> 
    </div> 
    </div> 


    <div class="controls" align="center" width="400px"> 
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" /> 
    <span> 
     Large Image Navigation 
    </span> 
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" /> 
    </div> 




    <!-- here is your large image --><div id="panel"> 
    <div class="controls"> 
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" /> 
    <span> 
     Thumbnail Navigation 
    </span> 
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" /> 
    </div> 


    <div id="thumbs"> 
    <div class="thumb active"> 
     <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" /> 
    </div> 
    <div class="thumb"> 
     <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" /> 
    </div> 
    </div> 


    <div class="controls" align="center" width="400px"> 
    <img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" /> 
    <span> 
     Large Image Navigation 
    </span> 
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" /> 
    </div> 


    <div id="large"> 
    <div class="bigthumb active"> 
     <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" /> 
    </div> 
    </div> 
</div> 
    <div id="large"> 
    <div class="bigthumb active"> 
     <img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" /> 
    </div> 
    <div class="bigthumb"> 
     <img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" /> 
    </div> 
    </div> 
</div>

而且现在，这是你的JS：

$(function() { 
    $("#thumbs").find(".thumb:first").addClass("active"); 
    $("#large").find(".bigthumb:first").addClass("active"); 
    var getIndex = $("#thumbs").find(".active").index();  
    $(".controls").each(function() { 
     $(this).find(".next").click(function() { 
      getIndex = $("#thumbs").find(".active").index(); 
      getIndex += 1; 
      if (getIndex > ($("#thumbs").find(".thumb").length - 1)) { 
       getIndex = 0; 
      } 
      setActiveImage(getIndex); 
     }); 
     $(this).find(".prev").click(function() { 
      getIndex -= 1; 
      if (getIndex < 0) { 
       getIndex = $("#thumbs").find(".thumb").length - 1; 
      } 
      setActiveImage(getIndex); //Set/Show Active Image 
     }); 
    }); 

}); 
function setActiveImage(index) { 
    if (typeof(index) == "undefined" || index == "" || index == null) index = 0; 

    $("#thumbs").find(".thumb").removeClass("active"); 
    $("#thumbs").find(".thumb:eq(" + index + ")").addClass("active"); 
    $("#large").find(".bigthumb").removeClass("active"); 
    $("#large").find(".bigthumb:eq(" + index + ")").addClass("active"); 
}

来源

2016-01-04 10:21:22

将上一个/下一个按钮添加到图片库？

回答

相关问题