时间戳

首页 > 解决方案 > 添加 Next Prev 按钮此缩略图库

jquery - 添加 Next Prev 按钮此缩略图库

问题描述

请帮我启用“下一个”、“上一个”按钮与缩略图一起工作。缩略图点击工作正常。我想让导航箭头与缩略图一起工作。多谢你们！

您可以在下面看到它的工作方式，只需像现在一样启用导航箭头即可。

我不想改变当前的 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>

标签： jquerybootstrap-4

解决方案

试试下面的例子

$(".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>

推荐阅读