@antowa_plawkevich
Junior Front-end developer

Fancybox Slideshow from One Image?

Здравствуйте, создал галерею при помощи 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,
});


Буду благодарен за советы и помощь
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы