Ihopeful Blog

Sweat is the lubricant of success.

首页 归档 标签 关于

页面实现类似于淘宝的图窗功能

2019-08-22 2 min read # WordPress # PHP

解决思路:

  1. 前台的功能通过JS插件实现。
  2. 图片获取通过自定义字段功能获取。

需要用到ACF插件的重复器和Swiper.js

<div class="swiper-container gallery-top">
	<div class="swiper-wrapper">
		<?php
		if( have_rows('product_photo',$post->ID) ):
			while ( have_rows('product_photo',$post->ID) ) : the_row();
				$image = get_sub_field('product_photo');
				echo '<div class="swiper-slide"><img src="'.$image['sizes']['large'].'" alt="'.$image['title'].'" /></div>';
			endwhile; 
		endif;
		?>
	</div>
</div>
<div class="gallery-thumb">
	<div class="swiper-container gallery-thumbs">
		<div class="swiper-wrapper">
			<?php
			if( have_rows('product_photo',$post->ID) ):
				while ( have_rows('product_photo',$post->ID) ) : the_row();
					$image = get_sub_field('product_photo');
					echo '<div class="swiper-slide"><img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['title'].'" /></div>';

				endwhile; 
			endif;
			?>
		</div>
	</div>
	<div class="product-button-next"><i class="fa fa-angle-right"></i></div>
	<div class="product-button-prev"><i class="fa fa-angle-left"></i></div>
</div>

JS部分

//产品详情页产品图
var galleryTop = new Swiper('.gallery-top', {
	spaceBetween: 10,
	autoplay: 4000,
	autoHeight: true,
	observer: true,
	observeParents: true,
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
	spaceBetween: 10,
	centeredSlides: true,
	slidesPerView: 4,
	touchRatio: 0.2,
	slideToClickedSlide: true,
	autoHeight: true,
	observer: true,
	observeParents: true,
	nextButton: '.product-button-next',
	prevButton: '.product-button-prev',
});
RSS