This week's book giveaway is in the Spring forum.
We're giving away four copies of Java Persistence with Spring Data and Hibernate and have Cătălin Tudose on-line!
See this thread for details.
Win a copy of Java Persistence with Spring Data and Hibernate this week in the Spring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Ron McLeod
  • Tim Cooke
  • Paul Clapham
  • Liutauras Vilda
  • Junilu Lacar
  • Rob Spoor
  • Jeanne Boyarsky
Saloon Keepers:
  • Stephan van Hulst
  • Carey Brown
  • Tim Holloway
  • Piet Souris

Trying to modify a library to play/stop animated Gif

Ranch Hand
Posts: 100
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have been struggling with this issue for a while and cannot find a proper solution to it (I am new to Javascript). I am working with Wordpress and I have a requirement whereby I need to do the following:

- 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>)?

Thank you
money grubbing section goes here:
The Low Tech Laboratory Movie Kickstarter is LIVE NOW!
    Bookmark Topic Watch Topic
  • New Topic