Adding "facebox-for-prototype" to your rails 2.x application
Just wanted to have the nice looking facebox which I discoverd on http://github.com/railsgarden/message_block in my rails application. With the first search I found facebox, but discovered that it works with jquery. As I use prototype I wanted to go for that and after a second short search I found facebox-for-prototype. Unfortunatly without tutorial, that's why I am writing this.
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.
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
posted by j.erik at
23:00
4 Comments:
step 2 works. just tried it.
By
j.erik, at 23:57
Awesome!! Just this working on FeedmailPro.com today. Thanks for the writeup.
By
StartBreakingFree.com, at 11:15
nice!
however I don't manage to have it work from a partial.
I am new with Rails and Facebox ...
any idea?
cheers,
and thanks again for these steps,
joel
By
joel, at 14:11
This comment has been removed by the author.
By
joel, at 15:33
Post a Comment
<< Home