├── .gitignore ├── .travis.yml ├── Gemfile ├── README.md ├── Rakefile ├── app └── assets │ ├── javascripts │ └── lazybox.coffee │ └── stylesheets │ └── lazybox.scss ├── gemfiles └── Gemfile.ci ├── lazybox.gemspec ├── lib ├── lazybox.rb └── lazybox │ └── version.rb └── specs ├── SpecRunner.html ├── lazybox_spec.js.coffee └── lib └── jasmine-1.2.0 ├── MIT.LICENSE ├── jasmine-html.js ├── jasmine-jquery.js ├── jasmine.css └── jasmine.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | .bundle 3 | Gemfile.lock 4 | pkg/* 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 1.9.3 4 | - 2.0.0 5 | gemfile: gemfiles/Gemfile.ci 6 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "http://rubygems.org" 2 | 3 | # Specify your gem's dependencies in lazybox.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | LazyBox [![Build Status](https://travis-ci.org/activebridge/lazybox.png?branch=master)](https://travis-ci.org/galulex/lazybox) [![Gem Version](https://badge.fury.io/rb/lazybox.png)](http://badge.fury.io/rb/webhostinghub-glyphs-rails) [![endorse](http://api.coderwall.com/galulex/endorsecount.png)](http://coderwall.com/galulex) 2 | = 3 | 4 | [Live Demo](http://lazybox.herokuapp.com/) 5 | 6 | [Demo Source](https://github.com/galulex/lazybox_demo) 7 | 8 | Lazybox is a jQuery-based, lightbox that can display entire remote pages, images and confirmation dialogs. 9 | Replace standard rails confirmations with lazybox just added several rows to your project. Use lazybox with rails assets pipeline. 10 | 11 | LazyBox implemented using only css and jquery without images. 12 | This is high perfomance modal dialogs. All unpacked files take only 5 kb. 13 | This is simplest solution for popup windows and custom confirmation dialogs. 14 | 15 | Upgrade to 1.1.0 16 | - 17 | 18 | After you upgrate the lazybox to 1.1.0 version you should add `render_lazybox` helper to your layout. 19 | 20 | Installing 21 | ---------- 22 | 23 | Add it to your Gemfile: 24 | 25 | ```ruby 26 | gem 'lazybox' 27 | ``` 28 | 29 | Then run `bundle install` to update your application's bundle. 30 | 31 | Add to your layout helper `render_lazybox`: 32 | 33 | ```slim 34 | ... 35 | render_lazybox 36 | body 37 | html 38 | ``` 39 | 40 | Include in your `application.css`: 41 | 42 | ```scss 43 | @include 'lazybox'; 44 | ``` 45 | 46 | There are a lot of variables you can customise: 47 | 48 | ```scss 49 | $lazy-transition: .3s; 50 | $lazy-z-index: 1000; 51 | $lazy-overlay: rgba(black, .7); 52 | $lazy-bg: white; 53 | $lazy-border: 1px solid #ccc; 54 | $lazy-shadow: 0 1px 5px #333; 55 | $lazy-padding: 20px; 56 | $lazy-start: scale(.7); 57 | $lazy-end: scale(1); 58 | $lazy-close: '×'; 59 | ``` 60 | 61 | Use `$lazy-start` and `$lazy-end` to contol the animation, `$lazy-close` to set close image. 62 | 63 | You should set the variable before you include the `lazybox` 64 | 65 | ```scss 66 | $lazy-start: rotate(180); 67 | $lazy-end: rotate(0); 68 | $lazy-close: url(url-to-image); 69 | 70 | @include 'lazybox'; 71 | ``` 72 | 73 | And in `application.js`: 74 | 75 | ```javascript 76 | //= require lazybox 77 | ``` 78 | 79 | Usage 80 | ----- 81 | 82 | ### Remote pages 83 | Usual remote link: 84 | 85 | ```haml 86 | - link_to 'Lazybox', new_model_path, remote: true 87 | ``` 88 | 89 | In your controller: 90 | 91 | ```ruby 92 | def new 93 | @model = Model.new 94 | end 95 | 96 | def create 97 | @model = Model.new(params[:model]) 98 | render action: :new unless @model.save 99 | end 100 | ``` 101 | 102 | `new.js.haml` 103 | 104 | ```haml 105 | $.lazybox("#{j(render partial: 'form')}"); 106 | ``` 107 | 108 | `create.js.haml` 109 | 110 | ```haml 111 | $.lazybox.close() 112 | window.location.reload() 113 | ``` 114 | 115 | ### Confirmations 116 | 117 | You can replace standard rails confirmations with lazybox 118 | 119 | And in `application.js`: 120 | 121 | ```javascript 122 | $.rails.allowAction = $.lazybox.confirm; 123 | ``` 124 | 125 | for options use global lazybox settings: 126 | 127 | ```javascript 128 | $.lazybox.settings = {cancelClass: "button gray", submitClass: 'button gray', overlay: false} 129 | ``` 130 | 131 | or instance settings 132 | 133 | ```javascript 134 | $.lazybox("
It works!
",{modal: true, close: false}) 135 | ``` 136 | 137 | ### Images 138 | 139 | ```haml 140 | - link_to 'Image', image.url, rel: :lazybox 141 | ``` 142 | Include in your `app/assets/javascripts/application.js`: 143 | 144 | ```javascript 145 | $(document).ready(function() { 146 | $('a[rel*=lazybox]').lazybox(); 147 | // or with options 148 | $('a[rel*=lazybox]').lazybox({esc: true, close: true, modal: true, klass: 'class'}); 149 | }); 150 | ``` 151 | 152 | 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) 153 | 154 | ```haml 155 | = link_to image.url, rel: :lazybox do 156 | = image_tag image.url, height: 100 157 | = link_to image2.url, rel: :lazybox do 158 | = image_tag image2.url, height: 100 159 | ``` 160 | 161 | We can use lazybox with `turbolinks` to show page loading spinner: 162 | 163 | ```coffeescript 164 | $(document).on 'page:fetch', -> $.lazybox("", { klass: 'spinner', close: false, esc: false }) 165 | ``` 166 | 167 | ```css 168 | #lazybox.spinner { 169 | background: transparent; 170 | border: none; 171 | box-shadow: none; 172 | } 173 | ``` 174 | 175 | Turbolinks spinner 176 | ------------------ 177 | 178 | ```coffee 179 | $(document).on 'page:fetch', -> $.lazybox("