I'm testing a great piece of code and have it doing ALMOST everything I want but I'd like to change it very slightly. Try as I might I just can't unravel the mysteries and get it to work. Currently it lets a user click on an image and does a lightbox type display of some video content. When the video completes it automatically closes the lightbox and returns to the original display by hiding the content.
I would like it to display the lightbox and it's content when the page loads instead of the user having to click an image to display the lightbox and it's content.
This is a link to my
TEST PAGE It displays a video player and plays approx 20 seconds each from several music videos and then closes itself up when the test file (an xml playlist) is exhausted. I hope someone here can look at this jquery source and my html source and tell me how I might achieve what I want.
This is the jquery source.
Code:
jQuery.fn.center = function () {
this.css("position","fixed");
this.css("top", ( $(window).height() - this.outerHeight() ) / 2 + "px");
this.css("left", ( $(window).width() - this.outerWidth() ) / 2 + "px");
return this;
}
jQuery.jwbox = {
lightbox : null,
player : null,
toggle : function(context) {
if (!$.jwbox.lightbox) {
$.jwbox.lightbox = $(".jwbox_hidden", context);
$.jwbox.center();
$("#jwbox_background").fadeIn("fast");
$.jwbox.lightbox.css("display","block")
$.jwbox.center();
$("#jwbox_background").fadeTo(0, 0.8);
$("object", context).each(function(){
$.jwbox.player = document.getElementById(this.id);
});
} else if ((context.className == 'jwbox_content')) {
} else {
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) {
}
$.jwbox.lightbox.css("display","none");
$.jwbox.lightbox = null;
$("#jwbox_background").fadeOut("fast");
}
},
center : function() {
if ($.jwbox.lightbox) {
$.jwbox.lightbox.center();
}
}
}
$(document).keyup(function(event){
if (event.keyCode == 27 && $.jwbox.lightbox) {
$.jwbox.toggle($("#jwbox_background"));
}
});
$(document).ready(function () {
$("body").append('<div id="jwbox_background"> </div>');
$(".jwbox").click(function () {$.jwbox.toggle(this); return false;});
$("#jwbox_background").click(function () {$.jwbox.toggle(this); return false;});
$(".jwbox_content").click(function () {$.jwbox.toggle(this); return false;});
$(window).resize(function() {$.jwbox.center();});
});
Any advice will sure be appreciated.