TimeCircles plugin for SPIP 3.1+

This contribution or plugin is actually being tested. Issues may occur, don’t hesitate to report those in following post’s comments.

Adds simple & fully customizable jquery timers & countdowns to your SPIP website

Any Big Time deadline or Grand Opening coming soon ?
Tease your website audience about it with simple and fully custom designed jQuery timers & countdowns.

This plugin is a simple, yet efficient package version for SPIP, of Wim Barelds’ TimeCircles jQuery plugin in last known version to date (v1.5.3)

How to install ?

Are you new here ? Discover SPIP !

You may install TimeCircles like any other plugin.

TimeCircles depends on nothing but jQuery 1.9.1+ on your website, thus making it “naturally” compatible starting SPIP 3.1.

Even if it’s by far not a mandatory dependency for TimeCircles, this plugin has been thought and developed with plugin Agenda in mind, as I was working on a festival website (soon to be released). Promoters wanted to display a “Final countdown” on their home page, until the festival’s grand opening (which date/time was recorded as a SPIP event, for lives running order publishing purposes).

How to use it

TimeCircles comes with 3 different timers & countdowns short-models that you can use either with, or without plugin ’Agenda’ to generate & display kind of things like that on your website :

Whatever the content you’re editing, just add one of the following short <model> to generate the adjusted timer effect.

NOTE: TimeCircles does NOT store any data anywhere (maybe soon if the need is real).


If you’re using the plugin Agenda (not mandatory), this will work perfectly fine and sitewide, with any SPIP event. Example with event id n° 3 (here: New Year’s Eve 2019)

  1. <datecountdown|id_evenement=3>

Also works fine with any date/time combination, manually set to the <datecountdown> model, like :

  1. <datecountdown|data-date=2057-08-07 20:00:00>

Both examples at work here, on my testing website’s homepage, within the ’website description’ field’s display :

Attention : date/time values should always be set with php-like values :
Y-m-d h:i:s (or H for hours 0-24) e.g.: 2019-01-01 00:00:00

In a SPIP event context (with plugin Agenda)

  1. <datecountdown|>

Placed anywhere in your event’s description should do the trick too, based on the event’s start date/time.

You also may apply TimeCircles to each and every single event created with ’Agenda’ by simply adding the #MODELE{datecountdown} tag to your events templates/loops in /squelettes


Let’s start a 15’ min. timer here with (values here are expressed in seconds: 900 => 15 minutes)

  1. <countdowntimer|class=something|data-timer=900>


Or, how long have you been reading that page ?

  1. <pageopentimer|>

Modification and styles

TimeCircles is also shipped with a css/timecircles.css stylesheet and a JS file, to call the lib’s functions: js/timecircles.js. Those 2 files are already included to your website’s <head> section with SPIP’s tags #INSERT_HEAD & #INSERT_HEAD_CSS.

You can even get you some free own custom JS calls, ready to get copy/pasted into your /squelettes/js/timecircles.js by generating them on the author’s website.

Note to templates developers: Since version and following that method, timers are now made responsive by default, thanks to javascript function rebuild(), invoqued on the timer’s container each time the browser’s window is resized.

To keep it that way, this snippet should be kept in your own /squelettes/js/timecircles.js :

$(window).on('resize', function(){

Plugin is free for any use & open to common dev

It’s source code is of course fully open and available, for download & mutual development, on SPIP-Zone’s plugins repository (here).

Feel free to git clone / svn co the latest build and let’s dance !


  • Get this plugin to work in maintenance mode, on “under construction” pages (with plugin En travaux 2.0).
  • Make a generic config panel, following the JS generator from the author’s website :
    Config panel
  • Deal with insertion through plugin ’inserer_modele
  • Finding a way to store duration’s data for short models like <pageopentimer|> &/or <countdowntimer|>

That’s All, Folks !


No discussion

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom