添加下一个上一个按钮此缩略图库

时间：2018-05-03 12:00:56

标签： jquery bootstrap-4

请帮我启用“下一步”，“上一页”按钮以及缩略图。缩略图点击效果很好。我想让导航箭头与缩略图一起工作。谢谢你们！

你可以在下面看到它的工作方式，只需要按照现在的方式启用导航箭头。

我不想更改当前的div结构，因为此模板已经实现，

  // Product image gallery
    $(".thumbLink").click(function(event) {        
        var image = $(this).attr("rel");
        $(".thumbLink").removeClass('active');
        $( this ).addClass( "active" );
        $('.main-pimage').hide();
        $('.main-pimage').fadeIn('slow');
        $('.main-pimage').html('<img src="' + image + '" class="custom img-fluid"/>');
        return false;
    });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <!-- Product Gallery      -->
        <div class="col-md-5">
          <aside class="pgallery">     
            <div class="row">
              <!-- Thumbs -->
              <div class="col-lg-2">
                <div class="thumbnails d-flex flex-row flex-lg-column h-100">
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=AA" class="thumbLink active"><img width="" src="http://via.placeholder.com/50x50?text=A" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=BB" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=B" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=CC" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=C" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=DD" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=D" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=EE" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=E" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=FF" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=F" alt="" class="pthumb img-fluid"></a>
                  </div>                  
                </div>
              </div>
              <!-- Thumbs -->

              <!-- Main image -->
              <div class="col-lg-10">
                <div class="zoom main-pimage" id="izoomy">
                    <img src="http://via.placeholder.com/300x300?text=AA" alt="" class="custom img-fluid">
                </div>
                <div class="slidy">
                  <a id="prev">Prev</a>
                  <a id="next">Next</a>
                </div>
              </div>
              <!-- Main image -->
            </div>

          </aside>
        </div>
        <!-- Product Gallery ends -->
</div>

2 个答案:

答案 0 :(得分：0)

尝试以下示例

$(".thumbLink").click(function(event) {        
         var image = $(this).attr("rel");
        $(".thumbLink").removeClass('active');
        $( this ).addClass( "active" );
        $('.main-pimage').hide();
        $('.main-pimage').fadeIn('slow');
        $('.main-pimage').html('<img src="' + image + '" class="custom img-fluid"/>');

        return false;
    });

 $("#next").click(function() {
 $('.thumbLink.active').parent('.tsack').next('div').find($('.thumbLink')).trigger('click')
});

$("#prev").click(function() {
  $('.thumbLink.active').parent('.tsack').prev('div').find($('.thumbLink')).trigger('click')
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <!-- Product Gallery      -->
        <div class="col-md-5">
          <aside class="pgallery">     
            <div class="row">
              <!-- Thumbs -->
              <div class="col-lg-2">
                <div class="thumbnails d-flex flex-row flex-lg-column h-100">
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=AA" class="thumbLink active"><img width="" src="http://via.placeholder.com/50x50?text=A" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=BB" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=B" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=CC" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=C" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=DD" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=D" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=EE" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=E" alt="" class="pthumb img-fluid"></a>
                  </div>
                  <div class="pt-wrap mr-2 mr-lg-0 mb-2 tsack">
                    <a href="#" rel="http://via.placeholder.com/300x300?text=FF" class="thumbLink"><img width="" src="http://via.placeholder.com/50x50?text=F" alt="" class="pthumb img-fluid"></a>
                  </div>                  
                </div>
              </div>
              <!-- Thumbs -->

              <!-- Main image -->
              <div class="col-lg-10">
                <div class="zoom main-pimage" id="izoomy">
                    <img src="http://via.placeholder.com/300x300?text=AA" alt="" class="custom img-fluid">
                </div>
                <div class="slidy">
                  <a id="prev">Prev</a>
                  <a id="next">Next</a>
                </div>
              </div>
              <!-- Main image -->
            </div>

          </aside>
        </div>
        <!-- Product Gallery ends -->
</div>

答案 1 :(得分：0)

您可以使用jQuery查找下一个/上一个缩略图... 

$("#next").click(function(event) {        
    $(".thumbLink.active").parent().next().find(".thumbLink").trigger('click');
});

$("#prev").click(function(event) {        
    $(".thumbLink.active").parent().prev().find(".thumbLink").trigger('click');
});

Working Demo

相关问题
最新问题