Does anyone tried already to override the init function from jquery.colorbox.js itself with any success? I would like to go deeper into theming a colorbox template by overriding the publicMethod.init function to append more wrapping divs.

Since I didn't see the markup occuring anywhere else again, I assume that this is the only place in code where the markup gets build. I only want to know if it could be overwritten with calling the init function in the js file lying in the own colorbox template folder in the theme root?

Many of this kind of popup plugins are sadly not aware of some cases where it isn't enough to have the 3x3 grid to build image frames alone and rather additionally having 4 wrapping divs lying in each other at hand to work with transparent fading corner png's in background building a resizable complex textured frame with.

Therefore this

wrap.append(
	$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")
	)

needs to be overridden adding three lines like this:

wrap.append(
      $tag(div, "wrapper2").append(
            $tag(div, "wrapper3").append(
                    $tag(div, "wrapper4").append(
			$tag(div).append( // lets leave them in for not breaking other templates
				$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")
			)

In css we would add something similar to this:

#cboxWrapper{background: transparent url("../images/frame_tl.png") left top no-repeat;padding:0;margin:0;overflow:visible;}
#cboxWrapper2{background: transparent url("../images/frame_tr.png") right top no-repeat;padding:0;margin:0;overflow:visible;}
#cboxWrapper3{background: transparent url("../images/frame_bl.png") left bottom no-repeat;padding:0;margin:0;overflow:visible;}
#cboxWrapper4{background: transparent url("../images/frame_br.png") right bottom no-repeat;padding:0;margin:0;overflow:visible;}

Does anyone has experiences with that?

Comments

frjo’s picture

Status: Active » Closed (won't fix)

Closing old issues that doesn't seem to affect a lot of users.

frjo’s picture

Issue summary: View changes

whitespace in code