为缩略图库和较大的图像库添加下一个和上一个按钮

Question

I am trying to add the next and prev button for both thumbnail and larger image gallery. And that next and prev button should support the keyboard event listeners too.

This is the link which I have tried.

http://jsfiddle.net/L7yKp/36/

I need some help.

Answer 1

Here i have done complete solution for above issue for adding next and previous buttons.

Demo: http://codebins.com/bin/4ldqp7y

HTML

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

CSS:

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

jQuery:

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

Demo: http://codebins.com/bin/4ldqp7y

Answer 2

See http://jsfiddle.net/L7yKp/37/

The problem is

$(['next','prev']).each(function(){
    var that=this;
    $('#'+that).click(function(){
        $('#thumbs img.clicked')[that]().click();
    });
});

because now you have

<a href="#" id="tnext">Next</a>
<a href="#" id="tprev">Prev</a>

and

<a href="#" id="lnext">Next</a>
<a href="#" id="lprev">Prev</a>

So the solution is;

$(['next','prev']).each(function(){
    var that=this;
    $('.'+that).click(function(){
        $('#thumbs .clicked')[that]().click();
    });
});

and

<a href="#" class="next">Next</a>
<a href="#" class="prev">Prev</a>