Jquery, wordpress and ACF

0
votes

I have a wordpress site and I use ACF. (https://www.advancedcustomfields.com/). I have several articles on my home page with a unique image for each article.

This is what I use for my article's images :

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

My php echo get_field works with this code : I have different image, one for each article :

enter image description here

I tried to use a parallax effect on these images, so I use this script : 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

});

The problem is when I put my php echo field on this jquery script, it doesn't recognize the ID of my images. So I have the same images for each article...

Why ?

enter image description here

2
javascriptphpjquerywordpress

2 Answers

0
votes

Check ACF setting for return type. As i remember return type for image field can be image object or url.

-1
votes

The usage instructions say that you can apply the effect via data attributes:

Add data-parallax="scroll" to the element you want to use, and specify an image with data-image-src="/path/to/image.jpg"

Example:

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

So instead of manually calling the plugin for each image, use the data attribute:

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