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

Question

我使用的是最新版本的"jQuery lightGallery“插件。我想添加一个“上一步/下一步”按钮，以在轮播中显示上一步/下一步图像。我找不到任何关于这方面的文档，所以也许这里的某个人真的知道该怎么做？

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

下面是一个用jsfiddle jsfiddle.net/rhh7j2sx/编写的示例

Answer 1

这是你的完整代码: 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");
}