Octobox Lightbox MVP

Octobox is a lightweight lightbox solution for octopress. I wanted a lightbox for my octopress blog so I decided to make a small one myself.

Disclosure: This is a single caltrain-ride mvp and is definitely not complete. See the notes below for the ups and downs to this current setup.

The Diff

  • 1-line change to image_tag.rb
  • New _octobox.scss
  • New octobox.js

Why Change image_tag.rb?

It’s a hack and this is likely not the best way to do it. For use beyond my little site, the cons far outweigh the pros. For my purposes, this is decent mvp.

Pros

  • The span works as both the overlay and as the pseudo-element source for open-image.
  • Without the span, you can’t use a pseudo element. (See w3 and stackoverflow for more info. )

Cons

  • Changing image_tag.rb is not updgrade compatible.
  • Changing semantic markup for functionality is dirty.
  • Changing the markup may not be backwards compatible for all octopress blogs.
  • It’s likely that other Octopress bloggers already have css-styles for image-classes. e.g. I use max-width to let the image up-to it’s original width.
max-width vs width
1
2

.class { max-width: 100%; } /* loses */
.class { width: 200px; } /* wins */
max-width vs width again
1
2

.class { width: 200px; } /* still wins */
.class { max-width: 100%; } /* still loses */

CSS and JS

I was able to stick mostly to css, but I found that I needed a small js helper. I’m happy that it was only margin-top, but I would prefer to keep interactive-code and presentational-code seperate.

Pros

  • _octobox.scss can be loaded into an octopress blogger’s /sass/custom/ and keeps your blog forward-compatible.
  • data-uri makes it easier for others to implement. No extra files to place anywhere.
  • Targeted images in posts only - images that appear on the main blog role will not be affected.
  • :before element visibility property: cleanly avoids the image-load that a user may encounter when switching display properties. (gist).

Cons

  • Margin-top property being set back to 0 could be a backwords-compatibility issue for other octobloggers.
  • My JS is a bit sloppy. It needs polish.
  • Using JS to inject inline-styles can suck.

Bad Time Ski Instructor says If you

Next Iteration

  • Prev and Next buttons.
  • Animation
  • CSS only position.
  • Avoid hacking image_tag.rb

Sources for improvement: