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 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.
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>
http://www.appelsiini.net/assets/2007/3/26/season_start.jpg
http://www.appelsiini.net/assets/2007/3/26/mastercraft_x2.jpg
http://www.appelsiini.net/assets/2007/3/26/bmw_m1_side.jpg
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.
Tagged with: Jquery Mephisto Rails