// Perfect World Entertainment Video Lightbox //PWI Video Lightbox Config -------------------------------// //vlbInit id parameter = the id of the container UL or other container that contains the anchors this script will be targeting targetAttribute = 'vblink'; //this is the attribute this script will read, this attribute should hold the path/URL to the video pathToFLVPlayer = '/swf/player.swf'; //this is the player that's required to embed .flv's in the browser //the lightbox first expands horizontally then vertically, animation in milliseconds horizontalAnimation = 500; verticalAnimation = 300; totalAnimationRuntime = horizontalAnimation + verticalAnimation; //this controls the fade in and out time for the black background behind the lightbox, time in milliseconds backgroundFadeInTime = 300; backgroundFadeOutTime = 300; //this is the width and the height of the lightbox container lightboxWidth = '630px'; lightboxHeight = '420px'; lightboxVideoHeightBox = '325px'; //this is the portion of the container above the control bar that holds the video. For videos smaller or larger than youtube videos this is used to calculate the vertical alignment of the video so it stays vertically centered. You can usually safely leave this as is. //--------------------------------------------------------// /* How to use -------------------------------------------// To use simply call the function vlbInit(id). Where you call this function within the page does not matter, the script will autorun once the page has loaded irregardless. For YouTube Videos The id or class parameter should be the id or class of the container which contains the anchors you wish to use with this script. The anchors you wish to use with the lightbox need an additional attribute. There needs to be an attribute vblink="[the link of your youtube video]". The script will use this attribute when it creates the object/embed inside the lightbox as the src for the movie. so For Internal FLV's The id or class parameter should be the id or class of the container which contains the anchors you wish to use with this script. The anchors you wish to use with the lightbox need additional attributes. There needs to be an attribute vblink="[the link of your video]". The second attribute is vbimage=[path to image that displays when the video first loads]. The third is vbheight=[height of movie]. The last attribute is vbwidth=[the width of the movie]. The script will use these attributes when it creates the object/embed inside the lightbox. so //--------------------------------------------------------*/ function vlbInit(cont){ $(document).ready(function(){ $(cont).bind('click', createLightBox); }); }; function createLightBox(e){ vid = this; if($(vid).attr(targetAttribute) != undefined){ $('body').append("
"); //appends lightbox elements to the body lb = new _lightBox($(vid).attr(targetAttribute)); //creates new lightbox object $(lb.cur).css('top', lb.y).css('left', lb.x); //positions the lightbox container lb.show(lb.cur, lb.width, lb.height); //calls the show method to activate the animation for the lightbox window $('.closeX').bind('click', lb.hide); //adds an event listener to the X in the lightbox container e.preventDefault(); } } function findLeft(){ //positions the lightbox container in the middle of the screen return $(window).width()/2 - $('.curLightBox').eq(0).width()/2; }; function findTop(){ //positions the lightbox container 150 px from the top of the users current screen position if($.browser.safari){ //if Chrome or Safari return $('body').scrollTop() + 150; }else{ return $('html').scrollTop() + 150; } } function _lightBox(mov){ //this function serves as a constructor for the lightbox object this.x = findLeft(); //positions the lightbox container in the middle of the screen this.y = findTop(); //positions the lightbox container 150 px from the top of the users current screen position (mov.match(/youtube/) == 'youtube')? this.isYouTube = true : this.isYouTube = false; //if it's a youtube video return true and set .isYouTube property to true if(!this.isYouTube){ ($(vid).attr('vbwidth') != undefined)? this.width = $(vid).attr('vbwidth') : this.width = 'auto'; //in the event adding the vbwidth attribute is forgotten defaults to natural width ($(vid).attr('vbheight') != undefined)? this.height = $(vid).attr('vbheight') : this.height = 'auto'; //in the event adding the vbheight attribute is forgotten defaults to natural height }else{ //fixes display bug where user views non-youtube video then views youtube video and the box doesn't resize back to default lightboxWidth = '600px'; lightboxHeight = '420px'; lightboxVideoHeightBox = '325px'; } this.cur = $('.curLightBox').eq(0).get(); //a reference to the div container this.show = function(obj, w, h){ //this method controls the type and appearance of the animation when the lightbox container comes into view if(this.isYouTube){ //if a youtube video vlbstr = ''; }else{ //else it's an .flv vlbstr = ''; } if($.browser.safari || $.browser.msie){ setTimeout("$('.curLightBox').append(vlbstr)", totalAnimationRuntime); //adds movie with delay to avoid flicker in Safari }else{ $('.curLightBox').append(vlbstr); //adds the actual movie to the lightbox container } if(!this.isYouTube){ //vertically centers non-youtube videos and makes a few recalculations if(w != 'auto'){ lightboxWidth = (parseInt(w) + 40) + 'px'; //changes lightbox width to fit movie if($.browser.msie && $.browser.version == '7.0'){ $('.targetLink').css('margin-left', ((parseInt(lightboxWidth) - $('.targetLink').width())/2.5) + 'px'); }else{ $('.targetLink').css('margin-left', ((parseInt(lightboxWidth) - $('.targetLink').width())/2) + 'px'); } } if(h != 'auto'){ lightboxHeight = (parseInt(h) + 80) + 'px'; //changes lightbox height to fit movie lightboxVideoHeightBox = (parseInt(h) - 15) + 'px'; if($.browser.msie){ $('.targetLink').css('margin-top', (parseInt(lightboxHeight) - $('.targetLink').height() - 10) + 'px'); }else{ $('.targetLink').css('margin-top', (parseInt(lightboxHeight) - $('.targetLink').height() - 10) + 'px'); $('.closeX').css('margin-top', (parseInt(lightboxHeight) - $('.closeX').height() - 10) + 'px'); } } if($.browser.mozilla){ calculatedTop = (parseInt(lightboxVideoHeightBox) - h)/2; }else if($.browser.safari || $.browser.msie){ calculatedTop = 0; }else { calculatedTop = (parseInt(lightboxVideoHeightBox) - h); } setTimeout("$('.flvMovie').css('top', calculatedTop + 'px')", totalAnimationRuntime); } if($.browser.msie && $.browser.version == '7.0' || navigator.appVersion.match(/Chrome/) == 'Chrome'){//if IE or Chrome $('.curLightBox').find('embed').removeClass('curMovie'); //this extra step is required for IE $('.curLightBox').find('object').hide(); setTimeout("$('.curLightBox').find('object').show()", totalAnimationRuntime); //reveals the movie after the animation }else{ $('.curLightBox').find('object').removeClass('curMovie'); //this extra step is required for IE $('.curLightBox').find('embed').addClass('curMovie').hide(); setTimeout("$('.curLightBox').find('embed').show()", totalAnimationRuntime); //reveals the movie after the animation } if(document.all){ //IE handles the height of the page a bit differently than everyone else $('.vlbLayer').hide().width($(window).width()).height($('body').height() + 50).fadeIn(backgroundFadeInTime); //expands the black background to fill the entire window top to bottom }else{ $('.vlbLayer').hide().width($(window).width()).height($(document).height()).fadeIn(backgroundFadeInTime); //expands the black background to fill the entire window top to bottom } //$('.vbds').width(lightboxWidth).css('margin-top', parseInt(lightboxHeight) + 'px'); $(obj).animate({width: lightboxWidth}, horizontalAnimation); window.cur = obj; //creates a reference to obj in global scope setTimeout("$(window.cur).animate({height: lightboxHeight}, verticalAnimation)", horizontalAnimation); } this.hide = function(){ //this method fades the background and lightbox out $('.vlbLayer').fadeOut(backgroundFadeOutTime); setTimeout("$('.vlbLayer').remove()", backgroundFadeOutTime); //removes lightbox code from the DOM } } //end lightbox object