Using ACF image field in JavaScript

Question

I have used some JavaScript on a previous site and would like to re-use the effect - the effect being a background image on a div changes when hovering over various links.

However this time, I want the images to be ACF fields. I have read through the JavaScript API documentation and other posts but I can't get it to work.

This is what I have. I think maybe I have correctly fetched the field but need to add the action of showing it on hover.

Each table cell on the left is an ACF field that consists of a title, description, link and image. I want the large image on the right to change to the ACF image applied to each cell when each one is hovered over.

I have included my attempts, though I have very limited php/js knowledge so it's likely not even close. I am also new to ACF.

Link here

Attempt 1

const defaultImg = "/wp-content/default-image.jpg";
const newImg = acf.getField('featured_item_one_image');
const newImgb = acf.getField('featured_item_two_image');


$('.feat-block-1')
  .on('mouseover', function() {
    $('.main-image').css('background-image', "url(" + newImg + ")");
  })


$('.feat-block-2')
  .on('mouseover', function() {
    $('.main-image').css('background-image', "url(" + newImgb + ")");
  })

Attempt 2

const newImg = acf.getField('field_5de5a95617941');
const newImgb = acf.getField('field_5de5abd20cb3f');


$('.feat-block-1')
  .on('mouseover', function() {
    $('.main-image').css('background-image', "url(" + newImg + ")");
  })

  $('.feat-block-2')
  .on('mouseover', function() {
    $('.main-image').css('background-image', "url(" + newImgb + ")");
  })

And Also this without any of the 'const' values at the top

$('.feat-block-1')
  .on('mouseover', function() {
    $('.main-image').css('background-image', "acf.getField('field_5de5abd20cb3f')");
  })

  $('.feat-block-2')
  .on('mouseover', function() {
    $('.main-image').css('background-image', "acf.getField('field_5de5abd20cb3f')");  })

Any help would be much appreciated

why don't you get variables from php and generate inline css? simply you can set background image with presudo-selector .feat-block-1:hover — Ali Qorbani
I think the ACF JS API need the field key, not the selector. — Stender
@AliQorbani I'm not 100% Sure what you mean. I want the client to be able to simply be able to pick an image with the ACF image field and the rest is automated. — Mr Toad
@Stender yes I think you are right - I amended it but no luck. I will add the effort to the original question. — Mr Toad
@MrToad, There is jQuery error : Uncaught TypeError: $ is not a function in the link you have shared. To fix that wrap your script inside jQuery(document).ready(function($) { // your code goes here }); and then check if your code works or not. — anujpatel

Krishna Savani Krishna Savani · Accepted Answer · 2019-12-06T07:25:07

I have done this before but in different way see below code:

1) I have used Advance Custom field Repeater plugin pluginlike i have installed that and make custom fields with that see here (https://prnt.sc/q6yohq)

2) insert the value in page from admin e.g i want this value "stackoverflowpage" page(i have made template )so from admin i will insert the value see here(https://prnt.sc/q6yqak)

3) In template file (.php) i have inserted below code I have take image value in input type hidden in bg-image by id so i can use later in jquery to show image on hover

<?php

    if( have_rows('allfields') ): ?>
    <?php 
    $i=1;
    while( have_rows('allfields') ): the_row(); 

        // vars
        $image = get_sub_field('image');
        $title = get_sub_field('title');
        $content = get_sub_field('description');
        $link = get_sub_field('link');

        ?>
        <table style="border-collapse: collapse; width: 100%">
        <tbody>
        <tr>
        <td >
        <div id="slides_<?php echo $i ?>"  class="divcommonclass">
        <table style="border-collapse: collapse; width: 100%">
        <tbody>
        <tr>
        <td style="width: 100%" class="home-featured-heading">
        <h4>
        <a href="<?php echo $link ?>" target="_blank"><?php echo $title; ?>                                             </a>
                                                                                        </h4>
        </td>
        </tr>
        <tr>
        <td style="width: 100%" class="home-featured-heading">
        <?php echo $content; ?>         
        </td>
        </tr>
        </tbody>
        </table>
        </div>
        <input type="hidden" id="bg-image" value="<?php echo $image['url']; ?>">
        </td>
        </tr>
        </tbody>
        </table>
        <?php $i++; 
         endwhile; ?>
         <?php endif; ?>
      <div class="imageshow"></div>

4) give style to div where we want to show image

<style>
  .imageshow {
    background-repeat: no-repeat; 
    background-image: url('http://localhost/stackoverflow/wp-content/uploads/2019/12/person_2.jpg');
    width: 100%;
    height: 100%;
    -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
    }
</style>

5) add this script to show image when hover on block

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
</script>
<script>
$(document).ready(function(){
    $('.divcommonclass')
  .on('mouseover', function() {
  var id =  $(this).attr('id');
    var imagpath = $('#'+id+ "+ #bg-image").val();

    $('.imageshow').css('background-image', "url(" + imagpath + ")");
  });

});
</script>

I did not use of javascript to get image value of acf javascript and show in div for that i have just used inut type hidden and add value there and in javascript i have just get that image value by its id

Output : please download and check video(https://drive.google.com/file/d/1xTmSBlxn9NW0Klc4l-uOdA_l---oHuV7/view)

Using ACF image field in JavaScript

1 Answers