https://www.twr360.org/taglib/cms_tagtools/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                     .keyup(observeKeyPress);
97            
98            /* Only add the clickClose event if the option is true */
99            if (opts.clickClose) {
100               $overlay.click(function(e) { closeLightbox(); e.preventDefault; });
101               $self.delegate(opts.closeSelector, "click", function(e) {
102                   closeLightbox(); e.preventDefault();
103               });
104            }
105            
106            $self.bind('close', closeLightbox);
107            $self.bind('reposition', setSelfPosition);
108
109            
110
111            /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
112              -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
113
114
115            /*----------------------------------------------------
116               Private Functions
117            ---------------------------------------------------- */
118
119            /* Remove or hide all elements */
120            function closeLightbox() {
121                var s = $self[0].style;
122                if (opts.destroyOnClose) {
123                    $self.add($overlay).remove();
124                } else {
125                    $self.add($overlay).hide();
126                }
127
128                //show the hidden parent lightbox
129                if (opts.parentLightbox) {
130                    opts.parentLightbox.fadeIn(200);
131                }
132
133                $iframe.remove();
134                
135				// clean up events.
136                $self.undelegate(opts.closeSelector, "click");
137
138                $(window).unbind('reposition', setOverlayHeight);
139                $(window).unbind('reposition', setSelfPosition);
140                $(window).unbind('scroll', setSelfPosition);
141                $(window).unbind('keypress', observeKeyPress);
142                if (ie6)
143                    s.removeExpression('top');
144                opts.onClose();
145            }
146
147
148            /* Function to bind to the window to observe the escape/enter key press */
149            function observeKeyPress(e) {

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