详情页-产品放大镜效果
如何对接wordpress：
<script src="jquery.min.js"></script>
<!-- Include Cloud Zoom CSS. -->
<link rel="stylesheet" type="text/css" href="cloudzoom.css" />
<!-- Include Cloud Zoom script. -->
<script type="text/javascript" src="cloudzoom.js"></script>
<!-- Call quick start function. -->
<script type="text/javascript">
CloudZoom.quickStart();
</script>
<div class="demo">
<?php $i=0;if( have_rows('gallery') ): ?>
<?php while( have_rows('gallery') ): the_row();
$image = get_sub_field('add_image');
$image_url = $image[url];
?>
<?php if($i=='0'): ?>
<img class="cloudzoom" src="<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url ?>&w=400;&h=400;&zc=1" class="img-responsive" data-cloudzoom="zoomImage: '<?php echo $image_url ?>'">
<?php endif;?>
<?php $i++;endwhile;endif;?>
<ul>
<?php if( have_rows('gallery') ): ?>
<?php while( have_rows('gallery') ): the_row();
$image = get_sub_field('add_image');
$image_url = $image[url];
?>
<li class="cloudzoom_li">
<img class = "cloudzoom-gallery" src = "<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url?>&w=60;&h=60;&zc=1" data-cloudzoom = "useZoom: '.cloudzoom', image: '<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url?>&w=400;&h=400;&zc=1', zoomImage: '<?php echo $image_url ?>' "/>
</li>
<?php endwhile;endif;?>
</ul>
</div>
我是创建了一个repeater类型的字段gallery，他这个比较特殊，要单独调用首图作为大图显示，然后再调用所有的图片作为小图用于图片切换功能
