LazyBox
Lazybox is a jQuery-based, lightbox that can display entire remote pages, images and confirmation dialogs. Replace standard rails confirmations with lazybox just added several rows to your project. Use lazybox with rails assets pipeline.
LazyBox implemented using only css and jquery without images. This is high perfomance modal dialogs. All unpacked files take only 5 kb. This is simplest solution for popup windows and custom confirmation dialogs.
Installing
Add it to your Gemfile:
gem 'lazybox'
Then run bundle install
to update your application's bundle.
Include in your application.css
:
/*
* ...
*= require lazybox
* ...
*/
And in application.js
:
//= require lazybox
Usage
Remote pages
Usual remote link:
- link_to 'Lazybox', new_model_path, :remote => true
In your controller:
def new
@model = Model.new
end
def create
@model = Model.new(params[:model])
render :action => :new unless @model.save
end
new.js.haml
$.lazybox("#{escape_javascript(render :partial => 'form')}");
create.js.haml
$.lazybox.close()
window.location.reload()
Confirmations
You can replace standard rails confirmations with lazybox
And in application.js
:
$.rails.allowAction = $.lazybox.confirm;
for options use global lazybox settings:
$.lazybox.settings = {cancelClass: "button gray", submitClass: 'button gray', overlay: false}
Images
- link_to 'Image', image.url, :rel => :lazybox
Include in your app/assets/javascripts/application.js
:
$(document).ready(function() {
$('a[rel*=lazybox]').lazybox();
// or with options
$('a[rel*=lazybox]').lazybox({overlay: true, esc: true, close: true, modal: true, klass: 'class'});
});
If there are more than one link to image you can click on image in the lazybox to show the next one
= link_to image.url, :rel => :lazybox do
= image_tag image.url, :height => 100
= link_to image2.url, :rel => :lazybox do
= image_tag image2.url, :height => 100
Custom close image
Set 'closeImg' option to true.
application.js
:
$(document).ready(function() {
$('.images a').lazybox({closeImg: true});
});
Style your close:
application.css
#lazybox_close.img {
background: url('close.png') no-repeat;
width: 32px;
height: 32px;
top: -17px;
right: -17px;
}
Options
overlay: true|false //default true. Show lazybox overlay
esc: true|false //default true. Close lazybox on esc press
close: true|false //default true. Show close lazybox button
niceClose: true|false //default true. Show nice close button like in fancybox(IE always shows simple close button)
closeImg: true|false //default false. Use image for close link
modal: true|false //default true. Close lazybox on overlay click
opacity: 0.6 //default 0.3. Set opacity for lazybox overlay
klass: 'class' // Set class for lazybox. <div id='lazybox' class='class'>...</div>
//confirmation options
cancelText: //default 'Cancel'. Cancel button text
submitText: //default 'Ok'. Confirm button text
cancelClass: //default 'button'. Cancel button class
submitClass: //default 'button'. Confirm button class
Events
$.lazybox.show()
$.lazybox.close()
$.lazybox.center()
Browser Compatibility
ie7 + Chrome Firefox Opera Safari
Copyright© Alex Galushka