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

    (@rockwell15)

    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') ) {
	the_row();
	$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:
    https://jsfiddle.net/2pg1x4yg/

    Hope you get it working!
    Andrew

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

Tags