Note that this solution uses Top Up, which uses jQuery and jQuery UI. However it says you can still use it alongside prototype.
Steps
1 – Set up paperclip in the model
You want your model with the paperclip image in it to have at least a :thumb and :large size setting.
:thumb => "240x185#", # the hash means to crop
:large => "800x600"},
:storage => :s3,
:s3_credentials => "#{RAILS_ROOT}/config/s3.yml",
:path => ":attachment/:id/:style.:extension",
:bucket => 'bucketname'
I obviously use Amazon S3 to store the images, which works fine.
2 – Alter images
Find where your images are in your app and make them links with the class “top_up”. The href should go to the big version of the image and between the “a” tags should be the thumbnail. In rails code it looks like this:
Remember to add the :class => “top_up”.
3 – Include the necessary js
Two options. Instant gratification can be obtained by simply adding:
This magically adds jquery and jquery UI if it hasn’t been added already. It also handles the styles for the lightbox. It pretty much does everything. If you do this then your lightbox technically is complete. Go and try it out!
The other option is to host the js file on your site. You just have to chuck in the js and some images for the stylesheet. You don’t need me to explain that to you – easy to read documentation at the popup site.
Note: if you want an all-in-one resource to become an expert in ruby on rails 3, don’t bother with textbooks – just get this video tutorial series (highly recommended): Ruby on Rails Tutorial
Tagged: lightbox, paperclip, rails, rails 3, rails lightbox
