https://guamplay.com/include/js/jquery.lightbox_me.js

1/*
2* $ lightbox_me
3* By: Buck Wilson
4* Version : 2.3
5*
6* Licensed under the Apache License, Version 2.0 (the "License");
7* you may not use this file except in compliance with the License.
8* You may obtain a copy of the License at
9*
10*     http://www.apache.org/licenses/LICENSE-2.0
11*
12* Unless required by applicable law or agreed to in writing, software
13* distributed under the License is distributed on an "AS IS" BASIS,
14* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15* See the License for the specific language governing permissions and
16* limitations under the License.
17*/
18
19
20(function($) {
21
22    $.fn.lightbox_me = function(options) {
23
24        return this.each(function() {
25
26            var
27                opts = $.extend({}, $.fn.lightbox_me.defaults, options),
28                $overlay = $(),
29                $self = $(this),
30                $iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'),
31                ie6 = ($.browser.msie && $.browser.version < 7);
32
33            if (opts.showOverlay) {
34                //check if there's an existing overlay, if so, make subequent ones clear
35               var $currentOverlays = $(".js_lb_overlay:visible");
36                if ($currentOverlays.length > 0){
37                    $overlay = $('<div class="lb_overlay_clear js_lb_overlay"/>');
38                } else {
39                    $overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_overlay"/>');
40                }
41            }
42
43            /*----------------------------------------------------
44               DOM Building
45            ---------------------------------------------------- */
46            if (ie6) {
47                var src = /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank';
48                $iframe.attr('src', src);
49                $('body').append($iframe);
50            } // iframe shim for ie6, to hide select elements
51            $('body').append($self.hide()).append($overlay);
52
53
54            /*----------------------------------------------------
55               Overlay CSS stuffs
56            ---------------------------------------------------- */
57
58            // set css of the overlay
59            if (opts.showOverlay) {
60                setOverlayHeight(); // pulled this into a function because it is called on window resize.
61                $overlay.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2), display: 'none' });
62				if (!$overlay.hasClass('lb_overlay_clear')){
63                	$overlay.css(opts.overlayCSS);
64                }
65            }
66
67            /*----------------------------------------------------
68               Animate it in.
69            ---------------------------------------------------- */
70               //
71            if (opts.showOverlay) {
72                $overlay.fadeIn(opts.overlaySpeed, function() {
73                    setSelfPosition();
74                    $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); setSelfPosition(); opts.onLoad()});
75                });
76            } else {
77                setSelfPosition();
78                $self[opts.appearEffect](opts.lightboxSpeed, function() { opts.onLoad()});
79            }
80
81            /*----------------------------------------------------
82               Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox)
83            ---------------------------------------------------- */
84            if (opts.parentLightbox) {
85                opts.parentLightbox.fadeOut(200);
86            }
87
88
89            /*----------------------------------------------------
90               Bind Events
91            ---------------------------------------------------- */
92
93            $(window).resize(setOverlayHeight)
94                     .resize(setSelfPosition)
95                     .scroll(setSelfPosition);
96                     
97            $(window).bind('keyup.lightbox_me', observeKeyPress);
98                     
99            if (opts.closeClick) {
100                $overlay.click(function(e) { closeLightbox(); e.preventDefault; });
101            }
102            $self.delegate(opts.closeSelector, "click", function(e) {
103                closeLightbox(); e.preventDefault();
104            });
105            $self.bind('close', closeLightbox);
106            $self.bind('reposition', setSelfPosition);
107
108
109            /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
110              -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
111
112
113            /*----------------------------------------------------
114               Private Functions
115            ---------------------------------------------------- */
116
117            /* Remove or hide all elements */
118            function closeLightbox() {
119                var s = $self[0].style;
120                if (opts.destroyOnClose) {
121                    $self.add($overlay).remove();
122                } else {
123                    $self.add($overlay).hide();
124                }
125
126                //show the hidden parent lightbox
127                if (opts.parentLightbox) {
128                    opts.parentLightbox.fadeIn(200);
129                }
130
131                $iframe.remove();
132                
133				// clean up events.
134                $self.undelegate(opts.closeSelector, "click");
135
136                $(window).unbind('reposition', setOverlayHeight);
137                $(window).unbind('reposition', setSelfPosition);
138                $(window).unbind('scroll', setSelfPosition);
139                $(window).unbind('keyup.lightbox_me');
140                if (ie6)
141                    s.removeExpression('top');
142                opts.onClose();
143            }
144
145
146            /* Function to bind to the window to observe the escape/enter key press */
147            function observeKeyPress(e) {

148                if((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) && opts.closeEsc) closeLightbox();
149            }
150
151
152            /* Set the height of the overlay
153                    : if the document height is taller than the window, then set the overlay height to the document height.
154                    : otherwise, just set overlay height: 100%
155            */
156            function setOverlayHeight() {
157                if ($(window).height() < $(document).height()) {
158                    $overlay.css({height: $(document).height() + 'px'});
159                     $iframe.css({height: $(document).height() + 'px'}); 
160                } else {
161                    $overlay.css({height: '100%'});
162                    if (ie6) {
163                        $('html,body').css('height','100%');
164                        $iframe.css('height', '100%');
165                    } // ie6 hack for height: 100%; TODO: handle this in IE7
166                }
167            }
168
169
170            /* Set the position of the modal'd window ($self)
171                    : if $self is taller than the window, then make it absolutely positioned
172                    : otherwise fixed
173            */
174            function setSelfPosition() {
175                var s = $self[0].style;
176
177                // reset CSS so width is re-calculated for margin-left CSS
178                $self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1,  zIndex: (opts.zIndex + 3) });
179
180
181                /* we have to get a little fancy when dealing with height, because lightbox_me
182                    is just so fancy.
183                 */
184
185                // if the height of $self is bigger than the window and self isn't already position absolute
186                if (($self.height() + 80  >= $(window).height()) && ($self.css('position') != 'absolute' || ie6)) {
187
188                    // we are going to make it positioned where the user can see it, but they can still scroll
189                    // so the top offset is based on the user's scroll position.
190                    var topOffset = $(document).scrollTop() + 40;
191                    $self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0})
192                    if (ie6) {
193                        s.removeExpression('top');
194                    }
195                } else if ($self.height()+ 80  < $(window).height()) {
196                    //if the height is less than the window height, then we're gonna make this thing position: fixed.
197                    // in ie6 we're gonna fake it.
198                    if (ie6) {
199                        s.position = 'absolute';
200                        if (opts.centered) {
201                            s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"')
202                            s.marginTop = 0;
203                        } else {
204                            var top = (opts.modalCSS && opts.modalCSS.top) ? parseInt(opts.modalCSS.top) : 0;
205                            s.setExpression('top', '((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"')
206                        }
207                    } else {
208                        if (opts.centered) {
209                            $self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1})
210                        } else {
211                            $self.css({ position: 'fixed'}).css(opts.modalCSS);
212                        }
213
214                    }
215                }
216            }
217
218        });
219
220
221
222    };
223
224    $.fn.lightbox_me.defaults = {
225
226        // animation
227        appearEffect: "fadeIn",
228        appearEase: "",
229        overlaySpeed: 250,
230        lightboxSpeed: 300,
231
232        // close
233        closeSelector: ".close",
234        closeClick: true,
235        closeEsc: true,
236
237        // behavior
238        destroyOnClose: false,
239        showOverlay: true,
240        parentLightbox: false,
241
242        // callbacks
243        onLoad: function() {},
244        onClose: function() {},
245
246        // style
247        classPrefix: 'lb',
248        zIndex: 999,
249        centered: false,
250        modalCSS: {top: '40px'},
251        overlayCSS: {background: 'black', opacity: .5}
252    }
253})(jQuery);