FlipClock.js display an image when the countdown is over

Question

I'm using FlipClock 1.1a and I want to set an image when the countdown is over and hide the counter. Currently, the counter goes in - time (-1 hour, -12 minutes) when the time is up. How can I do this? The site has very few callback and its not helping.

Answer 1

They have provided different example in their code base which do include counter stop event. So, you need to use stop callback of FlipClock performing the required operation,

 var clock;
    $(document).ready(function() {
        clock = $('.clock').FlipClock(10, {
            clockFace: 'MinuteCounter',
            countdown: true,
            callbacks: {
                stop: function() {
                    // Do whatever you want to do here,
                    // that may include hiding the clock 
                    // or displaying the image you mentioned
                    $('.message').html('The clock has stopped!');
                }
            }
        });
    });

P.S

If you have downloaded their whole source file you can check out the demo itself /FlipClock-master/examples/countdown-stop-callback.html