source: trunk/www.guidonia.net/wp/wp-content/plugins/tubepress/ui/players/colorbox/lib/jquery.colorbox-dev.js@ 44

Last change on this file since 44 was 44, checked in by luciano, 14 years ago
File size: 10.5 KB
Line 
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
9var index, related, loadingElement, modal, modalOverlay, modalLoading, modalContent, modalLoadedContent, modalClose, borderTopLeft, borderTopCenter, borderTopRight, borderMiddleLeft, borderMiddleRight, borderBottomLeft, borderBottomCenter, borderBottomRight;
10
11jQuery(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
48function 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
52function 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
67function 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
78jQuery.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*/
215jQuery.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
Note: See TracBrowser for help on using the repository browser.