/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.js
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
(function($) {
/**
* $ is an alias to jQuery object
*
*/
$.fn.videoBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQuery.extend({
// Configuration related to overlay
overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: 0.7, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
// Configuration related to navigation
fixedNavigation: true, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
// Configuration related to images
videoLoading: '/images/ajax-loader-video.gif', // (string) Path and the name of the loading icon
videoBtnPrev: '/images/pagination-prev.png', // (string) Path and the name of the prev button video
videoBtnNext: '/images/pagination-next.png', // (string) Path and the name of the next button image
videoBtnClose: '/images/bttn-img-close.png', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
// Configuration related to container video box
containerBorderSize: 20, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-video-box, you will need to update this value
containerResizeSpeed: 400, // (integer) Specify the resize duration of container video. These number are miliseconds. 400 is default.
// Configuration related to texts in caption. For example: video 2 of 8. You can alter either "video" and "of" texts.
txtVideo: 'Video', // (string) Specify text "video"
txtOf: 'of', // (string) Specify text "of"
// Configuration related to keyboard navigation
keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to.
keyToPrev: 'p', // (string) (p = previous) Letter to show the previous video
keyToNext: 'n', // (string) (n = next) Letter to show the next video.
// Don�t alter these variables in any way
videoArray: [],
activeVideo: 0,
audio: 0
}, settings);
// Caching the jQuery object with all elements matched
var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
/**
* Initializing the plugin calling the start function
*
* @return boolean false
*/
function _initialize() {
_start(this, jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked
return false; // Avoid the browser following the link
}
/**
* Start the jQuery lightBox plugin
*
* @param object objClicked The object (link) whick the user have clicked
* @param object jQueryMatchedObj The jQuery object with all elements matched
*/
function _start(objClicked, jQueryMatchedObj) {
// Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('select').css({
'visibility': 'hidden'
});
// Call the function to create the markup structure; style some elements; assign events in some elements.
_set_interface();
// Unset total videos in videoArray
settings.videoArray.length = 0;
// Unset video active information
settings.activeVideo = 0;
// We have an video set? Or just an video? Let�s see it.
if (jQueryMatchedObj.length == 1) {
if (settings.audio)
settings.videoArray.push(new Array(objClicked.getAttribute('href'), objClicked.getAttribute('title'), null));
else
settings.videoArray.push(new Array(objClicked.getAttribute('href'), objClicked.getAttribute('title'), objClicked.children('img')));
} else {
// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the videos references
for (var i = 0; i < jQueryMatchedObj.length; i++) {
if (settings.audio)
settings.videoArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'), jQueryMatchedObj[i].getAttribute('title'), null));
else
settings.videoArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'), jQueryMatchedObj[i].getAttribute('title'), jQuery(jQueryMatchedObj[i]).find('img').attr('src')));
}
}
while (settings.videoArray[settings.activeVideo][0] != objClicked.getAttribute('href')) {
settings.activeVideo++;
}
// Call the function that prepares video exibition
_set_video_to_view();
}
/**
* Create the jQuery lightBox plugin interface
*
* The HTML markup will be like that:
Video Title
Video Title
Video Title2
Video Title3
Video Title4
Video Title5
Video Title6
*
*/
function _set_interface() {
// Apply the HTML markup into body tag
$('body').append('\
\n\
\n\
\n\
\n\
\n\
Video Title\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
\n\
![]()
").attr('src', settings.videoArray[i][2])
).append(
jQuery("").html(settings.videoArray[i][1])
).attr({
'href': settings.videoArray[i][0],
'class': (i == settings.activeImage) ? "set" : null
})
)
);
});
var slider = new SlideNews("lightbox-other-videos", "videoThumb", "lightbox-nav-btnPrev", "lightbox-nav-btnNext", 3, true);
}
/**
* Display the button navigations
*
*/
function _set_navigation() {
$('#lightbox-nav').show();
// Enable keyboard navigation
_enable_keyboard_navigation();
jQuery(".videoThumb a").each(function(i) {
jQuery(this).click(function(event) {
event.preventDefault();
jQuery(".videoThumb a").each(function(j) {
if (i == j) {
jQuery(this).addClass('set');
} else {
jQuery(this).removeClass('set');
}
});
jQuery('#lightbox-video-details-caption').html(settings.videoArray[i][1]);
_embedMedia(settings.videoArray[i][0]);
});
});
}
/**
* Enable a support to keyboard navigation
*
*/
function _enable_keyboard_navigation() {
$(document).keydown(function(objEvent) {
_keyboard_action(objEvent);
});
}
/**
* Disable the support to keyboard navigation
*
*/
function _disable_keyboard_navigation() {
$(document).unbind();
}
/**
* Perform the keyboard actions
*
*/
function _keyboard_action(objEvent) {
// To ie
if (objEvent == null) {
keycode = event.keyCode;
escapeKey = 27;
// To Mozilla
} else {
keycode = objEvent.keyCode;
escapeKey = objEvent.DOM_VK_ESCAPE;
}
// Get the key in lower case form
key = String.fromCharCode(keycode).toLowerCase();
// Verify the keys to close the ligthBox
if ((key == settings.keyToClose) || (key == 'x') || (keycode == escapeKey)) {
_finish();
}
// Verify the key to show the previous video
if ((key == settings.keyToPrev) || (keycode == 37)) {
// If we�re not showing the first video, call the previous
if (settings.activeVideo != 0) {
settings.activeVideo = settings.activeVideo - 1;
_set_video_to_view();
_disable_keyboard_navigation();
}
}
// Verify the key to show the next video
if ((key == settings.keyToNext) || (keycode == 39)) {
// If we�re not showing the last video, call the next
if (settings.activeVideo != (settings.videoArray.length - 1)) {
settings.activeVideo = settings.activeVideo + 1;
_set_video_to_view();
_disable_keyboard_navigation();
}
}
}
function _finish() {
$('#jquery-lightbox').remove();
$('#jquery-overlay').fadeOut(function() {
$('#jquery-overlay').remove();
});
// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('embed, object, select').css({
'visibility': 'visible'
});
}
/**
/ THIRD FUNCTION
* getPageSize() by quirksmode.com
*
* @return Array Return an array with page width, height and window width, height
*/
function ___getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
};
/**
/ THIRD FUNCTION
* getPageScroll() by quirksmode.com
*
* @return Array Return an array with x,y page scroll values.
*/
function ___getPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScroll, yScroll);
return arrayPageScroll;
};
/**
* Stop the code execution from a escified time in milisecond
*
*/
function ___pause(ms) {
var date = new Date();
curDate = null;
do {
var curDate = new Date();
}
while (curDate - date < ms);
};
// Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once
return this.unbind('click').click(_initialize);
};
})(jQuery); // Call and execute the function immediately passing the jQuery object
