Support

Account

Home Forums Front-end Issues event mouseover/mouseout img repeater ACF

Solved

event mouseover/mouseout img repeater ACF

  • Hello everyone !

    Currently, I’m trying to configure a rollover effect with mouseover / mouseout events on an image in the ACF wordpress plugin repeater and have the rollover change the image to another image. Here is the repeater code which means that when you press the new project key, it should display an image with a built-in link and the name of the project. (see the site orianehelbert.fr for the example of projects).

    <?php if( have_rows('projets') ): ?>
                        <?php while( have_rows('projets') ): the_row(); 
                                    $image = get_sub_field('image_projet');
                                    $imageHover = get_sub_field('image_hover_projet');
                                ?>
    
                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                            <a href="<?php  the_sub_field('lien_vers_le_projet');   ?>" class="d-block w-100 a">
    
                                <?php if( get_sub_field('image_projet')  ): ?>
                                <img class="imageProjet" src="<?php the_sub_field('image_projet'); ?>"
                                   onmouseover="this.src='<?php the_sub_field('image_hover_projet') ?>'"
                                   onmouseout="this.src='<?php the_sub_field('image_projet') ?>'" />
                                <?php endif; ?>
                            </a>
    
                            <div class="titreProjet" data-aos-duration="900" data-aos-once="true">
                                <?php the_sub_field('titre_du_projet');;?>
                            </div>
                            <div data-aos-delay="300" data-aos-duration="700" data-aos-easing="ease-in-out"
                                data-aos-once="true" class="trait">
                            </div>
                        </div>
                        <?php endwhile; ?>
                  <?php endif; ?>

    so the images with the incorporated link are displayed nickel but when I want to put the mouseout and mouseover events, there is only the first image which has a hover effect, the following 3 do not.

    <?php if( get_sub_field('image_projet')  ): ?>
                                <img class="imageProjet" src="<?php the_sub_field('image_projet'); ?>"
                                   onmouseover="this.src='<?php the_sub_field('image_hover_projet') ?>'"
                                   onmouseout="this.src='<?php the_sub_field('image_projet') ?>'" />
                              <?php endif; ?>

    if anyone would have a lead to help me. I thank you in advance

  • I’m Trying this :

      <?php if( have_rows('projets') ): ?>
                            <?php while( have_rows('projets') ): the_row(); 
                                        $image = wp_get_attachment_image_src(get_sub_field('image_projet'));
                                        $imageHover = wp_get_attachment_image_src(get_sub_field('image_hover_projet'));
                                    ?>
                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                                <a href="<?php  the_sub_field('lien_vers_le_projet');   ?>" class="d-block w-100 a">
                                    <?php if( get_sub_field('image_projet')  ): ?>
                                    <img class="imageProjet" src="<?php echo $image[0]; ?>"
                                       onmouseover="this.src='<?php echo $imageHover[0]; ?>'"
                                       onmouseout="this.src='<?php echo $image[0]; ?>'" />
                                    <?php endif; ?>
                                </a>
                                <div class="titreProjet" data-aos-duration="900" data-aos-once="true">
                                    <?php the_sub_field('titre_du_projet');;?>
                                </div>
                                <div data-aos-delay="300" data-aos-duration="700" data-aos-easing="ease-in-out"
                                    data-aos-once="true" class="trait">
                                </div>
                            </div>
                            <?php endwhile; ?>
                            <?php endif; ?>

    the hover on the first image works very well and when I move the mouse over it, the new image appears more disappears when I remove the mouse.
    By cons I can not recover the url of the hover image on the following images ……

    someone to help me, i am a little lost.
    thank you

    • alexcrc

    • June 22, 2020 at 11:39 pm

    Here is the solution to the problem :

    in the acf parameters you create two sub fields, one with the first image and the second with the image that will appear during the hover.
    You select Image URL for the two images and then you integrate this code:

    <?php if( have_rows('projets') ): ?>
                            <?php while( have_rows('projets') ): the_row(); 
                                        $image = get_sub_field('image_projet');
                                        $imageHover = get_sub_field('imghover');
                                    ?>
                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                                <a href="<?php  the_sub_field('lien_vers_le_projet');   ?>" class="d-block w-100 a">
                                    <?php if( get_sub_field('image_projet')  ): ?>
                                    <img class="imageProjet" src="<?php echo $image; ?>"
                                       onmouseover="this.src='<?php echo $imageHover; ?>'"
                                       onmouseout="this.src='<?php echo $image; ?>'" />
                                    <?php endif; ?>
                                </a>
                                
                            </div>
                            <?php endwhile; ?>
                            <?php endif; ?>
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.