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'] ?>"