Flexslider 主图在 fancybox 中打开

Question

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

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

怎么做到的？ flexslider有没有参数或者需要定制？

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

谢谢

=>代码：

<!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 可与任何 slider/carousel 配合使用，您只需使用 .selector 选项进行初始化，然后根据您的需要对其进行调整，例如，此选择器必须 return 可见链接并且必须排除重复项。像这样：

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

这里是使用

的演示

圆滑 - https://codepen.io/fancyapps/pen/pdbrjx
OwlCarousel2 - https://codepen.io/fancyapps/pen/mqvOoz
刷卡器 - https://codepen.io/fancyapps/pen/eWVyVg
flexslider - https://codepen.io/fancyapps/pen/QQdXwx

Flexslider 主图在 fancybox 中打开

Flexslider main image open in fancybox

javascript

jquery

fancybox

flexslider