advanced custom field -wordpress+ repeater

Question

I combined a slider with the repeater fields. under the repeater I have 2 subfields. one called “image” and the other “title”

this slider has a class called “selected-item” that dynamically appear when an image is selected. (when this class is on an image the image change it’s size).

How can I define that when the class “selected-item” is on some image also the “title” form the same row of the image will appear?

this is the code the displays the images:

    <?php

// check if the repeater field has rows of data
 $i = 1;
if( have_rows('carousel_images') ):
    // loop through the rows use_cases_fields data
    while ( have_rows('carousel_images') ) : the_row();
          $title=get_sub_field('image_carousel_discription');
        $image = get_sub_field('image_carousel1');

        if( !empty($image) ):
            // vars

            // thumbnail
            $thumb = $image;

            $i++;

            ?>

   <h1 data-row="< echo $i; >">   <?php echo $title ?>     </h1>
                <li> <a href="#home"><img  data-row="< echo $i; >" src="<?php echo $thumb ?>"/></a> </li>


        <?php endif; ?>



        <?php
    endwhile;
endif;
?>

?>

I would include a callback in your jQuery slider to find the "data-row" attr and then display the h1 of the same "data-row" value. What jQuery are you using to slide through your images? — Samyer
No, sorry. I should have been more clear. Which slider are you using? Is it a plugin, a jQuery library or what? — Samyer
The answer is below. You should be able to listen to the click on your carousel or run a function on a callback of your slider. — Samyer

Kiran Dash Kiran Dash · Accepted Answer · 2017-12-05T14:42:03

Keep the title hidden in the beginning and then show the title when selected-item class is applied. If h1 is going to be always next to the image tag then use the + selector.

h1 { display: none; }
.selected-item + h1 { display: block; }

Or you can detect a class change event using jquery.

function checkForChanges()
{
    if ($('img').hasClass('selected-item'))
        $('h1').css('display','block');
    else
        setTimeout(checkForChanges, 500);
}

checkForChanges();

$("#click").on('click', function(){
    $('img').addClass("selected-item");
});

    h1 { display: none; } /* Keep the title hidden in the beginning */
     /* Show the title when selected-item class is applied */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://via.placeholder.com/100x100" width="100" height="100">
<h1>title</h1>
<div id="click">click me</div>

advanced custom field -wordpress+ repeater

1 Answers