• alexcrc

• in reply to: event mouseover/mouseout img repeater ACF
• 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; ?>

• alexcrc

• in reply to: event mouseover/mouseout img repeater ACF
• June 22, 2020 at 5:47 am

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

• in reply to: link in a picture of a repeater
• June 19, 2020 at 10:38 pm

I solved my problem

<?php if( have_rows('projets') ): ?>

                                <?php while( have_rows('projets') ): the_row(); 

                                    $image = get_sub_field('image_projet');
                                    $titleProject = get_sub_field('type_et_titre_du_projet');
                                ?>
                                 <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 cas justify-content-center">
                                    <a class="d-block w-100 a" href="projet_cap_sciences.php#projets">
                                        <img src="" alt="">
                                    </a>
                                    <div class="titreProjet" data-aos-duration="900" data-aos-once="true">
                                        <?php echo $titleProject;?>
                                    </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; ?>