Version 1.2.3

README

@@ -12,9 +12,19 @@ http://groups.google.com/group/colorbox/topics
 RELEASE NOTES:
 ----------------------------------------------------------------------------------------------------------
 
+Version 1.2.3 - June 4 2009
+* Fixed a png transparency stacking issue in IE.
+* More accurate Ajax auto-sizing if the user was depending on the #cboxLoadedContent ID for CSS styling.
+* Added a public function for returning the current html element that ColorBox is associated with.
+  Example use: var that = $.fn.colorbox.element();
+* Added bicubic scaling for resized images in the original IE7.
+* Better transparent png support for IE6 in example 3.
+
+
 Version 1.2.2 - May 28 2009
 * Fixed an issue with the 'resize' option.
 
+
 Version 1.2.1 - May 28 2009
 * Note: If you are upgrading, update your jquery.colorbox.js and colorbox.css files.
 * Added photo resizing.

colorbox/jquery.colorbox.js

@@ -1,11 +1,11 @@
 /*
-	ColorBox v1.2.2 - a full featured, light-weight, customizable lightbox based on jQuery 1.3
+	ColorBox v1.2.3 - a full featured, light-weight, customizable lightbox based on jQuery 1.3
 	(c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com
 	Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 */
 (function($){
 
-	var settings, callback, maxWidth, maxHeight, loadedWidth, loadedHeight, interfaceHeight, interfaceWidth, index, $related, ssTimeout, $slideshow, $window, $close, $next, $prev, $current, $title, $modal, $wrap, $loadingOverlay, $loadingGraphic, $overlay, $modalContent, $loaded, $borderTopCenter, $borderMiddleLeft, $borderMiddleRight, $borderBottomCenter;
+	var element, settings, callback, maxWidth, maxHeight, loadedWidth, loadedHeight, interfaceHeight, interfaceWidth, index, $related, ssTimeout, $slideshow, $window, $close, $next, $prev, $current, $title, $modal, $wrap, $loadingOverlay, $loadingGraphic, $overlay, $modalContent, $loaded, $borderTopCenter, $borderMiddleLeft, $borderMiddleRight, $borderBottomCenter;
 
 	/* Helper Functions */
 	//function for IE6 to set the background overlay
@@ -87,7 +87,6 @@
 
 		if(this.length){
 			this.each(function(){
-
 				if($(this).data("colorbox")){
 					$(this).data("colorbox", $.extend({}, $(this).data("colorbox"), options));
 				} else {
@@ -106,19 +105,16 @@
 
 		$(this).unbind("click.colorbox").bind("click.colorbox", function (event) {
 
+			element = this;
+
 			settings = $(this).data('colorbox');
 
 			//remove the focus from the anchor to prevent accidentally calling
 			//colorbox multiple times (by pressing the 'Enter' key
 			//after colorbox has opened, but before the user has clicked on anything else)
 			this.blur();
 
-			if(custom_callback){
-				var that = this;
-				callback = function(){ $(that).each(custom_callback); };
-			} else {
-				callback = function(){};
-			}
+			callback = custom_callback ? custom_callback : false;
 
 			if (settings.rel && settings.rel != 'nofollow') {
 				$related = $('.cboxelement').filter(function(){
@@ -129,7 +125,7 @@
 				$related = $(this);
 				index = 0;
 			}
-			if ($modal.data("open") !== true) {
+			if (!$modal.data("open")) {
 				$.event.trigger('cbox_open');
 				$close.html(settings.close);
 				$overlay.css({"opacity": settings.opacity}).show();
@@ -155,6 +151,10 @@
 		return this;
 	};
 
+	$.fn.colorbox.element = function(){
+		return element;
+	};
+
 	/*
 	  Initialize the modal: store common calculations, preload the interface graphics, append the html.
 	  This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only
@@ -189,7 +189,7 @@
 
 		$modalContent.append(
 			//loaded is filled with temporary HTML to allow the CSS backgrounds for those elements to load before ColorBox is actually called.
-			$loaded = $('<div id="cboxLoadedContent" />'),
+			$loaded = $('<div id="cboxLoadedContent" style="width:0; height:0;" />'),
 			$loadingOverlay = $('<div id="cboxLoadingOverlay" />'),
 			$loadingGraphic = $('<div id="cboxLoadingGraphic" />'),
 			$title = $('<div id="cboxTitle" />'),
@@ -283,7 +283,7 @@
 
 	$.fn.colorbox.dimensions = function(object){
 		$window.unbind('resize.cbox_resize');
-		if($modal.data("open")!==true){ return false; }
+		if(!$modal.data("open")){ return false; }
 
 		var speed = settings.transition=="none" ? 0 : settings.speed;
 		$loaded.remove();
@@ -305,9 +305,9 @@
 		}
 
 		$loaded.hide().appendTo('body')
+		.attr({id:'cboxLoadedContent'})
 		.css({width:getWidth()})
 		.css({height:getHeight()})//sets the height independently from the width in case the new width influences the value of height.
-		.attr({id:'cboxLoadedContent'})
 		.prependTo($modalContent);
 
 		if ($.browser.msie && $.browser.version < 7) {
@@ -323,10 +323,19 @@
 			var mWidth = $loaded.width()+loadedWidth+interfaceWidth;
 			var mHeight = $loaded.height()+loadedHeight+interfaceHeight;
 			$.fn.colorbox.position(mWidth, mHeight, s, function(){
-				if($modal.data("open")!==true){
+				if(!$modal.data("open")){
 					return false;
 				}
+
+				if($.browser.msie){
+					//This fadeIn helps the bicubic resampling to kick-in.
+					if($('#cboxPhoto').length > 0 ){$loaded.fadeIn(100);}
+					//IE adds a filter when ColorBox fades in and out that can cause problems if the loaded content contains transparent pngs.
+					$modal.css('filter','');
+				}
+
 				$modalContent.children().show();
+
 				$loadingOverlay.hide();
 				$loadingGraphic.hide();
 				$slideshow.hide();
@@ -349,13 +358,21 @@
 				$('#cboxIframe').attr('src', $('#cboxIframe').attr('src'));//reloads the iframe now that it is added to the DOM & it is visible, which increases compatability with pages using DOM dependent JavaScript.
 
 				$.event.trigger('cbox_complete');
-				callback();
+
+				if(callback){
+					$(element).each(callback);
+				}
+
 				if (settings.transition === 'fade'){
-					$modal.fadeTo(speed, 1);
+					$modal.fadeTo(speed, 1, function(){
+						if($.browser.msie){$modal.css('filter','');}
+					});
 				}
+
 				$window.bind('resize.cbox_resize', function(){
 					$.fn.colorbox.position(mWidth, mHeight, 0);
 				});
+
 				return true;
 			});
 		}
@@ -380,9 +397,12 @@
 	};
 
 	$.fn.colorbox.load = function(){
+
 		$.event.trigger('cbox_load');
 
-		settings = $($related[index]).data('colorbox');
+		element = $related[index];
+
+		settings = $(element).data('colorbox');
 
 		$loadingOverlay.show();
 		$loadingGraphic.show();
@@ -410,7 +430,7 @@
 
 		if (settings.inline) {
 			$('<div id="cboxInlineTemp" />').hide().insertBefore($(href)[0]);
-			$.fn.colorbox.dimensions($(href).wrapAll("<div />").parent());
+			$.fn.colorbox.dimensions($(href).wrapAll('<div/>').parent());
 		} else if (settings.iframe) {
 			$.fn.colorbox.dimensions(
 				$("<div><iframe id='cboxIframe' name='iframe_"+new Date().getTime()+"' frameborder=0 src='"+href+"' /></div>")
@@ -446,9 +466,12 @@
 				if($related.length > 1){
 					$(this).css({cursor:'pointer'}).click($.fn.colorbox.next);
 				}
+				if($.browser.msie && $.browser.version == 7){
+					this.style.msInterpolationMode='bicubic';
+				}
 			};
 			loadingElement.src = href;
-		}else {
+		} else {
 			$('<div />').load(href, function(data, textStatus){
 				if(textStatus == "success"){
 					$.fn.colorbox.dimensions($(this));

example1/colorbox.css

@@ -6,7 +6,7 @@
 #cboxOverlay{position:fixed; width:100%; height:100%;}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative; overflow:visible;}
-#cboxLoadedContent{overflow:auto; width:0; height:0;}
+#cboxLoadedContent{overflow:auto;}
 #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
 #cboxTitle{margin:0;}
 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

example1/index.html

@@ -20,7 +20,7 @@
 				//Examples of how to assign the ColorBox event to elements.
 				$("a[rel='jack']").colorbox({transition:"fade"});
 				$("a[rel='dogs']").colorbox({transition:"elastic"});
-				$("a[rel='river']").colorbox({transition:"none", width:"75%", height:"75%"});
+				$("a[rel='river']").colorbox({transition:"none"});
 				$(".slideshow").colorbox({slideshow:true});
 				$("a.single").colorbox({}, function(){
 					alert('Howdy, this is an example callback.');
@@ -32,6 +32,7 @@
 				//Example of preserving a JavaScript event for inline calls.
 				$("#click").click(function(){ 
 					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
 				});
 				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
 			});

example2/colorbox.css

@@ -6,7 +6,7 @@
 #cboxOverlay{position:fixed; width:100%; height:100%;}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative; overflow:visible;}
-#cboxLoadedContent{overflow:auto; width:0; height:0;}
+#cboxLoadedContent{overflow:auto;}
 #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
 #cboxTitle{margin:0;}
 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

example2/index.html

@@ -33,6 +33,7 @@
 				//Example of preserving a JavaScript event for inline calls.
 				$("#click").click(function(){ 
 					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
 				});
 				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
 			});

example3/colorbox-ie.css

@@ -4,9 +4,9 @@
 	Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.  
 	Colorbox preloads navigation hover classes to account for this.
 */
-* html #cboxPrevious{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/previous.png, sizingMethod='crop');}
-* html #cboxPrevious.hover{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/previousHover.png, sizingMethod='scale');}
-* html #cboxNext{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/next.png, sizingMethod='crop');}
-* html #cboxNext.hover{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/nextHover.png, sizingMethod='scale');}
-* html #cboxClose{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/close.png, sizingMethod='crop');}
-* html #cboxClose.hover{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/closeHover.png, sizingMethod='scale');}
+#cboxPrevious{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/previous.png, sizingMethod='crop');}
+#cboxPrevious.hover{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/previousHover.png, sizingMethod='scale');}
+#cboxNext{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/next.png, sizingMethod='crop');}
+#cboxNext.hover{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/nextHover.png, sizingMethod='scale');}
+#cboxClose{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/close.png, sizingMethod='crop');}
+#cboxClose.hover{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/closeHover.png, sizingMethod='scale');}

example3/colorbox.css

@@ -6,7 +6,7 @@
 #cboxOverlay{position:fixed; width:100%; height:100%;}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative; overflow:visible;}
-#cboxLoadedContent{overflow:auto; width:0; height:0;}
+#cboxLoadedContent{overflow:auto;}
 #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
 #cboxTitle{margin:0;}
 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

example3/index.html

@@ -10,7 +10,7 @@
 			.hidden{display:none;}
 		</style>
 		<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
-		<!--[if IE]>
+		<!--[if IE 6]>
 		<link type="text/css" media="screen" rel="stylesheet" href="colorbox-ie.css" title="example" />
 		<![endif]-->
 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
@@ -32,6 +32,7 @@
 				//Example of preserving a JavaScript event for inline calls.
 				$("#click").click(function(){ 
 					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
 				});
 				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
 			});

example4/colorbox.css

@@ -6,7 +6,7 @@
 #cboxOverlay{position:fixed; width:100%; height:100%;}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative; overflow:visible;}
-#cboxLoadedContent{overflow:auto; width:0; height:0;}
+#cboxLoadedContent{overflow:auto;}
 #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
 #cboxTitle{margin:0;}
 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

example4/index.html

@@ -32,6 +32,7 @@
 				//Example of preserving a JavaScript event for inline calls.
 				$("#click").click(function(){ 
 					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
 				});
 				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
 			});

example5/colorbox.css

@@ -6,7 +6,7 @@
 #cboxOverlay{position:fixed; width:100%; height:100%;}
 #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
 #cboxContent{position:relative; overflow:visible;}
-#cboxLoadedContent{overflow:auto; width:0; height:0;}
+#cboxLoadedContent{overflow:auto;}
 #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
 #cboxTitle{margin:0;}
 #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

example5/index.html

@@ -33,6 +33,7 @@
 				//Example of preserving a JavaScript event for inline calls.
 				$("#click").click(function(){ 
 					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
 				});
 				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
 			});