Question

我想在flexslider中点击主图像时在fancybox中打开主图像。

如果可能的话，当点击主图像并在fancybox中打开它时，所有缩略图就像在带有上一个和下一个按钮的flexslider中显示一样。

如何做到这一点？ flexslider中是否有任何参数或需要进行自定义？

请帮帮我。我在这里提到代码。

由于

=＆GT;代码：

<!DOCTYPE html>
<html>
   <head>
      <script src="jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider-min.js"></script>
      <script type="text/javascript" src="fancybox.js"></script>
      <link rel="stylesheet" type="text/css" href="fancybox.css"/>
      <script src="modernizr.js"></script>
      <script src="jquery.flexslider.js"></script>
      <style type="text/css">
         @import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";
         body { font-family: avenir, sans-serif; }
         #slider .slides img {
         width: 450px;
         height: 300px;
         margin: 0 auto;
         }
         .container{
         max-width: 50%;
         margin : 0 auto;
         }
         #carousel .flex-active-slide img {
         opacity: 1;
         }
         #carousel img {
         opacity: 0.65;
         }
         .flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; }
         .flex-direction-nav .flex-prev { left: 0 !important; margin-left: -40px; }
         .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
         .flex-control-thumbs img {width: 100%; display: block; cursor: pointer;}
      </style>
      <script type="text/javascript">
         $(window).load(function() {
                    $('#carousel').flexslider({
                      animation: "slide",
                      controlNav: false,
                      animationLoop: false,
                      slideshow: false,
                      itemWidth: 70,
                      itemMargin: 10,
                      asNavFor: '#slider'
                    });

                    $('#slider').flexslider({
                      animation: "slide",
                      controlNav: false,
                      animationLoop: false,
                      slideshow: false,
                      sync: "#carousel"
                    });
            });
            $('#carousel li').click(function() {
              $('#carousel li').removeClass('flex-active-slide')
              $(this).addClass('flex-active-slide');
            });
      </script>
   </head>
   <body>
      <!-- Include jQuery library and Flexslider script -->
      <!-- Place somewhere in the <body> of your page -->
      <div class="container">
         <div id="slider" class="flexslider" onclick="func(this)">
            <ul class="slides">
               <li>
                  <img src="1.jpg" />
               </li>
               <li>
                  <img src="2.jpg" />
               </li>
               <li>
                  <img src="3.jpg" />
               </li>
               <li>
                  <img src="4.jpg" />
               </li>
               <li>
                  <img src="5.jpg" />
               </li>
               <li>
                  <img src="6.jpg" />
               </li>
               <li>
                  <img src="7.jpg" />
               </li>
               <li>
                  <img src="8.jpg" />
               </li>
               <li>
                  <img src="1.jpg" />
               </li>
               <li>
                  <img src="2.jpg" />
               </li>
               <li>
                  <img src="3.jpg" />
               </li>
               <li>
                  <img src="4.jpg" />
               </li>
               <li>
                  <img src="5.jpg" />
               </li>
               <li>
                  <img src="6.jpg" />
               </li>
               <!-- items mirrored twice, total of 12 -->
            </ul>
         </div>
         <div id="carousel" class="flexslider">
            <ul class="slides">
               <li>
                  <img src="1.jpg" />
               </li>
               <li>
                  <img src="2.jpg" />
               </li>
               <li>
                  <img src="3.jpg" />
               </li>
               <li>
                  <img src="4.jpg" />
               </li>
               <li>
                  <img src="5.jpg" />
               </li>
               <li>
                  <img src="6.jpg" />
               </li>
               <li>
                  <img src="7.jpg" />
               </li>
               <li>
                  <img src="8.jpg" />
               </li>
               <li>
                  <img src="1.jpg" />
               </li>
               <li>
                  <img src="2.jpg" />
               </li>
               <li>
                  <img src="3.jpg" />
               </li>
               <li>
                  <img src="4.jpg" />
               </li>
               <li>
                  <img src="5.jpg" />
               </li>
               <li>
                  <img src="6.jpg" />
               </li>
               <!-- items mirrored twice, total of 12 -->
            </ul>
         </div>
      </div>
   </body>
</html>

Answer 1

fancyBox适用于任何滑块/轮播，您只需使用.selector选项进行初始化，您必须根据自己的需要进行调整，例如，此选择器必须返回可见链接并且必须排除重复项。像这样：

$().fancybox({
  selector : '.slides li:not(.clone) a'
});

以下是使用

的演示

光滑 - https://codepen.io/fancyapps/pen/pdbrjx
OwlCarousel2 - https://codepen.io/fancyapps/pen/mqvOoz
Swiper - https://codepen.io/fancyapps/pen/eWVyVg
flexslider - https://codepen.io/fancyapps/pen/QQdXwx

Flexslider主图像在fancybox中打开

1 个答案: