Fancybox thumbnail image not display in popup

Question

I used flexslider wtih fancybox. When I click on main image in flexslider then thumbnail not display in popup.

In Fancybox version 3.2.5 thumbnail is display proper. But, in fancybox version 2.1.5 thumbnail slider display. But, image is not display.

How can I set it in version 2.1.5?

Please help me.

Thanks.

Example : https://codepen.io/fancyapps/pen/QQdXwx

<div class="container">
      <div id="slider" class="flexslider" style="width:450px;height:400px;">
         <ul class="slides">
            <li>
               <a href="img/1.jpg" rel="gallery" data-fancybox="images">
               <img src="img/1.jpg" />
               </a>
            </li>
            <li>
               <a href="img/2.jpg" rel="gallery" data-fancybox="images">
               <img src="img/2.jpg" />
               </a>
            </li>
            <li>
               <a href="img/3.jpg" rel="gallery" data-fancybox="images">
               <img src="img/3.jpg" />
               </a>
            </li>
            <li>
               <a href="img/4.jpg" rel="gallery" data-fancybox="images">
               <img src="img/4.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua5.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua5.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua6.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua6.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua1.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua1.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua2.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua2.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua3.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua3.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua4.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua4.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua5.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua5.jpg" />
               </a>
            </li>
            <li>
               <a href="img/noctua6.jpg" rel="gallery" data-fancybox="images">
               <img src="img/noctua6.jpg" />
               </a>
            </li>
         </ul>
      </div>
      <div id="carousel" class="flexslider">
         <ul class="slides">
            <li>
              <a href="img/noctua1.jpg">
               <img src="img/noctua1.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua2.jpg">
               <img src="img/noctua2.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua3.jpg">
               <img src="img/noctua3.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua4.jpg">
               <img src="img/noctua4.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua5.jpg">
               <img src="img/noctua5.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua6.jpg">
               <img src="img/noctua6.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua1.jpg">
               <img src="img/noctua1.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua2.jpg">
               <img src="img/noctua2.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua3.jpg">
               <img src="img/noctua3.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua4.jpg">
               <img src="img/noctua4.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua5.jpg">
               <img src="img/noctua5.jpg" />
             </a>
            </li>
            <li>
              <a href="img/noctua6.jpg">
               <img src="img/noctua6.jpg" />
             </a>
            </li>
            <!-- items mirrored twice, total of 12 -->
         </ul>
      </div>
      </div><div class="container">
  <div id="slider" class="flexslider" style="width:450px;height:400px;">
     <ul class="slides">
        <li>
           <a href="img/1.jpg" rel="gallery" data-fancybox="images">
           <img src="img/1.jpg" />
           </a>
        </li>
        <li>
           <a href="img/2.jpg" rel="gallery" data-fancybox="images">
           <img src="img/2.jpg" />
           </a>
        </li>
        <li>
           <a href="img/3.jpg" rel="gallery" data-fancybox="images">
           <img src="img/3.jpg" />
           </a>
        </li>
        <li>
           <a href="img/4.jpg" rel="gallery" data-fancybox="images">
           <img src="img/4.jpg" />
           </a>
        </li>
        <li>
           <a href="img/5.jpg" rel="gallery" data-fancybox="images">
           <img src="img/5.jpg" />
           </a>
        </li>
        <li>
           <a href="img/6.jpg" rel="gallery" data-fancybox="images">
           <img src="img/6.jpg" />
           </a>
        </li>
        <li>
           <a href="img/1.jpg" rel="gallery" data-fancybox="images">
           <img src="img/1.jpg" />
           </a>
        </li>
        <li>
           <a href="img/2.jpg" rel="gallery" data-fancybox="images">
           <img src="img/2.jpg" />
           </a>
        </li>
        <li>
           <a href="img/3.jpg" rel="gallery" data-fancybox="images">
           <img src="img/3.jpg" />
           </a>
        </li>
        <li>
           <a href="img/4.jpg" rel="gallery" data-fancybox="images">
           <img src="img/4.jpg" />
           </a>
        </li>
        <li>
           <a href="img/5.jpg" rel="gallery" data-fancybox="images">
           <img src="img/5.jpg" />
           </a>
        </li>
        <li>
           <a href="img/6.jpg" rel="gallery" data-fancybox="images">
           <img src="img/6.jpg" />
           </a>
        </li>
     </ul>
  </div>
  <div id="carousel" class="flexslider">
     <ul class="slides">
        <li>
          <a href="img/1.jpg">
           <img src="img/1.jpg" />
         </a>
        </li>
        <li>
          <a href="img/2.jpg">
           <img src="img/2.jpg" />
         </a>
        </li>
        <li>
          <a href="img/3.jpg">
           <img src="img/3.jpg" />
         </a>
        </li>
        <li>
          <a href="img/4.jpg">
           <img src="img/4.jpg" />
         </a>
        </li>
        <li>
          <a href="img/5.jpg">
           <img src="img/5.jpg" />
         </a>
        </li>
        <li>
          <a href="img/6.jpg">
           <img src="img/6.jpg" />
         </a>
        </li>
        <li>
          <a href="img/1.jpg">
           <img src="img/1.jpg" />
         </a>
        </li>
        <li>
          <a href="img/2.jpg">
           <img src="img/2.jpg" />
         </a>
        </li>
        <li>
          <a href="img/3.jpg">
           <img src="img/3.jpg" />
         </a>
        </li>
        <li>
          <a href="img/4.jpg">
           <img src="img/4.jpg" />
         </a>
        </li>
        <li>
          <a href="img/5.jpg">
           <img src="img/5.jpg" />
         </a>
        </li>
        <li>
          <a href="img/6.jpg">
           <img src="img/6.jpg" />
         </a>
        </li>
        <!-- items mirrored twice, total of 12 -->
     </ul>
  </div>
  </div>

=> jQuery :

$('#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"
});
$().fancybox({
  selector : '.slides :not(.clone) a',
  helpers : {
     overlay : {
        locked : false,
        arrows : true,
        nextClick : true
     }
  },
  hash   : false,
  thumbs : {
    autoStart : true,
    axis      : 'x'
  }
});
$('[data-fancybox="images"]').fancybox({
  helpers : {
      thumbs : {
          width : 50,
          height : 50
      }
  }
})