jQuery.jSyncWithMedia

A compass metaphor

class="n | ne | e | se | s | sw | w | nw "
built-in css area system, it uses % so it can scale.

A compass metaphor

class="n | ne | e | se | s | sw | w | nw "
built-in css area system, it uses % so as to scale. (Need to test more browsers.)

In this example I'm using classes named after the points of the compass.
Audio is class="c" for "center"

$myOptions = {
	moduleAttr : {
		align : "center",
		class : "jswm subtitlesmode jswm-bg_gradient_pearl"  /* jswm + (subtitlesmode | bulletsmode) REQUIRED */
	},
	moduleCSS : {
		border : "3px solid #fcfff4", /* by default this color matches audio gradient's "no gradients" fallback bg-color */
		minWidth : "800px",
		maxWidth : "800px",
		minHeight : "600px",
		boxShadow : "#a7aaa1 3px -3px 6px"
	},
	titleAttr : {
		class : "jswm-bg_gradient_pearl red-glossFont"
	},
	titleCSS : {
		color : "#333",
		boxShadow : "#232334 2px -2px 3px",
		zIndex:"9"
	},
	subtitlesCSS : {
		position : "absolute",
		color : "#123",
		top : "282px",
		left : "282px",
		maxWidth : "27%",
		minHeight : "222px",
		maxHeight : "522px"
	},
	audioAttr : {
		autoplay : false,
		controls : "controls",
		class : "jswm-audio-element jswm-bg_gradient_red-gloss rad9 c" /* jswm-audio-element REQUIRED
		 * TODO: create settings.xxxClassNames
		 * so we can add classes w/o wroorying
		 * * * * * * * * * * * * * * * */
	},
	audioCSS : {
		width : "240px",
		border : "2px solid #daddd1"
	}
}	

//
$('#syncWithMedia').jSWM($myOptions);