Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用

产品详情页可以用的放大镜效果

效果图:
2.png

1.png

 
/*引入资源*/
<link rel="stylesheet" href="css/smoothproducts.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
 /*html+php*/             
       <div class="sp-wrap">
                            <?php if( have_rows('image_gallery') ): ?>
                            <?php while( have_rows('image_gallery') ): the_row(); 
                                        $image = get_sub_field('add_img');
                                        $image_url = $image[url];
                            ?>
                            <a href="<?php echo $image_url ?>">
                                <img alt="<?php the_title();?>" src="<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url ?>&w=400;&h=400;&zc=1" width="400" height="400" class="img-responsive"/>
                            </a>
                           <?php endwhile;endif;?>
                    </div>
 
/*jquery配置*/
<script type="text/javascript">
    /* wait for images to load */
    $(window).load(function() {
        $('.sp-wrap').smoothproducts();
    });
</script>
 
资源包下载:
看附件
1
2018-11-16

2 个评论

需要注意的是<a href="<?php echo $image_url ?>"></a>这链接的图片是原图图片,需要大于<img>标签里面的图片,这样才有放大效果;另外a链接到的图片和img里面的图片必须是相同比例的
好教程,谢谢分享。

要回复文章请先登录注册