Adding "facebox-for-prototype" to your rails 2.x application
Step 1: Get the sources.
I always had hassle with git and never installed it and used some wget tactis. Currently I discovered there is a download link... just take this, its easier ;)
Step 2: Move the files to the right place.
All images i moved to: public/images/facebox
The css file to: public/stylesheets/facebox.css
The js file to: public/javascripts/facebox.js
Note: It's easier to move the images to public/facebox, then you don't need to do step 3. Never tested this, but should work from the logical point of view :)
Step 3: Adapt the css and javascript
Per default the js and css wants to have the images into the folder public/facebox, because I had it in public/images/facebox I had to adapt the image sources in the css and js file. What I did was in all places where a picture was stated, I added a /images before the /facebox. Example:
Before in public/stylesheets/facebox.css:
background:url(/facebox/tr.png);
After in public/stylesheets/facebox.css:
background:url(/images/facebox/tr.png);
Step 4: Add the css and javascript to your application.
I added the following links into the <head> of my app/view/layout/application.html.erb:
<link href="/stylesheets/facebox.css" rel="stylesheet" type="text/css">
<%= javascript_include_tag :defaults %>
<script src="/javascripts/facebox.js" type="text/javascript"></script>
Be sure that you have prototype included (!) otherwise it will not work.
Step 5: Test facebox with a example link.
In the <body> of my app/view/layout/application.html.erb I added the following link:
<a href="http://www.blogger.com/images/rails.png" rel="facebox">Test facebox</a>
Step 6: Run the code.
Run ruby script/server and fire up your webbrowser with localhost:3000 and click on the link Test facebox. Et voila the facebox should appear.
Cheers -- jerik.
Labels: facebox, facebox-for-prototype, javascript, lightbox, messages, prototype, rails

