Здравствуйте, создал галерею при помощи ACF , вывел ее динамически в карусель для всех постов с ID = 14 и так же вывожу 1 изображение каждого поста галереи.
Надо чтобы при клике на thunbnail разворачивалась полная галерея.
<div class="our_works__inner">
<?php query_posts('cat=14&posts_per_page=4');
while (have_posts()) : the_post();?>
<?php
$images = get_field('gallery_slide');
$image_1 = $images[0];
?>
<div class="our_works__inner__block col-md-4">
<div class="our_works__inner__block__image cover"><img src="<?php echo $image_1['url']; ?> " style="width:350px;height:310px;cursor:zoom-in;" /></div>
<p><?php the_field('podpis_k_photo'); ?></p>
</div>
<?php
endwhile;
wp_reset_query();
?>
</div>
JS
$('.our_works__inner').slick({
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
//modal
$('.our_works__inner').slickLightbox({
src: 'src',
itemSelector: 'div img',
navigateByKeyboard : true,
});
Буду благодарен за советы и помощь