Skip to content

Commit 570014a

Browse files
author
Buck Wilson
committed
first commit
0 parents  commit 570014a

File tree

3 files changed

+268
-0
lines changed

3 files changed

+268
-0
lines changed

‎LICENSE‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Licensed under the Apache License, Version 2.0 (the "License");
2+
you may not use this file except in compliance with the License.
3+
You may obtain a copy of the License at
4+
5+
http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software
8+
distributed under the License is distributed on an "AS IS" BASIS,
9+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
See the License for the specific language governing permissions and
11+
limitations under the License.

‎README.markdown‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
jquery.lightbox_me.js
2+
version 2.0
3+
4+
Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.
5+
6+
Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.
7+
8+
View more information at http://buckwilson.me/lightboxme
9+
10+
11+
12+
## Usage
13+
14+
Lightbox_me is a jQuery plugin and requires jQuery to be included in order to work.
15+
16+
Include both jQuery and the lightbox_me JavaScript file before calling the plugin in your JavaScript.
17+
18+
Invoke the lightbox by calling the plugin on a jQuery object:
19+
$(dom).lightbox_me();
20+
21+
22+
23+
## License
24+
25+
Licensed under the Apache License, Version 2.0 (the "License");
26+
you may not use this file except in compliance with the License.
27+
You may obtain a copy of the License at
28+
29+
http://www.apache.org/licenses/LICENSE-2.0
30+
31+
Unless required by applicable law or agreed to in writing, software
32+
distributed under the License is distributed on an "AS IS" BASIS,
33+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
34+
See the License for the specific language governing permissions and
35+
limitations under the License.
36+
37+
38+
39+
## Author Information
40+
41+
Lightbox_me was created by Buck Wilson and Jive Software.
42+
http://buckwilson.me
43+
http://jivesoftware.com
44+

‎jquery.lightbox_me.js‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
/*
2+
* $Revision$
3+
* $Date$
4+
*
5+
* Copyright (C) 1999-2009 Jive Software. All rights reserved.
6+
*
7+
* This software is the proprietary information of Jive Software. Use is subject to license terms.
8+
*/
9+
10+
/*
11+
* $ lightbox_me
12+
* By: Buck Wilson
13+
* Version : 2.0
14+
*
15+
* Licensed under the Apache License, Version 2.0 (the "License");
16+
* you may not use this file except in compliance with the License.
17+
* You may obtain a copy of the License at
18+
*
19+
* http://www.apache.org/licenses/LICENSE-2.0
20+
*
21+
* Unless required by applicable law or agreed to in writing, software
22+
* distributed under the License is distributed on an "AS IS" BASIS,
23+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
24+
* See the License for the specific language governing permissions and
25+
* limitations under the License.
26+
*/
27+
28+
29+
(function($) {
30+
31+
$.fn.lightbox_me = function(options) {
32+
33+
34+
35+
return this.each(function() {
36+
37+
var
38+
opts = $.extend({}, $.fn.lightbox_me.defaults, options),
39+
$overlay = $('<div class="' + opts.classPrefix + '_overlay"/>'),
40+
$self = $(this),
41+
$iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + '; display: none; border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0;"/>'),
42+
ie6 = ($.browser.msie && $.browser.version < 7);
43+
44+
45+
/*----------------------------------------------------
46+
DOM Building
47+
---------------------------------------------------- */
48+
if (ie6) {
49+
alert('ie6 alert');
50+
var src = /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank';
51+
$iframe.attr('src', src);
52+
$('body').append($iframe);
53+
} // iframe shim for ie6, to hide select elements
54+
$('body').append($self).append($overlay);
55+
56+
57+
/*----------------------------------------------------
58+
CSS stuffs
59+
---------------------------------------------------- */
60+
61+
// set css of the modal'd window
62+
63+
setSelfPosition();
64+
$self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1, zIndex: (opts.zIndex + 3) });
65+
66+
67+
// set css of the overlay
68+
69+
setOverlayHeight(); // pulled this into a function because it is called on window resize.
70+
$overlay
71+
.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2), display: 'none' })
72+
.css(opts.overlayCSS);
73+
74+
75+
/*----------------------------------------------------
76+
Animate it in.
77+
---------------------------------------------------- */
78+
79+
$overlay.fadeIn(opts.overlaySpeed, function() {
80+
$self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); opts.onLoad()});
81+
});
82+
83+
84+
85+
/*----------------------------------------------------
86+
Bind Events
87+
---------------------------------------------------- */
88+
89+
$(window).resize(setOverlayHeight)
90+
.resize(setSelfPosition)
91+
.scroll(setSelfPosition)
92+
.keypress(observeEscapePress);
93+
$self.find(opts.closeSelector).add($overlay).click(function() { closeLightbox(); return false; });
94+
$self.bind('close', closeLightbox);
95+
$self.bind('resize', setSelfPosition);
96+
97+
98+
99+
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
100+
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
101+
102+
103+
/*----------------------------------------------------
104+
Private Functions
105+
---------------------------------------------------- */
106+
107+
/* Remove or hide all elements */
108+
function closeLightbox() {
109+
if (opts.destroyOnClose) {
110+
$self.add($overlay).remove();
111+
} else {
112+
$self.add($overlay).hide();
113+
}
114+
115+
$iframe.remove();
116+
117+
$(window).unbind('resize', setOverlayHeight);
118+
$(window).unbind('resize', setSelfPosition);
119+
120+
opts.onClose();
121+
}
122+
123+
124+
/* Function to bind to the window to observe the escape key press */
125+
function observeEscapePress(e) {
126+
if(e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) closeLightbox();
127+
}
128+
129+
130+
/* Set the height of the overlay
131+
: if the document height is taller than the window, then set the overlay height to the document height.
132+
: otherwise, just set overlay height: 100%
133+
*/
134+
function setOverlayHeight() {
135+
if ($(window).height() < $(document).height()) {
136+
$overlay.css({height: $(document).height() + 'px'});
137+
} else {
138+
$overlay.css({height: '100%'});
139+
if (ie6) {$('html,body').css('height','100%'); } // ie6 hack for height: 100%; TODO: handle this in IE7
140+
}
141+
}
142+
143+
144+
/* Set the position of the modal'd window ($self)
145+
: if $self is taller than the window, then make it absolutely positioned
146+
: otherwise fixed
147+
*/
148+
function setSelfPosition() {
149+
var s = $self[0].style;
150+
151+
if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute' || ie6)) {
152+
var topOffset = $(document).scrollTop() + 40;
153+
$self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0})
154+
if (ie6) {
155+
s.removeExpression('top');
156+
}
157+
} else if ($self.height()+ 80 < $(window).height()) {
158+
if (ie6) {
159+
s.position = 'absolute';
160+
if (opts.centered) {
161+
s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"')
162+
s.marginTop = 0;
163+
} else {
164+
var top = (opts.modalCSS && opts.modalCSS.top) ? parseInt(opts.modalCSS.top) : 0;
165+
s.setExpression('top', '((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"')
166+
}
167+
} else {
168+
if (opts.centered) {
169+
$self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1})
170+
} else {
171+
$self.css({ position: 'fixed'}).css(opts.modalCSS);
172+
}
173+
174+
}
175+
}
176+
}
177+
178+
});
179+
180+
181+
182+
};
183+
184+
185+
$.fn.lightbox_me.defaults = {
186+
187+
// animation
188+
appearEffect: "fadeIn",
189+
overlaySpeed: 300,
190+
lightboxSpeed: "fast",
191+
192+
// close
193+
closeSelector: ".close",
194+
closeClick: true,
195+
closeEsc: true,
196+
197+
// behavior
198+
destroyOnClose: false,
199+
200+
// callbacks
201+
onLoad: function() {},
202+
onClose: function() {},
203+
204+
// style
205+
classPrefix: 'lb',
206+
zIndex: 999,
207+
centered: false,
208+
modalCSS: {top: '40px'},
209+
overlayCSS: {background: 'black', opacity: .6}
210+
}
211+
212+
213+
})(jQuery);

0 commit comments

Comments
 (0)