ThickBox Macro For Mephisto - jQuery and Rails

Blog Projects
jquery mephisto ruby
HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Some people consider it to be heretic to use jQuery with Ruby on Rails. Since I am big fan of jQuery I decided to do it anyway.

With filtered_column_thickbox_macro you can display single or multiple images with Lightbox effect. Macro uses Cody Linley’s ThickBox plugin. Code is based on Based on Christian Lim’s Lightbox Image Gallery Filter.


Install by issuing command (in one line):

 script/plugin install

Script will copy needed Javascript, CSS and image files into your public folder. It does not overwrite any existing files. So if you rely in specific version of jQuery library it will be safe.


After installing you need to add following to your layout.liquid.

 {{ 'thickbox' | stylesheet }}
 {{ 'jquery' | javascript }}
 {{ 'thickbox' | javascript }}

Then in your posts drag assets between <filter:thickbox> and </filter:thickbox> tags.


Optionally you can also add captions and/or group images:

 <filter:thickbox group="somename"> Lorem ipsum. Dolor sit. Amet.

When you group images together ThickBox will display next – prev links.

When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use