lazybox 0.2.6 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +11 -20
- data/app/assets/javascripts/lazybox.js.coffee +36 -71
- data/app/assets/javascripts/lazybox.js.js +36 -94
- data/app/assets/stylesheets/lazybox.css.scss +31 -36
- data/lib/lazybox/version.rb +1 -1
- metadata +13 -13
data/README.md
CHANGED
@@ -42,7 +42,7 @@ Usage
|
|
42
42
|
Usual remote link:
|
43
43
|
|
44
44
|
```haml
|
45
|
-
- link_to 'Lazybox', new_model_path, :
|
45
|
+
- link_to 'Lazybox', new_model_path, remote: true
|
46
46
|
```
|
47
47
|
|
48
48
|
In your controller:
|
@@ -54,14 +54,14 @@ end
|
|
54
54
|
|
55
55
|
def create
|
56
56
|
@model = Model.new(params[:model])
|
57
|
-
render :
|
57
|
+
render action: :new unless @model.save
|
58
58
|
end
|
59
59
|
```
|
60
60
|
|
61
61
|
`new.js.haml`
|
62
62
|
|
63
63
|
```haml
|
64
|
-
$.lazybox("#{j(render :
|
64
|
+
$.lazybox("#{j(render partial: 'form')}");
|
65
65
|
```
|
66
66
|
|
67
67
|
`create.js.haml`
|
@@ -70,7 +70,6 @@ $.lazybox("#{j(render :partial => 'form')}");
|
|
70
70
|
$.lazybox.close()
|
71
71
|
window.location.reload()
|
72
72
|
```
|
73
|
-

|
74
73
|
|
75
74
|
###Confirmations
|
76
75
|
|
@@ -82,14 +81,11 @@ And in `application.js`:
|
|
82
81
|
$.rails.allowAction = $.lazybox.confirm;
|
83
82
|
```
|
84
83
|
|
85
|
-

|
86
|
-
|
87
84
|
for options use global lazybox settings:
|
88
85
|
|
89
86
|
```javascript
|
90
87
|
$.lazybox.settings = {cancelClass: "button gray", submitClass: 'button gray', overlay: false}
|
91
88
|
```
|
92
|
-

|
93
89
|
|
94
90
|
or instance settings
|
95
91
|
|
@@ -100,7 +96,7 @@ $.lazybox("<div>It works!</div>",{onTop: true, opacity: 0.7, modal: false})
|
|
100
96
|
###Images
|
101
97
|
|
102
98
|
```haml
|
103
|
-
- link_to 'Image', image.url, :
|
99
|
+
- link_to 'Image', image.url, rel: :lazybox
|
104
100
|
```
|
105
101
|
Include in your `app/assets/javascripts/application.js`:
|
106
102
|
|
@@ -112,15 +108,13 @@ $(document).ready(function() {
|
|
112
108
|
});
|
113
109
|
```
|
114
110
|
|
115
|
-

|
116
|
-
|
117
111
|
If there are more than one link to image you can click on image in the lazybox to show the next one
|
118
112
|
|
119
113
|
```haml
|
120
|
-
= link_to image.url, :
|
121
|
-
= image_tag image.url, :
|
122
|
-
= link_to image2.url, :
|
123
|
-
= image_tag image2.url, :
|
114
|
+
= link_to image.url, rel: :lazybox do
|
115
|
+
= image_tag image.url, height: 100
|
116
|
+
= link_to image2.url, rel: :lazybox do
|
117
|
+
= image_tag image2.url, height: 100
|
124
118
|
```
|
125
119
|
|
126
120
|
Custom close image
|
@@ -153,15 +147,11 @@ Style your close:
|
|
153
147
|
Options
|
154
148
|
-------
|
155
149
|
|
156
|
-
overlay: true|false //default true. Show lazybox overlay
|
157
150
|
esc: true|false //default true. Close lazybox on esc press
|
158
151
|
close: true|false //default true. Show close lazybox button
|
159
152
|
modal: true|false //default true. Close lazybox on overlay click
|
160
153
|
closeImg: true|false //default false. Use image for close link
|
161
154
|
onTop: true|false //default false. Show lazybox on top instead of on center. It will use slide animation instead of fade.
|
162
|
-
fixed: true|false //default false. Set fixed position.
|
163
|
-
opacity: 0.6 //default 0.3. Set opacity for lazybox overlay
|
164
|
-
speed: 400 //default 300. Set animation speed
|
165
155
|
klass: 'class' Set class for lazybox. <div id='lazybox' class='class'>...</div>
|
166
156
|
//confirmation options
|
167
157
|
cancelText: //default 'Cancel'. Cancel button text
|
@@ -174,15 +164,16 @@ Events
|
|
174
164
|
|
175
165
|
$.lazybox.show()
|
176
166
|
$.lazybox.close()
|
177
|
-
$.lazybox.center()
|
178
167
|
|
179
168
|
Browser Compatibility
|
180
169
|
---------------------
|
181
170
|
|
182
|
-
|
171
|
+
IE10 +
|
183
172
|
Chrome
|
184
173
|
Firefox
|
185
174
|
Opera
|
186
175
|
Safari
|
187
176
|
|
177
|
+
### If you want to support IE < 9 you have to use version 0.2.*.
|
178
|
+
|
188
179
|
Copyright© Alex Galushka
|
@@ -1,23 +1,16 @@
|
|
1
|
-
(
|
2
|
-
defaults =
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
cancelText: 'Cancel',
|
12
|
-
cancelClass: 'button',
|
13
|
-
submitText: 'Ok',
|
14
|
-
submitClass: 'button'
|
15
|
-
}
|
1
|
+
(($) ->
|
2
|
+
defaults =
|
3
|
+
esc: true
|
4
|
+
close: true
|
5
|
+
modal: false
|
6
|
+
onTop: false
|
7
|
+
cancelText: 'Cancel'
|
8
|
+
cancelClass: 'btn'
|
9
|
+
submitText: 'Ok'
|
10
|
+
submitClass: 'btn'
|
16
11
|
|
17
|
-
html = "<div id='lazybox'><div id='
|
18
|
-
box =
|
19
|
-
overlay = $('#lazybox_overlay')
|
20
|
-
close = $('#lazybox_close')
|
12
|
+
html = "<div id='lazy_overlay'><div id='lazybox'><a id='lazy_close' href=''></a><div id='lazy_body'></div></div></div>"
|
13
|
+
box = overlay = close = null
|
21
14
|
|
22
15
|
$.lazybox = (html, options) -> $.lazybox.show(html, options)
|
23
16
|
|
@@ -26,27 +19,11 @@
|
|
26
19
|
|
27
20
|
show: (content, options) ->
|
28
21
|
options = init(options)
|
29
|
-
$('#
|
30
|
-
|
31
|
-
|
32
|
-
box[effect](options.speed)
|
33
|
-
return options
|
22
|
+
$('#lazy_body').html(content)
|
23
|
+
setTimeout (-> overlay.addClass('visible')), 1
|
24
|
+
close.addClass('visible') if options.close && !box.hasClass('visible')
|
34
25
|
|
35
|
-
close: (
|
36
|
-
speed = speed || defaults.speed
|
37
|
-
effect = if (box.position().top - window.scrollY <= 0) then 'slideUp' else 'fadeOut'
|
38
|
-
box[effect](speed)
|
39
|
-
overlay.fadeOut(speed+200)
|
40
|
-
|
41
|
-
center: (onTop, fixed) =>
|
42
|
-
if fixed
|
43
|
-
y = if onTop then 0 else (box.outerHeight())/2
|
44
|
-
y = 20 if y < 20 and !onTop
|
45
|
-
box.css({ 'margin-left': -box.outerWidth()/2, 'margin-top': -y, top: (if onTop then 0 else '49%'), position: 'fixed', left: '49%'})
|
46
|
-
else
|
47
|
-
y = if onTop then 0 else (($(window).height()-$('#lazybox').outerHeight())/2)+$(window).scrollTop()
|
48
|
-
y = 20 if y < 20 and !onTop
|
49
|
-
box.css({ top: y, left:(($(window).width()-box.outerWidth())/2)+$(window).scrollLeft(), position: 'absolute', margin: 0})
|
26
|
+
close: -> overlay.removeClass('visible')
|
50
27
|
|
51
28
|
confirm: (element) ->
|
52
29
|
options = $.extend defaults, $.lazybox.settings
|
@@ -55,55 +32,43 @@
|
|
55
32
|
$.lazybox.show('<p>'+message+'</p><div class="lazy_buttons"></div>', { klass: 'confirm' })
|
56
33
|
element.clone().attr('class', options.submitClass).removeAttr('data-confirm').text(options.submitText).appendTo('.lazy_buttons')
|
57
34
|
$('.lazy_buttons').append(' ')
|
58
|
-
$('<a>', { href: '', text: options.cancelText, 'class': options.cancelClass }).appendTo('.lazy_buttons')
|
35
|
+
$('<a>', { href: '', text: options.cancelText, 'class': 'cancel ' + options.cancelClass }).appendTo('.lazy_buttons')
|
59
36
|
return false
|
60
37
|
|
61
38
|
$.fn.lazybox = (options) ->
|
62
|
-
$(document).on 'click', this.selector, (e)
|
39
|
+
$(document).on 'click', this.selector, (e) ->
|
63
40
|
a = $(e.currentTarget)
|
64
41
|
href = a.attr('href')
|
65
42
|
imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i')
|
66
43
|
e.preventDefault()
|
67
44
|
if href.match(imagesRegexp)
|
68
45
|
img = new Image()
|
69
|
-
img.onload = (element) ->
|
70
|
-
|
71
|
-
nextLink = if a.is(':last-child') then a.siblings('a[rel*=lazybox]:first') else a.next('a[rel*=lazybox]:first')
|
72
|
-
prevLink = if a.is(':first-child') then a.siblings('a[rel*=lazybox]:last') else a.prev('a[rel*=lazybox]:first')
|
73
|
-
if nextLink.length and prevLink.length
|
74
|
-
$('#lazybox_body:not(:has(a#next_lazy_img))').append("<a id='prev_lazy_img' href=''><b>‹</b></a><a id='next_lazy_img' href=''><b>›</b></a>")
|
75
|
-
$('#next_lazy_img, #prev_lazy_img').bind 'click', (event) ->
|
76
|
-
event.preventDefault()
|
77
|
-
box.fadeOut options.speed, () ->
|
78
|
-
if event.currentTarget.id == 'next_lazy_img' then nextLink.click() else prevLink.click()
|
79
|
-
$(img).attr({ 'class': 'lazy_img', src: href })
|
46
|
+
img.onload = (element) -> $.lazybox.show(img, options)
|
47
|
+
$(img).attr({ 'class': 'lazy-img', src: href })
|
80
48
|
else
|
81
|
-
$.ajax
|
82
|
-
url: href
|
83
|
-
success: (data)
|
84
|
-
error:
|
49
|
+
$.ajax
|
50
|
+
url: href
|
51
|
+
success: (data) -> $.lazybox.show(data, options)
|
52
|
+
error: -> $.lazybox.close()
|
85
53
|
|
86
54
|
init = (options) ->
|
87
|
-
options = $.extend
|
88
|
-
if options.overlay
|
89
|
-
$('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>")
|
90
|
-
overlay = $('#lazybox_overlay')
|
91
|
-
overlay.css({ filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity }).fadeIn(options.speed+200)
|
55
|
+
options = $.extend {}, defaults, $.lazybox.settings, options
|
92
56
|
$('body:not(:has(#lazybox))').append(html)
|
93
57
|
box = $('#lazybox')
|
58
|
+
overlay = $('#lazy_overlay')
|
59
|
+
close = $('#lazy_close')
|
60
|
+
box.click (e) -> e.stopPropagation()
|
94
61
|
if options.klass then box.attr('class', options.klass) else box.removeClass()
|
62
|
+
if options.onTop then overlay.addClass('top') else overlay.removeClass('top')
|
95
63
|
if options.close
|
96
|
-
|
97
|
-
close = $('#lazybox_close')
|
98
|
-
if options.closeImg then close.attr('class', 'img').text('') else close.removeClass().text('×')
|
99
|
-
else close.remove()
|
100
|
-
if !options.modal and options.overlay
|
101
|
-
overlay.bind 'click', () => $.lazybox.close(options.speed)
|
64
|
+
if options.closeImg then close.addClass('img') else close.removeClass('img')
|
102
65
|
else
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
box.on 'click', '#
|
66
|
+
close.removeClass()
|
67
|
+
if options.modal then overlay.unbind() else overlay.bind 'click', -> $.lazybox.close()
|
68
|
+
$(document).keyup (e) -> $.lazybox.close() if e.keyCode == 27 and options.esc
|
69
|
+
box.on 'click', '#lazy_close, .lazy_buttons a.cancel', (e) ->
|
70
|
+
$.lazybox.close()
|
71
|
+
e.preventDefault()
|
107
72
|
return options
|
108
73
|
|
109
74
|
) jQuery
|
@@ -2,74 +2,37 @@
|
|
2
2
|
(function() {
|
3
3
|
|
4
4
|
(function($) {
|
5
|
-
var box, close, defaults, html, init, overlay
|
6
|
-
_this = this;
|
5
|
+
var box, close, defaults, html, init, overlay;
|
7
6
|
defaults = {
|
8
|
-
overlay: true,
|
9
7
|
esc: true,
|
10
8
|
close: true,
|
11
9
|
modal: true,
|
12
|
-
opacity: 0.3,
|
13
10
|
onTop: false,
|
14
|
-
speed: 300,
|
15
|
-
fixed: false,
|
16
11
|
cancelText: 'Cancel',
|
17
|
-
cancelClass: '
|
12
|
+
cancelClass: 'btn',
|
18
13
|
submitText: 'Ok',
|
19
|
-
submitClass: '
|
14
|
+
submitClass: 'btn'
|
20
15
|
};
|
21
|
-
html = "<div id='lazybox'><div id='
|
22
|
-
box =
|
23
|
-
overlay = $('#lazybox_overlay');
|
24
|
-
close = $('#lazybox_close');
|
16
|
+
html = "<div id='lazy_overlay'><div id='lazybox'><a id='lazy_close' href=''></a><div id='lazy_body'></div></div></div>";
|
17
|
+
box = overlay = close = null;
|
25
18
|
$.lazybox = function(html, options) {
|
26
19
|
return $.lazybox.show(html, options);
|
27
20
|
};
|
28
21
|
$.extend($.lazybox, {
|
29
22
|
settings: $.extend({}, defaults),
|
30
23
|
show: function(content, options) {
|
31
|
-
var effect;
|
32
24
|
options = init(options);
|
33
|
-
$('#
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
close: function(speed) {
|
40
|
-
var effect;
|
41
|
-
speed = speed || defaults.speed;
|
42
|
-
effect = box.position().top - window.scrollY === 0 ? 'slideUp' : 'fadeOut';
|
43
|
-
box[effect](speed);
|
44
|
-
return overlay.fadeOut(speed + 200);
|
45
|
-
},
|
46
|
-
center: function(onTop, fixed) {
|
47
|
-
var y;
|
48
|
-
if (fixed) {
|
49
|
-
y = onTop ? 0 : (box.outerHeight()) / 2;
|
50
|
-
if (y < 20 && !onTop) {
|
51
|
-
y = 20;
|
52
|
-
}
|
53
|
-
return box.css({
|
54
|
-
'margin-left': -box.outerWidth() / 2,
|
55
|
-
'margin-top': -y,
|
56
|
-
top: (onTop ? 0 : '49%'),
|
57
|
-
position: 'fixed',
|
58
|
-
left: '49%'
|
59
|
-
});
|
60
|
-
} else {
|
61
|
-
y = onTop ? 0 : (($(window).height() - $('#lazybox').outerHeight()) / 2) + $(window).scrollTop();
|
62
|
-
if (y < 20 && !onTop) {
|
63
|
-
y = 20;
|
64
|
-
}
|
65
|
-
return box.css({
|
66
|
-
top: y,
|
67
|
-
left: (($(window).width() - box.outerWidth()) / 2) + $(window).scrollLeft(),
|
68
|
-
position: 'absolute',
|
69
|
-
margin: 0
|
70
|
-
});
|
25
|
+
$('#lazy_body').html(content);
|
26
|
+
setTimeout((function() {
|
27
|
+
return overlay.addClass('visible');
|
28
|
+
}), 1);
|
29
|
+
if (options.close && !box.hasClass('visible')) {
|
30
|
+
return close.addClass('visible');
|
71
31
|
}
|
72
32
|
},
|
33
|
+
close: function() {
|
34
|
+
return overlay.removeClass('visible');
|
35
|
+
},
|
73
36
|
confirm: function(element) {
|
74
37
|
var message, options;
|
75
38
|
options = $.extend(defaults, $.lazybox.settings);
|
@@ -85,13 +48,12 @@
|
|
85
48
|
$('<a>', {
|
86
49
|
href: '',
|
87
50
|
text: options.cancelText,
|
88
|
-
'class': options.cancelClass
|
51
|
+
'class': 'cancel ' + options.cancelClass
|
89
52
|
}).appendTo('.lazy_buttons');
|
90
53
|
return false;
|
91
54
|
}
|
92
55
|
});
|
93
56
|
$.fn.lazybox = function(options) {
|
94
|
-
var _this = this;
|
95
57
|
return $(document).on('click', this.selector, function(e) {
|
96
58
|
var a, href, imagesRegexp, img;
|
97
59
|
a = $(e.currentTarget);
|
@@ -101,26 +63,10 @@
|
|
101
63
|
if (href.match(imagesRegexp)) {
|
102
64
|
img = new Image();
|
103
65
|
img.onload = function(element) {
|
104
|
-
|
105
|
-
options = $.lazybox.show(img, options);
|
106
|
-
nextLink = a.is(':last-child') ? a.siblings('a[rel*=lazybox]:first') : a.next('a[rel*=lazybox]:first');
|
107
|
-
prevLink = a.is(':first-child') ? a.siblings('a[rel*=lazybox]:last') : a.prev('a[rel*=lazybox]:first');
|
108
|
-
if (nextLink.length && prevLink.length) {
|
109
|
-
$('#lazybox_body:not(:has(a#next_lazy_img))').append("<a id='prev_lazy_img' href=''><b>‹</b></a><a id='next_lazy_img' href=''><b>›</b></a>");
|
110
|
-
return $('#next_lazy_img, #prev_lazy_img').bind('click', function(event) {
|
111
|
-
event.preventDefault();
|
112
|
-
return box.fadeOut(options.speed, function() {
|
113
|
-
if (event.currentTarget.id === 'next_lazy_img') {
|
114
|
-
return nextLink.click();
|
115
|
-
} else {
|
116
|
-
return prevLink.click();
|
117
|
-
}
|
118
|
-
});
|
119
|
-
});
|
120
|
-
}
|
66
|
+
return $.lazybox.show(img, options);
|
121
67
|
};
|
122
68
|
return $(img).attr({
|
123
|
-
'class': '
|
69
|
+
'class': 'lazy-img',
|
124
70
|
src: href
|
125
71
|
});
|
126
72
|
} else {
|
@@ -130,55 +76,51 @@
|
|
130
76
|
return $.lazybox.show(data, options);
|
131
77
|
},
|
132
78
|
error: function() {
|
133
|
-
return $.lazybox.close(
|
79
|
+
return $.lazybox.close();
|
134
80
|
}
|
135
81
|
});
|
136
82
|
}
|
137
83
|
});
|
138
84
|
};
|
139
85
|
return init = function(options) {
|
140
|
-
|
141
|
-
options = $.extend($.extend({}, defaults), $.lazybox.settings, options);
|
142
|
-
if (options.overlay) {
|
143
|
-
$('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>");
|
144
|
-
overlay = $('#lazybox_overlay');
|
145
|
-
overlay.css({
|
146
|
-
filter: 'alpha(opacity=' + options.opacity * 100 + ')',
|
147
|
-
opacity: options.opacity
|
148
|
-
}).fadeIn(options.speed + 200);
|
149
|
-
}
|
86
|
+
options = $.extend({}, defaults, $.lazybox.settings, options);
|
150
87
|
$('body:not(:has(#lazybox))').append(html);
|
151
88
|
box = $('#lazybox');
|
89
|
+
overlay = $('#lazy_overlay');
|
90
|
+
close = $('#lazy_close');
|
152
91
|
if (options.klass) {
|
153
92
|
box.attr('class', options.klass);
|
154
93
|
} else {
|
155
94
|
box.removeClass();
|
156
95
|
}
|
96
|
+
if (options.onTop) {
|
97
|
+
overlay.addClass('top');
|
98
|
+
} else {
|
99
|
+
overlay.removeClass('top');
|
100
|
+
}
|
157
101
|
if (options.close) {
|
158
|
-
box.not(':has(#lazybox_close)').prepend($("<a id='lazybox_close' title='close'></a>"));
|
159
|
-
close = $('#lazybox_close');
|
160
102
|
if (options.closeImg) {
|
161
|
-
close.
|
103
|
+
close.addClass('img');
|
162
104
|
} else {
|
163
|
-
close.removeClass(
|
105
|
+
close.removeClass('img');
|
164
106
|
}
|
165
107
|
} else {
|
166
|
-
close.
|
108
|
+
close.removeClass();
|
167
109
|
}
|
168
|
-
if (
|
110
|
+
if (options.modal) {
|
111
|
+
overlay.unbind();
|
112
|
+
} else {
|
169
113
|
overlay.bind('click', function() {
|
170
|
-
return $.lazybox.close(
|
114
|
+
return $.lazybox.close();
|
171
115
|
});
|
172
|
-
} else {
|
173
|
-
overlay.unbind();
|
174
116
|
}
|
175
117
|
$(document).keyup(function(e) {
|
176
118
|
if (e.keyCode === 27 && options.esc) {
|
177
|
-
return $.lazybox.close(
|
119
|
+
return $.lazybox.close();
|
178
120
|
}
|
179
121
|
});
|
180
|
-
box.on('click', '#
|
181
|
-
$.lazybox.close(
|
122
|
+
box.on('click', '#lazy_close, .lazy_buttons a.cancel', function(e) {
|
123
|
+
$.lazybox.close();
|
182
124
|
return e.preventDefault();
|
183
125
|
});
|
184
126
|
return options;
|
@@ -1,12 +1,32 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
$lazyOpacity: 0.7;
|
2
|
+
$lazyTransition: 0.3s;
|
3
|
+
$lazy-z-index: 1000;
|
4
|
+
|
5
|
+
#lazy_overlay {
|
6
|
+
visibility: hidden;
|
7
|
+
z-index: $lazy-z-index;
|
8
|
+
background: rgba(0, 0, 0, $lazyOpacity);
|
3
9
|
bottom: 0px;
|
4
|
-
display: none;
|
5
10
|
left: 0px;
|
6
11
|
position: fixed;
|
7
12
|
right: 0px;
|
8
13
|
top: 0px;
|
9
|
-
|
14
|
+
opacity: 0;
|
15
|
+
-webkit-transition: $lazyTransition;
|
16
|
+
transition: $lazyTransition;
|
17
|
+
&.visible { visibility: visible; opacity: 1; }
|
18
|
+
display: -webkit-box;
|
19
|
+
display: -moz-box;
|
20
|
+
display: -ms-flexbox;
|
21
|
+
display: -webkit-flex;
|
22
|
+
display: flex;
|
23
|
+
align-items: center;
|
24
|
+
justify-content: center;
|
25
|
+
&.top { align-items: flex-start; }
|
26
|
+
&.top #lazybox {
|
27
|
+
border-top-right-radius: 0;
|
28
|
+
border-top-left-radius: 0;
|
29
|
+
}
|
10
30
|
}
|
11
31
|
|
12
32
|
#lazybox {
|
@@ -14,22 +34,19 @@
|
|
14
34
|
border-radius: 5px;
|
15
35
|
border: 1px solid #ccc;
|
16
36
|
box-shadow: 0 1px 5px #333;
|
17
|
-
display: none;
|
18
|
-
left: 49%;
|
19
37
|
padding: 20px;
|
20
|
-
position:
|
21
|
-
top: 49%;
|
22
|
-
z-index: 1001;
|
38
|
+
position: relative;
|
23
39
|
&.confirm { max-width: 300px; }
|
24
40
|
.lazy_buttons { margin-top: 15px; text-align: right; }
|
25
|
-
img
|
41
|
+
.lazy-img { display: block; }
|
26
42
|
#lazybox_body { position: relative; }
|
27
43
|
}
|
28
44
|
|
29
|
-
a#
|
45
|
+
a#lazy_close {
|
30
46
|
background: transparent;
|
31
47
|
color: gray;
|
32
48
|
cursor: pointer;
|
49
|
+
display: none;
|
33
50
|
font: bold 26px/100% Arial, Helvetica, sans-serif;
|
34
51
|
height: 25px;
|
35
52
|
position: absolute;
|
@@ -37,30 +54,8 @@ a#lazybox_close {
|
|
37
54
|
text-align: center;
|
38
55
|
top: 0;
|
39
56
|
width: 25px;
|
57
|
+
&:after { content: '×'; }
|
58
|
+
&.img:after { content: ''; }
|
40
59
|
&:hover { color: black; }
|
60
|
+
&.visible { display: block; }
|
41
61
|
}
|
42
|
-
|
43
|
-
a#prev_lazy_img, a#next_lazy_img {
|
44
|
-
background: rgba(0, 0, 0, 0);
|
45
|
-
height: 100%;
|
46
|
-
outline: none;
|
47
|
-
position: absolute;
|
48
|
-
top: 0;
|
49
|
-
text-decoration: none;
|
50
|
-
width: 33px;
|
51
|
-
&:hover {
|
52
|
-
background: rgba(0, 0, 0, 0.3);
|
53
|
-
b { opacity: 0.8; }
|
54
|
-
}
|
55
|
-
b {
|
56
|
-
color: whiteSmoke;
|
57
|
-
font: bold 96px/100% Arial, Helvetica, sans-serif;
|
58
|
-
height: 100px;
|
59
|
-
opacity: 0.3;
|
60
|
-
position: absolute;
|
61
|
-
top: 50%;
|
62
|
-
margin-top: -50px;
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
a#next_lazy_img { right: 0; }
|
data/lib/lazybox/version.rb
CHANGED
metadata
CHANGED
@@ -1,32 +1,32 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: lazybox
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.2.6
|
5
4
|
prerelease:
|
5
|
+
version: 1.0.0
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
8
8
|
- Alex Galushka
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2014-03-02 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
|
-
|
16
|
-
requirement: !ruby/object:Gem::Requirement
|
17
|
-
none: false
|
15
|
+
version_requirements: !ruby/object:Gem::Requirement
|
18
16
|
requirements:
|
19
17
|
- - ! '>='
|
20
18
|
- !ruby/object:Gem::Version
|
21
19
|
version: '0'
|
22
|
-
type: :development
|
23
|
-
prerelease: false
|
24
|
-
version_requirements: !ruby/object:Gem::Requirement
|
25
20
|
none: false
|
21
|
+
prerelease: false
|
22
|
+
type: :development
|
23
|
+
name: jquery-rails
|
24
|
+
requirement: !ruby/object:Gem::Requirement
|
26
25
|
requirements:
|
27
26
|
- - ! '>='
|
28
27
|
- !ruby/object:Gem::Version
|
29
28
|
version: '0'
|
29
|
+
none: false
|
30
30
|
description: Lazybox is a jQuery-based, lightbox that can display entire remote pages,
|
31
31
|
images and confirmation dialogs. Replace standard rails confirmations with lazybox
|
32
32
|
just added several rows to your project. Use lazybox with rails assets pipeline.
|
@@ -39,9 +39,9 @@ files:
|
|
39
39
|
- README.md
|
40
40
|
- lib/lazybox/version.rb
|
41
41
|
- lib/lazybox.rb
|
42
|
-
- app/assets/stylesheets/lazybox.css.scss
|
43
|
-
- app/assets/javascripts/lazybox.js.js
|
44
42
|
- app/assets/javascripts/lazybox.js.coffee
|
43
|
+
- app/assets/javascripts/lazybox.js.js
|
44
|
+
- app/assets/stylesheets/lazybox.css.scss
|
45
45
|
homepage: https://github.com/galulex/lazybox
|
46
46
|
licenses: []
|
47
47
|
post_install_message:
|
@@ -49,20 +49,20 @@ rdoc_options: []
|
|
49
49
|
require_paths:
|
50
50
|
- lib
|
51
51
|
required_ruby_version: !ruby/object:Gem::Requirement
|
52
|
-
none: false
|
53
52
|
requirements:
|
54
53
|
- - ! '>='
|
55
54
|
- !ruby/object:Gem::Version
|
56
55
|
version: '0'
|
57
|
-
required_rubygems_version: !ruby/object:Gem::Requirement
|
58
56
|
none: false
|
57
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
59
58
|
requirements:
|
60
59
|
- - ! '>='
|
61
60
|
- !ruby/object:Gem::Version
|
62
61
|
version: '0'
|
62
|
+
none: false
|
63
63
|
requirements: []
|
64
64
|
rubyforge_project:
|
65
|
-
rubygems_version: 1.8.
|
65
|
+
rubygems_version: 1.8.28
|
66
66
|
signing_key:
|
67
67
|
specification_version: 3
|
68
68
|
summary: Use LazyBox for popup windows with Rails
|