Hi bramroos,
Here’s a jsfiddle I made to demonstrate one way to use the coordinates:
https://jsfiddle.net/2pg1x4yg/
And I’ll paste here the simplified version of the PHP loop I’m using for the coordinates:
$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>'
}
Let me know if you have any questions,
Andrew
Hi Andrew,
thanks for your reply! I have tried to replicate your code. Somehow it doesn’t really work. Here’s my code:
<?php
$featured_image = get_field('featured_image');
if (!empty($featured_image)):
?>
<img src="<?php echo $featured_image['url']; ?>" alt="<?php echo $ima['alt']; ?>" />
<?php endif; ?>
<?php if (have_rows('main_features')): ?>
<?php
$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>';
?>
<?php endwhile; ?>
<?php endif; ?>
It outputs the featured image with the following in plane text below: 133.2402Title” data-info=”description”>0 81.2849Title 2″ data-info=”description 2″>1
Can you see what is going wrong?
Many thanks for your time and effort!
Bram
Hi,
Sorry for the late reply, didn’t check off the box for email notifications.
I converted that PHP from javascript, so where you combine the <button> string, it should be . to the left & right of coords, not +
Hi, thanks for the reply!
That kind of makes sense. Buttons working now (ie. displaying the numbers)
However, how would I make these buttons clickable and displaying the title and description?
Many thanks for your help.
Bram
Refer to the jsfiddle:
https://jsfiddle.net/2pg1x4yg/
First of course you need to add the html for the title & description.
Then all you need to do is add javascript so that:
– on button click -> the data stored in that button ( data-title && data-info ) is transferred to the title & description html tags.
Silly not checking your earlier reply for this!
Works beautifully! Thank you very much for your efforts.
I will send you the final result when the project is finished.
Regards,
Bram
Hi,
just a few issues I have hoping you could help. I’m trying to have the text in the popup on a background color. If I style this span the background is visible before clicking. Is there a fix to this?
Also, is it possible to include an image in the popup? I’ve tried to include it but it echos the url instead of the image. See the code below:
<div class="large-8 columns align-self-middle valve-position">
<?php
$featured_image = get_field('featured_image');
if (!empty($featured_image)):
?>
<img src="<?php echo $featured_image['url']; ?>" alt="<?php echo $ima['alt']; ?>" />
<?php endif; ?>
<?php if (have_rows('main_features')): ?>
<?php
$count = 0;
while (have_rows('main_features')): the_row();
$coords = explode(',', get_sub_field('coordinates'));
$desc = get_sub_field('description');
$image = get_sub_field('image');
echo '<a class="feature-btn" style="left:' . $coords[0] . ';top:' . $coords[1] . ';" data-image="' . $image . '" data-info="' . $desc . '"> + </a>';
?>
<?php endwhile; ?>
<?php endif; ?>
<div class="content" style="left:0%;top:100%;position:absolute;">
<div></div>
<span style="width:10px; height: 10px; background-color: #333333;"></span>
</div>
<script>
jQuery(document).ready(
function () {
jQuery('.feature-btn').click(function () {
var info = jQuery(this).attr('data-info');
var img = jQuery(this).attr('data-image');
jQuery('.content span').text(info);
jQuery('.content div').text(img);
jQuery('.feature-btn.active').removeClass('active');
jQuery(this).addClass('active');
});
});
</script>
</div>
Hi Andrew,
would you have any suggestions regarding the above?
Many thanks,
Bram
