No JQuery Lightbox for WordPress (plugin)

Trying to get a lightbox/fancybox/colorbox/anybox that reliably worked in WordPress when I’d try to shove both it and JQuery into the footer has always been a trick. It’s been awhile since I looked for an alternative lightbox that *doesn’t* need JQuery, so I looked again today. No luck. So I threw one together.

Before moving forward, I should clarify: By *I* threw one together, I mean someone else threw one together. I just packaged it in a plugin. Credit for the lightbox itself goes to Felix Hagspiel, and you can find the original “jsOnlyLightbox” on Felix’s site at

The plugin is at the end, if you don’t care to read further. Oh, and if you were worried that I might running short on un-creative names for my plugins, have no fear: it’s called “No JQuery Lightbox”.

No JQuery Lightbox

A few random images from this site so you can see it in action (assuming I still have it running when you see this):

1998 Civic O2 sensor - oxygen-acetylene torch Example of medium temporal denoising. fresh-drum2.jpg

Good Things:

  • The CSS is ~1KB gzipped (under 4KB uncompressed).
  • The JS is ~2KB gzipped (under 7K uncompressed).
  • The JS goes in the footer by default. I wouldn’t be surprised if it *has* to be in the footer, but that’s where you want javascript for performance anyway.
  • Doesn’t require JQuery!
  • No setup! Just activate the plugin and go!
  • Responsive*

Bad Things:

  • The * in the last part… It’s worked fine on all the devices I’ve tested it on so far, except on the iPhone when rotated in portrait mode – it’s too large. Still works, but only looks correct in landscape on the iPhone. Fine regardless of orientation on the iPad. fixed in v0.0.2
  • It uses 3 images. 2 images for the left/right arrows and 1 animated gif for the “loading” animation. The loading animation gif is ~9KB which was as small as I could get it – it can be lazy-loaded by the browser, but it’s loaded when the page is loaded regardless. The 2 small images for the left/right arrows are ~2KB each. So IMAGES + JS + CSS come to around 15-16KB.
  • Felix added a lot of awesome options for the lightbox, like whether to preload the previous/next images, the ability to disable the carousel, and many more. I basically gutted them all while minifying everything down. If you don’t like the way it’s set up, your only option is to grab the JS and CSS from his site and implement them manually (you’d have to rip out the part of the plugin that injects the JS/CSS, but retain the function in the plugin that changes the page output to work).

 Other Notes:

  • It’ll use the “alt” tag for the caption.
  • If you use the actual WordPress “caption”, I have no idea what will happen (I don’t use them).
  • To give credit where it’s do, the whole regex rigamarole is based upon the regex code of “Lightbox CSS3” ( ). That said, it’s a little delicate. I got it working (most of the time), but it’s worth checking over a few pages of your site to make sure no images (or text!) went missing. Putting the following on a single line might break for example: <a href some text link> <a href some image link><img></a>.
  • When you activate the plugin, it’ll write new JS/CSS files that include absolute URLs to the prev/next/loading images based upon where your plugins folder is (example: /wp-content/plugins/…../image.png). Hopefully you have write access. If you move or rename the plugin’s folder, you’ll have to disable/activate it again for it to grab the new stuff.
  • It doesn’t add anything to your database.

Hopefully that’s enough to get you started.
Here’s the link: (v0.0.2) (old version – v0.0.1)

1 Comment | Leave a Comment

  1. Hey Matt, glad you like my lightbox :) I just released version 0.5 on which has CSS arrows, pure CSS3 loading animations (you can still use own images/GIFs if you want to) and some other improvements, like better responsiveness on iPhones and bugfixes.

Leave a Comment

You can use an alias and fake email. However, if you choose to use a real email, "gravatars" are supported. You can check the privacy policy for more details.