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.

Installation

Install by issuing command (in one line):

 script/plugin install
 http://svn.appelsiini.net/svn/rails/plugins/filtered_column_thickbox_macro/

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.

Usage

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.

 <filter:thickbox>
 http://www.example.com/assets/2007/3/20/image_1.jpg
 http://www.example.com/assets/2007/3/20/image_2.jpg
 http://www.example.com/assets/2007/3/20/image_3.jpg
 </filter:thickbox>

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

 <filter:thickbox group="somename">
 http://www.example.com/assets/2007/3/20/image_1.jpg Lorem ipsum.
 http://www.example.com/assets/2007/3/20/image_2.jpg Dolor sit.
 http://www.example.com/assets/2007/3/20/image_3.jpg Amet.
 </filter:thickbox>

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



When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

© 2013 Mika Tuupola.