LazyBox Build Status Gem Version endorse

Live Demo

Demo Source

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.

Upgrade to 1.1.0

After you upgrate the lazybox to 1.1.0 version you should add render_lazybox helper to your layout.


Add it to your Gemfile:

gem 'lazybox'

Then run bundle install to update your application's bundle.

Add to your layout helper render_lazybox:


Include in your application.css:

 @include 'lazybox';

There are a lot of variables you can customise:

$lazy-transition: .3s;
$lazy-z-index:    1000;
$lazy-overlay:    rgba(black, .7);
$lazy-bg:         white;
$lazy-border:     1px solid #ccc;
$lazy-shadow:     0 1px 5px #333;
$lazy-padding:    20px;
$lazy-start:      scale(.7);
$lazy-end:        scale(1);
$lazy-close:      'Ă—';

Use $lazy-start and $lazy-end to contol the animation, $lazy-close to set close image.

You should set the variable before you include the lazybox

  $lazy-start:      rotate(180);
  $lazy-end:        rotate(0);
  $lazy-close:      url(url-to-image);

  @include 'lazybox';

And in application.js:

//= require lazybox


Remote pages

Usual remote link:

- link_to 'Lazybox', new_model_path, remote: true

In your controller:

def new
  @model =

def create
  @model =[:model])
  render action: :new unless


$.lazybox("#{j(render partial: 'form')}");




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}

or instance settings

$.lazybox("<div>It works!</div>",{modal: true, close: false})


- link_to 'Image', image.url, rel: :lazybox

Include in your app/assets/javascripts/application.js:

$(document).ready(function() {
  // or with options
  $('a[rel*=lazybox]').lazybox({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 (version < 0.2.6)

= 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

We can use lazybox with turbolinks to show page loading spinner:

  $(document).on 'page:fetch', -> $.lazybox("<i class='icon-orange'></i>", { klass: 'spinner', close: false, esc: false })
#lazybox.spinner {
  background: transparent;
  border: none;
  box-shadow: none;

Turbolinks spinner

  $(document).on 'page:fetch', -> $.lazybox("<i class='fa fa-spinner fa-spin'>", { klass: 'spinner', close: false, esc: false })
  $(document).on 'page:change', -> $.lazybox.close()
  #lazybox.spinner {
    background: transparent;
    box-shadow: none;
    .fa-spinner { font-size: 128px; }

Display on page load

You can show lazybox with some content on page load. To do this you should content_for helper:


content_for :lazybox do
  This text appears on page load


esc:        true|false //default true.  Close lazybox on esc press
close:      true|false //default true.  Show close lazybox button
modal:      true|false //default true.  Close lazybox on overlay click
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



Browser Compatibility

IE9 + Chrome Firefox Opera Safari

If you want to support IE < 9 you have to use version 0.2.*.

Copyright© Alex Galushka