WordPress.org

Antoine
(@ant1busted)

5 years, 8 months ago

Hi I would like to implement a new feature :
I need to replace the thumbnail by an animated gif. I tried using a mouseover jquery event but there seem to already be triggered by something else. Any idea on how I should do it?
Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Nikita
(@nko)

5 years, 8 months ago

Hi.

Show me an online example of your implementation. Your custom script parts also will be helpful. Then I can try to help.

Regards, nK.

Thread Starter Antoine
(@ant1busted)

5 years, 8 months ago

Hi
Thanks for your reply.
This website does this kind of hover animation : https://wizz.fr/ (in the projects section)
my website is at : https://www.studio-oracle.fr
and I tried a very simple jquery to replace the static image by an animated GIF like this :
jQuery(function($) {
$(“img.attachment-vp_xl”).on(
{ “mouseover” : function() { this.src = ‘http://www.studio-oracle.fr/wp-content/uploads/2018/11/ESCAPE-TIME_1.gif’; }
, “mouseout” : function() { this.src=’images/tile_4.jpg’; }
});
});
Plugin Author Nikita
(@nko)

5 years, 7 months ago
Hi.

The images use srcset attribute, so you also need to change it. This example should work:
```
jQuery(function($) {
    $(document).on('mouseover', '.vp-portfolio__item-img img', function() {
        var $this = $(this);

        // save old image.
        $this.attr({
            'data-saved-src': $this.attr('src'),
            'data-saved-srcset': $this.attr('srcset'),
        });

        // add gif.
        $this.attr({
            src: 'https://www.studio-oracle.fr/wp-content/uploads/2018/11/ESCAPE-TIME_1.gif',
            srcset: '',
        });
    });

    $(document).on('mouseout', '.vp-portfolio__item-img img', function() {
        var $this = $(this);

        // restore image.
        if ( $this.attr('data-saved-src') ) {
            $this.attr({
                src: $this.attr('data-saved-src'),
                srcset: $this.attr('data-saved-srcset'),
            });
            $this.removeAttr('data-saved-src');
            $this.removeAttr('data-saved-srcset');
        }
    });
});
```
- This reply was modified 5 years, 7 months ago by Nikita.
Thread Starter Antoine
(@ant1busted)

5 years, 7 months ago

It works, thanks. Do you think I could customize the template of visual portfolio to use an ACF field that contains the gif image? Can I just override the portfolio template to add a data attribute to the image tag?

Plugin Author Nikita
(@nko)

5 years, 7 months ago

I think yes, you can.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘animated gif on hover’ is closed to new replies.

Tags