Jquery，wordpress和ACF

Question

我有一个WordPress站点，我使用ACF。 （https://www.advancedcustomfields.com/）。 我在我的主页上有几篇文章，每篇文章都有独特的图片。

这是我用我的文章的图片：

<div class="image_cover_home" style="background-image:url(<?php echo get_field('image_cover', $value->ID)['url'] ?>)" > 

我的PHP回声get_field与此代码的工作：我有不同的图像，每一个文章：

我试图对这些图像使用视差效果，因此我使用以下脚本： http://pixelcog.github.io/parallax.js/

$('.image_cover_home').parallax({ 

    imageSrc: '<?php echo get_field('image_cover', $value->ID)['url'] ?>', 
    naturalWidth: 400, 
    naturalHeight: 200, 
    speed:0.8 

}); 

问题是，当我把我的php echo字段放在这个jquery脚本上，它不能识别我的图像的ID。所以我对每篇文章都有相同的图像...

为什么？

Answer 1

你必须以字符串的问题。试着这样

imageSrc: "<?php echo get_field('image_cover', $value->ID)['url'] ?>",

所以整个看起来就像..

$('.image_cover_home').parallax({ 

    imageSrc: "<?php echo get_field('image_cover', $value->ID)['url'] ?>", 
    naturalWidth: 400, 
    naturalHeight: 200, 
    speed:0.8 

}); 

Answer 2

检查ACF设定的返回类型。正如我记得图像字段的返回类型可以是图像对象或网址。

Answer 3

的usage instructions说，通过数据属性，你可以应用效果：

添加数据视差=“滚动”到你想使用的元素， 指定与数据图像的src图像= “/路径/到/ image.jpg的”

实施例：

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div> 

因此，而不是手动调用每个图像插件，使用数据属性：

data-image-src="<?php echo get_field('image_cover', $value->ID)['url'] ?>"