slick slider + Fancybox JS

 **** / HTML

<div class="main">

  <div class="slider slider-for">

    <div><h3>1</h3></div>

    <div><h3>2</h3></div>

    <div><h3>3</h3></div>

    <div><h3>4</h3></div>

    <div><h3>5</h3></div>

  </div>

  <div class="slider slider-nav">

    <div><h3>1</h3></div>

    <div><h3>2</h3></div>

    <div><h3>3</h3></div>

    <div><h3>4</h3></div>

    <div><h3>5</h3></div>

  </div>

  <div class="action">

    <a href="#" data-slide="3">go to slide 3</a>

    <a href="#" data-slide="4">go to slide 4</a>

    <a href="#" data-slide="5">go to slide 5</a>

  </div>

</div>

**** /JS

===> Fancybox

<script type="text/javascript">

$(document).ready(function(a){

$('[data-fancybox="gallery<?php echo $pid; ?>"]').fancybox({

    loop : true,

    buttons: [

    "zoom",

    "share",

    "slideShow",

    "fullScreen",

    "download",

    "thumbs",

    "close"

], 

animationEffect: "zoom-in-out",

transitionEffect: "circular",

    });

});

</script>

===> slick

<script type="text/javascript">

$('.slider-for').slick({

   slidesToShow: 1,

   slidesToScroll: 1,

   arrows: false,

   fade: true,

   asNavFor: '.slider-nav'

});

$('.slider-nav').slick({

slidesToShow: 6,

slidesToScroll: 1,

asNavFor: '.slider-for',

dots: true,

focusOnSelect: true

});

$('a[data-slide]').click(function(e) {

e.preventDefault();

var slideno = $(this).data('slide');

$('.slider-nav').slick('slickGoTo', slideno - 1);

});

</script>

Down File JS: tại đây

=========================================

Code PHP

echo'<div class="slider slider-for">

    <div>

    <h3 class="shoppic">

<a data-fancybox="gallery'.$pid.'" data-caption="'.$title.'" href="/uploads/shop/pic/'.$image.'">

<img src="/uploads/shop/pic/'.$image.'">

</a>

</h3>

    </div>';

    $d = data__shopimages($pid);

    foreach ($d as $key => $value) {

    $dimages= $value["images"];

    echo'<div>

    <h3 class="shoppic">

<a data-fancybox="gallery'.$pid.'" data-caption="'.$title.'" href="/uploads/shop/pic/'.$dimages.'">

<img src="/uploads/shop/pic/'.$dimages.'">

</a>

</h3>

</div>';

    }

echo'</div>';

echo'<div class="slider slider-nav">';

echo'<div>

<h3 class="more-picshop">

        <img src="/uploads/shop/pic/'.$image.'" width="280" height="280">

        </h3>';

    echo'</div>';           

    foreach ($d as $key => $value) {

    $dimages= $value["images"];

    echo'<div>

    <h3 class="more-picshop">

            <img src="/uploads/shop/pic/'.$dimages.'" width="280" height="280">

            </h3>

</div>';

    }

echo'</div>';