Support » Plugin: ACF: Image Hotspots Field » Repeater

  • Hi,

    Good work! I have set up the repeater fields as per your screenshot and all works fine on the back-end. However, I’m struggling with setting up the repeater code. I think the previous topic has the same issue?

    Would you be so kind to give us a nudge in the right direction? Or the actual code used from your example would be greatly appreciated!

    Many thanks!

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

    (@rockwell15)

    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

    Plugin Author Andrew Rockwell

    (@rockwell15)

    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

    Plugin Author Andrew Rockwell

    (@rockwell15)

    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>

    Many thanks,
    Bram

    Hi Andrew,

    would you have any suggestions regarding the above?

    Many thanks,
    Bram

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Repeater’ is closed to new replies.