Support » Plugin: ACF: Image Hotspots Field » Script for frontend display

  • Hi, this looks really interesting. 🙂

    I’ve created a repeater and created three subfields as per your screenshot, the hotspot, title and description.

    I know how to use the repeater but am not sure exactly how to code the frontend so that you can hover over a hotspot to change the image.

    I see that the hotspot field echo’s the coordinates so I’ve got everything I need to use, the only thing I’m missing is what script I need to use so that it displays correctly.

    Can you point me (and other interested users) in the direction of the code I’d need to use?

    Any advice most appreciated – keep up the good work!

Viewing 1 replies (of 1 total)
  • Plugin Author Andrew Rockwell


    Hi Mozdt,

    In it’s current state, the plugin is not very non-developer friendly. (not sure how knowledgeable you are with coding) Since there’s so many different ways to use the coordinates I didn’t want to pigeonhole it. But here’s a basic version of what I’m doing with them, pretty simple:

    $count = 0;
    while ( have_rows('main_features') ) {
    	$coords = explode( ',', get_sub_field('coordinates') );
    	$title  = get_sub_field('title');
    	$desc   = get_sub_field('description');
    	echo '<button class="feature" style="left:' + $coords[0] + ';top:' + $coords[1] + ';" data-title="' . $title . '" data-info="' . $desc . '">' . $count++ . '</button>'

    So each button is positioned absolutely, inside a relative positioned container which also holds the image these coordinates were mapped from.

    Then I have a single extra coordinates field so my client can click to choose where the description lies.

    I’ve made a simple jsfiddle demonstration:

    Hope you get it working!

Viewing 1 replies (of 1 total)
  • The topic ‘Script for frontend display’ is closed to new replies.