Interstitial Ad in jQuery

Normally, you should use canned Javascript or canned PHP modules to implement web features, but sometimes, that can suck. Typically, these products, if they’re popular, start to suffer from feature bloat. Such was the case with some code for “interstitials”, which are those ads that pop up on some web pages, interrupting your reading. Popups have been around a long time, and the drop-in code is just really huge.

Nowadays, you can assume that you’ll have at least one JS library installed on the site. I started with Dojo, and now use jQuery. There’s also Scriptaculous on top of Prototype (I’m kinda iffy about those), and Mootools.

So you can immediately cut code size by using the library, which is large, but can be cached — if you link to it from one of the CDNs like Google — and is reused for other things. Then, you can start looking at libraries.

The best interstitial library seems to be Shadowbox.js. It just looks nice.

Of course, sometimes, you just want to make your own, and you need special behaviors. In my case, I needed a form that integrates with an external site, not a thumbnail that expands, so Shadowbox wasn’t a great fit. I just coded it by hand, and learned some more jQuery and CSS. To top it off, the code is a little smaller.

The interstitial ad feature is attached. If you need more explanation, please ask in a comment, and I’ll do my best to accomodate.

May-Jun 2012: 80, pagerank 1 for interstitial jquery ad

Attachment Size 30.05 KB