1 | /*
|
---|
2 | ColorBox v1.05 - a full featured, light-weight, customizable lightbox based on jQuery 1.3
|
---|
3 | (c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com
|
---|
4 | Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
|
---|
5 | */
|
---|
6 |
|
---|
7 | (function(jQuery){
|
---|
8 |
|
---|
9 | var index, related, loadingElement, modal, modalOverlay, modalLoading, modalContent, modalLoadedContent, modalClose, borderTopLeft, borderTopCenter, borderTopRight, borderMiddleLeft, borderMiddleRight, borderBottomLeft, borderBottomCenter, borderBottomRight;
|
---|
10 |
|
---|
11 | jQuery(function(){
|
---|
12 | //Initialize the modal, preload the interface graphics, and wait until called.
|
---|
13 | jQuery("body").append(
|
---|
14 | jQuery([
|
---|
15 | modalOverlay = jQuery('<div id="modalBackgroundOverlay" />')[0],
|
---|
16 | modal = jQuery('<div id="colorbox" />')[0]
|
---|
17 | ]).hide()
|
---|
18 | );
|
---|
19 |
|
---|
20 | jQuery(modal).append(
|
---|
21 | jQuery([
|
---|
22 | borderTopLeft = jQuery('<div id="borderTopLeft" />')[0],
|
---|
23 | borderTopCenter = jQuery('<div id="borderTopCenter" />')[0],
|
---|
24 | borderTopRight = jQuery('<div id="borderTopRight" />')[0],
|
---|
25 | borderMiddleLeft = jQuery('<div id="borderMiddleLeft" />')[0],
|
---|
26 | borderMiddleRight = jQuery('<div id="borderMiddleRight" />')[0],
|
---|
27 | borderBottomLeft = jQuery('<div id="borderBottomLeft" />')[0],
|
---|
28 | borderBottomCenter = jQuery('<div id="borderBottomCenter" />')[0],
|
---|
29 | borderBottomRight = jQuery('<div id="borderBottomRight" />')[0],
|
---|
30 | modalContent = jQuery('<div id="modalContent" />')[0]
|
---|
31 | ])
|
---|
32 | );
|
---|
33 |
|
---|
34 | jQuery(modalContent).append(
|
---|
35 | jQuery([
|
---|
36 | modalLoadedContent = jQuery('<div id="modalLoadedContent"><a id="contentPrevious" href="#"></a><a id="contentNext" href="#"></a><span id="contentCurrent"></span><br id="modalInfoBr"/><span id="contentTitle"></span><div id="preloadPrevious"></div><div id="preloadNext"></div><div id="preloadClose"></div></div>')[0],
|
---|
37 | modalLoadingOverlay = jQuery('<div id="modalLoadingOverlay" />')[0],
|
---|
38 | modalClose = jQuery('<a id="modalClose" href="#"></a>')[0]
|
---|
39 | ])
|
---|
40 | );
|
---|
41 |
|
---|
42 | jQuery(modalClose).click(function(){
|
---|
43 | closeModal();
|
---|
44 | return false;
|
---|
45 | });
|
---|
46 | });
|
---|
47 |
|
---|
48 | function setModalOverlay(){
|
---|
49 | jQuery([modalOverlay]).css({"position":"absolute", width:jQuery(window).width(), height:jQuery(window).height(), top:jQuery(window).scrollTop(), left:jQuery(window).scrollLeft()});
|
---|
50 | }
|
---|
51 |
|
---|
52 | function keypressEvents(e){
|
---|
53 | if(e.keyCode == 27){
|
---|
54 | closeModal();
|
---|
55 | return false;
|
---|
56 | }
|
---|
57 | else if(e.keyCode == 37){
|
---|
58 | jQuery("a#contentPrevious").click();
|
---|
59 | return false;
|
---|
60 | }
|
---|
61 | else if(e.keyCode == 39){
|
---|
62 | jQuery("a#contentNext").click();
|
---|
63 | return false
|
---|
64 | }
|
---|
65 | }
|
---|
66 |
|
---|
67 | function closeModal(){
|
---|
68 | jQuery(modal).removeData("open");
|
---|
69 | jQuery([modalOverlay, modal]).fadeOut("fast", function(){
|
---|
70 | jQuery(modalLoadedContent).empty();
|
---|
71 | jQuery([modalOverlay, modal]).hide();//Seems unnecessary, but sometimes IE6 does not hide the modal.
|
---|
72 | });
|
---|
73 | if(loadingElement){jQuery(loadingElement).remove()};
|
---|
74 | jQuery(document).unbind('keydown', keypressEvents);
|
---|
75 | jQuery(window).unbind('resize scroll', setModalOverlay);
|
---|
76 | }
|
---|
77 |
|
---|
78 | jQuery.fn.colorbox = function(settings) {
|
---|
79 |
|
---|
80 | settings = jQuery.extend({}, jQuery.fn.colorbox.settings, settings);
|
---|
81 |
|
---|
82 | //sets the position of the modal on screen. A transition speed of 0 will result in no animation.
|
---|
83 | function modalPosition(modalWidth, modalHeight, transitionSpeed, callback){
|
---|
84 | var windowHeight;
|
---|
85 | (typeof(window.innerHeight)=='number')?windowHeight=window.innerHeight:windowHeight=document.documentElement.clientHeight;
|
---|
86 | var colorboxHeight = modalHeight + jQuery(borderTopLeft).height() + jQuery(borderBottomLeft).height();
|
---|
87 | var colorboxWidth = modalWidth + jQuery(borderTopLeft).width() + jQuery(borderBottomLeft).width();
|
---|
88 | var posTop = windowHeight/2 - colorboxHeight/2 + jQuery(window).scrollTop();
|
---|
89 | var posLeft = jQuery(window).width()/2 - colorboxWidth/2 + jQuery(window).scrollLeft();
|
---|
90 | if(colorboxHeight > windowHeight){
|
---|
91 | posTop -=(colorboxHeight - windowHeight);
|
---|
92 | }
|
---|
93 | if(posTop < 0){posTop = 0;} //keeps the box from expanding to an inaccessible area offscreen.
|
---|
94 | if(posLeft < 0){posLeft = 0;}
|
---|
95 | jQuery(modal).animate({height:colorboxHeight, top:posTop, left:posLeft, width:colorboxWidth}, transitionSpeed);
|
---|
96 |
|
---|
97 | //each part is animated seperately to keep them from disappearing during the animation process, which is what would happen if they were positioned relative to a single element being animated.
|
---|
98 | jQuery(borderMiddleLeft).animate({top:jQuery(borderTopLeft).height(), left:0, height:modalHeight}, transitionSpeed);
|
---|
99 | jQuery(borderMiddleRight).animate({top:jQuery(borderTopRight).height(), left:colorboxWidth-jQuery(borderMiddleRight).width(), height:modalHeight}, transitionSpeed);
|
---|
100 |
|
---|
101 | jQuery(borderTopLeft).animate({top:0, left:0}, transitionSpeed);
|
---|
102 | jQuery(borderTopCenter).animate({top:0, left:jQuery(borderTopLeft).width(), width:modalWidth}, transitionSpeed);
|
---|
103 | jQuery(borderTopRight).animate({top: 0, left: colorboxWidth - jQuery(borderTopRight).width()}, transitionSpeed);
|
---|
104 |
|
---|
105 | jQuery(borderBottomLeft).animate({top:colorboxHeight-jQuery(borderBottomLeft).height(), left:0}, transitionSpeed);
|
---|
106 | jQuery(borderBottomCenter).animate({top:colorboxHeight-jQuery(borderBottomLeft).height(), left:jQuery(borderBottomLeft).width(), width:modalWidth}, transitionSpeed);
|
---|
107 | jQuery(borderBottomRight).animate({top: colorboxHeight - jQuery(borderBottomLeft).height(), left: colorboxWidth - jQuery(borderBottomRight).width()}, transitionSpeed);
|
---|
108 | jQuery(modalContent).animate({height:modalHeight, width:modalWidth, top:jQuery(borderTopLeft).height(), left:jQuery(borderTopLeft).width()}, transitionSpeed, function(){
|
---|
109 | if(callback){callback();}
|
---|
110 | if(jQuery.browser.msie && jQuery.browser.version < 7){
|
---|
111 | setModalOverlay();
|
---|
112 | }
|
---|
113 | });
|
---|
114 | }
|
---|
115 |
|
---|
116 | var preloads = [];
|
---|
117 |
|
---|
118 | function preload(){
|
---|
119 |
|
---|
120 | }
|
---|
121 |
|
---|
122 | function centerModal(contentHtml, contentInfo){
|
---|
123 | jQuery(modalLoadedContent).hide().html(contentHtml).append(contentInfo);
|
---|
124 | if(settings.contentWidth){jQuery(modalLoadedContent).css({"width":settings.contentWidth})}
|
---|
125 | if(settings.contentHeight){jQuery(modalLoadedContent).css({"height":settings.contentHeight})}
|
---|
126 | if (settings.transition == "elastic") {
|
---|
127 | modalPosition(jQuery(modalLoadedContent).outerWidth(true), jQuery(modalLoadedContent).outerHeight(true), settings.transitionSpeed, function(){
|
---|
128 | jQuery(modalLoadedContent).show();
|
---|
129 | jQuery(modalLoadingOverlay).hide();
|
---|
130 | });
|
---|
131 |
|
---|
132 | }
|
---|
133 | else {
|
---|
134 | jQuery(modal).animate({"opacity":0}, settings.transitionSpeed, function(){
|
---|
135 | modalPosition(jQuery(modalLoadedContent).outerWidth(true), jQuery(modalLoadedContent).outerHeight(true), 0, function(){
|
---|
136 | jQuery(modalLoadedContent).show();
|
---|
137 | jQuery(modalLoadingOverlay).hide();
|
---|
138 | jQuery(modal).animate({"opacity":1}, settings.transitionSpeed);
|
---|
139 | });
|
---|
140 | });
|
---|
141 | }
|
---|
142 | var preloads = preload();
|
---|
143 | }
|
---|
144 |
|
---|
145 | function contentNav(){
|
---|
146 | jQuery(modalLoadingOverlay).show();
|
---|
147 | if(jQuery(this).attr("id") == "contentPrevious"){
|
---|
148 | index > 0 ? index-- : index=related.length-1;
|
---|
149 | } else {
|
---|
150 | index < related.length-1 ? index++ : index = 0;
|
---|
151 | }
|
---|
152 | buildGallery(related[index]);
|
---|
153 | return false;
|
---|
154 | }
|
---|
155 |
|
---|
156 | function buildGallery(that){
|
---|
157 | var contentInfo = "<br id='modalInfoBr'/><span id='contentTitle'></span>";
|
---|
158 |
|
---|
159 | if (settings.contentInline) {
|
---|
160 | centerModal(jQuery(settings.contentInline).html(), contentInfo);
|
---|
161 | }
|
---|
162 | };
|
---|
163 |
|
---|
164 | jQuery(this).bind("click.colorbox", function () {
|
---|
165 | if (jQuery(modal).data("open") != true) {
|
---|
166 | jQuery(modal).data("open", true);
|
---|
167 | jQuery(modalLoadedContent).empty().css({
|
---|
168 | "height": "auto",
|
---|
169 | "width": "auto"
|
---|
170 | });
|
---|
171 | jQuery(modalClose).html(settings.modalClose);
|
---|
172 | jQuery(modalOverlay).css({
|
---|
173 | "opacity": settings.bgOpacity
|
---|
174 | });
|
---|
175 | jQuery([modalOverlay, modal, modalLoadingOverlay]).show();
|
---|
176 | jQuery(modalContent).css({
|
---|
177 | width: settings.initialWidth,
|
---|
178 | height: settings.initialHeight
|
---|
179 | });
|
---|
180 | modalPosition(jQuery(modalContent).width(), jQuery(modalContent).height(), 0);
|
---|
181 | if (this.rel) {
|
---|
182 | related = jQuery("a[rel='" + this.rel + "']");
|
---|
183 | index = jQuery(related).index(this);
|
---|
184 | }
|
---|
185 | else {
|
---|
186 | related = jQuery(this);
|
---|
187 | index = 0;
|
---|
188 | }
|
---|
189 | buildGallery(related[index]);
|
---|
190 | jQuery(document).bind('keydown', keypressEvents);
|
---|
191 | if (jQuery.browser.msie && jQuery.browser.version < 7) {
|
---|
192 | jQuery(window).bind("resize scroll", setModalOverlay);
|
---|
193 | }
|
---|
194 | }
|
---|
195 | return false;
|
---|
196 | });
|
---|
197 |
|
---|
198 | if(settings.open==true && jQuery(modal).data("open")!=true){
|
---|
199 | jQuery(this).triggerHandler('click.colorbox');
|
---|
200 | }
|
---|
201 |
|
---|
202 | return this.each(function() {
|
---|
203 | });
|
---|
204 | };
|
---|
205 |
|
---|
206 | /*
|
---|
207 | ColorBox Default Settings.
|
---|
208 |
|
---|
209 | The colorbox() function takes one argument, an object of key/value pairs, that are used to initialize the modal.
|
---|
210 |
|
---|
211 | Please do not change these settings here, instead overwrite these settings when attaching the colorbox() event to your anchors.
|
---|
212 | Example (Global) : jQuery.fn.colorbox.settings.transition = "fade"; //changes the transition to fade for all colorBox() events proceeding it's declaration.
|
---|
213 | Example (Specific) : jQuery("a[href='http://www.google.com']").colorbox({contentWidth:"700px", contentHeight:"450px", contentIframe:true});
|
---|
214 | */
|
---|
215 | jQuery.fn.colorbox.settings = {
|
---|
216 | transition : "elastic", // "elastic" or "fade". Set transitionSpeed to 0 for no transition.
|
---|
217 | transitionSpeed : 350, // Sets the speed of the fade and elastic transition, in milliseconds. Set to 0 for no transition.
|
---|
218 | initialWidth : 300, // Set the initial width of the modal, prior to any content being loaded.
|
---|
219 | initialHeight : 100, // Set the initial height of the modal, prior to any content being loaded.
|
---|
220 | contentWidth : false, // Set a fixed width for div#modalLoadedContent. Example: "500px"
|
---|
221 | contentHeight : false, // Set a fixed height for div#modalLoadedContent. Example: "500px"
|
---|
222 | contentAjax : false, // Set this to the file, or file+selector of content that will be loaded through an external file. Example "include.html" or "company.inc.php div#ceo_bio"
|
---|
223 | contentInline : false, // Set this to the selector, in jQuery selector format, of inline content to be displayed. Example "#myHiddenDiv".
|
---|
224 | contentIframe : false, // If 'true' specifies that content should be displayed in an iFrame.
|
---|
225 | bgOpacity : 0.85, // The modalBackgroundOverlay opacity level. Range: 0 to 1.
|
---|
226 | preloading : true, // Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading. Set to 'false' to disable.
|
---|
227 | contentCurrent : "{current} of {total}", // the format of the contentCurrent information
|
---|
228 | contentPrevious : "previous", // the anchor text for the previous link in a shared relation group (same values for 'rel').
|
---|
229 | contentNext : "next", // the anchor text for the next link in a shared relation group (same 'rel' attribute').
|
---|
230 | modalClose : "close", // the anchor text for the close link. Esc will also close the modal.
|
---|
231 | open : false //Automatically opens ColorBox. (fires the click.colorbox event without waiting for user input).
|
---|
232 | }
|
---|
233 |
|
---|
234 | })(jQuery);
|
---|
235 |
|
---|