Search code examples
javascriptjqueryfancyboxflexslider

Flexslider main image open in fancybox

I want to open main image in fancybox when click on main image in flexslider.

If possible that when click on main image and open it in fancybox with all thumbnail as like display in flexslider with prev and next button.

How to do it possible? Is there any parameter in flexslider or need to do customization?

Please help me. I mention code here.

Thanks

=> Code :

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

enter image description here

Solution

  • fancyBox works with any slider/carousel, you just have to iniatialise using .selector option and you have to tweak this to suit your needs, e.g., this selector has to return visible links and has to exclude duplicates. Something like this:

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

    Here are demos using