raw/ace/assets/js/uncompressed/jquery.colorbox.js
function appendHTML() {
		if (!$box && document.body) {
			init = false;
			$window = $(window);
			$box = $tag(div).attr({
				id: colorbox,
				'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS.
				role: 'dialog',
				tabindex: '-1'
			}).hide();
			$overlay = $tag(div, "Overlay").hide();
			$loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]);
			$wrap = $tag(div, "Wrapper");
			$content = $tag(div, "Content").append(
				$title = $tag(div, "Title"),
				$current = $tag(div, "Current"),
				$prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
				$next = $('<button type="button"/>').attr({id:prefix+'Next'}),
				$slideshow = $tag('button', "Slideshow"),
				$loadingOverlay
			);

			$close = $('<button type="button"/>').attr({id:prefix+'Close'});
			
			$wrap.append( // The 3x3 Grid that makes up Colorbox
				$tag(div).append(
					$tag(div, "TopLeft"),
					$topBorder = $tag(div, "TopCenter"),
					$tag(div, "TopRight")
				),
				$tag(div, false, 'clear:left').append(
					$leftBorder = $tag(div, "MiddleLeft"),
					$content,
					$rightBorder = $tag(div, "MiddleRight")
				),
				$tag(div, false, 'clear:left').append(
					$tag(div, "BottomLeft"),
					$bottomBorder = $tag(div, "BottomCenter"),
					$tag(div, "BottomRight")
				)
			).find('div div').css({'float': 'left'});
			
			$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
			
			$groupControls = $next.add($prev).add($current).add($slideshow);

			$(document.body).append($overlay, $box.append($wrap, $loadingBay));
		}
	}
function appendHTML() {
		if (!$box && document.body) {
			init = false;
			$window = $(window);
			$box = $tag(div).attr({
				id: colorbox,
				'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS.
				role: 'dialog',
				tabindex: '-1'
			}).hide();
			$overlay = $tag(div, "Overlay").hide();
			$loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]);
			$wrap = $tag(div, "Wrapper");
			$content = $tag(div, "Content").append(
				$title = $tag(div, "Title"),
				$current = $tag(div, "Current"),
				$prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
				$next = $('<button type="button"/>').attr({id:prefix+'Next'}),
				$slideshow = $tag('button', "Slideshow"),
				$loadingOverlay
			);

			$close = $('<button type="button"/>').attr({id:prefix+'Close'});
			
			$wrap.append( // The 3x3 Grid that makes up Colorbox
				$tag(div).append(
					$tag(div, "TopLeft"),
					$topBorder = $tag(div, "TopCenter"),
					$tag(div, "TopRight")
				),
				$tag(div, false, 'clear:left').append(
					$leftBorder = $tag(div, "MiddleLeft"),
					$content,
					$rightBorder = $tag(div, "MiddleRight")
				),
				$tag(div, false, 'clear:left').append(
					$tag(div, "BottomLeft"),
					$bottomBorder = $tag(div, "BottomCenter"),
					$tag(div, "BottomRight")
				)
			).find('div div').css({'float': 'left'});
			
			$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
			
			$groupControls = $next.add($prev).add($current).add($slideshow);

			$(document.body).append($overlay, $box.append($wrap, $loadingBay));
		}
	}
function appendHTML ( ) { if ( ! $box && document . body ) { init = false ; $window = $ ( window ) ; $box = $tag ( div ) . attr ( { id : colorbox , 'class' : $ . support . opacity === false ? prefix + 'IE' : '' , // class for optional IE8 & lower targeted CSS. role : 'dialog' , tabindex : '-1' } ) . hide ( ) ; $overlay = $tag ( div , "Overlay" ) . hide ( ) ; $loadingOverlay = $ ( [ $tag ( div , "LoadingOverlay" ) [ 0 ] , $tag ( div , "LoadingGraphic" ) [ 0 ] ] ) ; $wrap = $tag ( div , "Wrapper" ) ; $content = $tag ( div , "Content" ) . append ( $title = $tag ( div , "Title" ) , $current = $tag ( div , "Current" ) , $prev = $ ( '<button type="button"/>' ) . attr ( { id : prefix + 'Previous' } ) , $next = $ ( '<button type="button"/>' ) . attr ( { id : prefix + 'Next' } ) , $slideshow = $tag ( 'button' , "Slideshow" ) , $loadingOverlay ) ; $close = $ ( '<button type="button"/>' ) . attr ( { id : prefix + 'Close' } ) ; $wrap . append ( // The 3x3 Grid that makes up Colorbox $tag ( div ) . append ( $tag ( div , "TopLeft" ) , $topBorder = $tag ( div , "TopCenter" ) , $tag ( div , "TopRight" ) ) , $tag ( div , false , 'clear:left' ) . append ( $leftBorder = $tag ( div , "MiddleLeft" ) , $content , $rightBorder = $tag ( div , "MiddleRight" ) ) , $tag ( div , false , 'clear:left' ) . append ( $tag ( div , "BottomLeft" ) , $bottomBorder = $tag ( div , "BottomCenter" ) , $tag ( div , "BottomRight" ) ) ) . find ( 'div div' ) . css ( { 'float' : 'left' } ) ; $loadingBay = $tag ( div , false , 'position:absolute; width:9999px; visibility:hidden; display:none' ) ; $groupControls = $next . add ( $prev ) . add ( $current ) . add ( $slideshow ) ; $ ( document . body ) . append ( $overlay , $box . append ( $wrap , $loadingBay ) ) ; } }
Colorbox's markup needs to be added to the DOM prior to being called so that the browser will go ahead and load the CSS background images.
Colorbox s markup needs to be added to the DOM prior to being called so that the browser will go ahead and load the CSS background images .