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 http://jslightbox.felixhagspiel.de/.

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”.

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

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” ( https://wordpress.org/plugins/css3lightbox/ ). 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.
BACK UP FIRST JUST IN CASE!
Here’s the link:

no-jq-lightbox-0.0.2.zip (v0.0.2)
no-jq-lightbox.zip (old version – v0.0.1)