demos/demos/mediaelement/assets/jquery.colorbox.js
function appendHTML() {
		if (!$box && document.body) {
			init = false;

			$window = $(window);
			$box = $tag(div).attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}).hide();
			$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
			$wrap = $tag(div, "Wrapper");
			$content = $tag(div, "Content").append(
				$loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
				$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
				$title = $tag(div, "Title"),
				$current = $tag(div, "Current"),
				$next = $tag(div, "Next"),
				$prev = $tag(div, "Previous"),
				$slideshow = $tag(div, "Slideshow").bind(event_open, slideshow),
				$close = $tag(div, "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': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}).hide();
			$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
			$wrap = $tag(div, "Wrapper");
			$content = $tag(div, "Content").append(
				$loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
				$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
				$title = $tag(div, "Title"),
				$current = $tag(div, "Current"),
				$next = $tag(div, "Next"),
				$prev = $tag(div, "Previous"),
				$slideshow = $tag(div, "Slideshow").bind(event_open, slideshow),
				$close = $tag(div, "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' : isIE ? prefix + ( isIE6 ? 'IE6' : 'IE' ) : '' } ) . hide ( ) ; $overlay = $tag ( div , "Overlay" , isIE6 ? 'position:absolute' : '' ) . hide ( ) ; $wrap = $tag ( div , "Wrapper" ) ; $content = $tag ( div , "Content" ) . append ( $loaded = $tag ( div , "LoadedContent" , 'width:0; height:0; overflow:hidden' ) , $loadingOverlay = $tag ( div , "LoadingOverlay" ) . add ( $tag ( div , "LoadingGraphic" ) ) , $title = $tag ( div , "Title" ) , $current = $tag ( div , "Current" ) , $next = $tag ( div , "Next" ) , $prev = $tag ( div , "Previous" ) , $slideshow = $tag ( div , "Slideshow" ) . bind ( event_open , slideshow ) , $close = $tag ( div , "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 .