Does anyone know of a good lightbox plugin for rails? I found redbox but it seems to be out of development.
Thanks!
-Elliot
I just use the regular Lightbox 2. Include all the appropriate javascript and stylesheets then :rel => "lightbox" on your links.
Here is example how to easily use lightbox in rails (v4 in my case):
1. Download from site: http://lokeshdhakar.com/projects/lightbox2/
2. Copy lightbox.js to app/assets/javascripts
3. Copy lightbox.css to app/assets/stylesheets
4. Rename lightbox.css to lightbox.css.scss.erb
5. Copy four img's to app/assets/images
6. Edit lightbox.css.scss.erb:
- All image paths replace with:
<%=image_path "close.png"%>
with proper image name.
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
Image #1
Thats all.
Is there anything wrong with the jQuery version?
Jquery on Rails
http://railstips.org/2008/11/20/jquery-on-rails-why-bother
You can try lightbox2, don't know if there is any rails plugin to use it, but writing some helper functions shouldn't be that difficult.
You can use http://github.com/Lipsiasoft/lightbox
I would recommend rlightbox. It is a jquery UI plugin. It can be used for photos and videos and the documentation is pretty good
I wrote my own Rails wrapper to use Lightbox inside your existing Rails application.
Github: https://github.com/vernondegoede/lightbox-rails
Related
I have been looking around and cannot find a good example of implementing Chosen, http://harvesthq.github.com/chosen/, into a Rails app. I am trying to convert my existing multi-select into a chosen styled multi-select box.
I tried inserting the files manually, copying chosen.jquery.js into my assets/javascripts folder along with adding chosen.css. Also added //= require chosen-jquery to application.js along with the following code
jQuery(function($){
$('.chzn-select').chosen();
})
Also have *= require chosen in application.css.scss
I added :class => "chzn-select" in a collection_select in a form_tag.
Also tried using the 'chosen-rails' gem (here is an example http://choppingbloc.tumblr.com/post/24894460392/multiple-select-boxes-with-chosen-jquery) but had no luck.
Anything I might be overlooking? The collection_select is working, but it is not styled like Chosen. I am a beginner so if there is anything obvious I may have overlooked, please tell - everything above is what I have done.
Set it up like this
You have to include both the css file and the js file
in you application.css.scss, (because it is sass, do not use /* require)
#import "chosen";
in you application.js
//= require chosen.jquery
You should give your selects a different class or id than
$('.chzn-select').chosen();
because, it might make things messy when you debug the html. Chosen gives classes with this prefix like .chzn-done, .chzn-single, chzn-drop, chzn-search.
If you have a railscasts pro account.
look at this
token-fields-revised
You should really drop the chosen plugin and go for the select2 plugin. It is based on the chosen plugin, but is way better.
I can't figure it out. It's probably trivial but I am extremely new to rails.
Thanks in advance if you can help!
Answer:
I went to the generated file that adds the header to my pages and changed the included css file to my own custom one.
In Rails 3.1 it would work a litte bit different since only the application style is included by default.
Since there is a list of all further included ones like mentioned here: Rails 3.1 Load css in particular order, you just have to change the order of this list or add the file at a specific position.
There's a question about not using scaffold.css, might be what you're looking for?
Rails scaffold without the css file?
It's not the most beautiful css, but in css you can add '!important' after an statement to override all 'normal' css statements. So you would use something along the lines of:
border:0px !important;
in your css.
Have the CSS file with the correct styling you want applied to load last.
Or as others have suggested you could add !important to the css in question if you cant change the load order of the css files.
body {
color:#FFFFFF!important;
}
I noticed that some jquery effects requires that scripts are loaded in proper order.. in my case it is working if they are loaded like this:
jquery 1.4.4
jquery-ui-1.8.16.custom.min.js
autocomplete-rails.js
jquery.cycle.all.js
....
if they load in different way then some of my animation or jquery feature is not working. So how do I specify in rails wich script to load first?
Right now I did it in a primitive way by adding 1 2 3 numbers in front of names of every script I have in order that I need resulting in:
1jquery 1.4.4
2jquery-ui-1.8.16.custom.min.js
3autocomplete-rails.js
4jquery.cycle.all.js
It's primitive but it's working. Is there another way of doing it?
Rails 3
For Rails 3.0:
javascript_include_tag takes an array of sources, and includes them in the order that you define. You can omit :defaults, or define it in your application.rb file with config.action_view.javascript_expansions[:defaults] = %w(foo.js bar.js). :all includes all the javascripts in your /javascripts/ folder.
Therefore, it's best to have jQuery at the beginning, since most or all of your javascript files will use jQuery.
More documentation: http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/JavascriptTagHelpers/javascript_include_tag
In Rails, when we include an image into the page we use image_tag helper, which generates <img> tag and adds ?nnnnn at the end of its url, so that every time an image is updated the old version would not be stuck in the cache on the client side. Same thing for SASS needed, but I can't find it in the documentation.
You should be using helpers provided by sass-rails gem https://github.com/rails/sass-rails, (scroll to Asset Helpers).
These helpers can be used from inside sass files any time you need to reference an asset (image/audio/video/font)
body{
background: asset_path($relative-asset-path, $asset-class);
}
Note: image_url("...") is not working on Rails 3.1.0.rc4 due to a bug, but you can still use asset_url and asset_path.
Using stylesheet_link_tag will do this for you, just the same as image_tag does. This also applies to JavaScript files linked in with javascript_include_tag.
Is there any way I can route assets inside of my css to where the rest of the views are pulling them? I mean, inside the CSS can I call url_for or css_for or something like that in order to have the images go through the assets router?
Thank you in advance!
You can use a controller action to render your CSS (with an erb template) and set the content type to text/css.
Take a look at this blog post from Josh Susser on dynamically generated stylesheets. It is from 2006 but the technique described is still applicable.