- add a CTA play/stop button (to be independently activated by the user) on an animated gif. The animated gif needs stopping programmatically within 5 seconds and then the play button should appear for the user to interact with it;
- avoid to be taken to the URL of the image when clicking on the button, that means that action on the button are distinct from action on clicking on the image area. This relates to WordPress feature when it comes to featured images on the home page. When you click on a featured image, you are by default taken to the article.
In order to accomplish the above, I have been using the following library:
The library is great when it comes to creating the play/stop button, but:
- it adds the button as soon as the page is loaded, whereas I would like this to happen within 5 seconds
- By clicking on the button, it plays the gif, but at the same time it takes you to the article. This is because the button/div is inside the <a href>, as it can seen as follows:
I have been struggling to understand how to change the current library and in particular the function which replaces normal gifs with playable gifs, as follows:
I am calling Gifffer() inside the window.load, how can I apply a delay of 5 seconds? How do I make the button only to play the gif, without taking me to the article (<a href>)?