• 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 ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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
Hi,
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:

https://github.com/krasimir/gifffer

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
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic