/** * 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. * Further adapted 10/22/08 - Matt Hughes */ // Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias (function($) { /** * $ is an alias to jQuery object * */ //alert($(this).find('a.first').getAttribute('href')); $.fn.imgReplace = 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.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9 // Configuration related to navigation fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface. // Configuration related to images imageLoading: '/html/images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon imageBtnPrev: '/html/images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image imageBtnNext: '/html/images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image imageBtnClose: '/html/images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn imageBlank: '/html/images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel) // Configuration related to container image box containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default. // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts. txtImage: 'Image', // (string) Specify text "Image" 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 image keyToNext: 'n', // (string) (n = next) Letter to show the next image. // Donīt alter these variables in any way imageArray: [], activeImage: 0 },settings); // Caching the jQuery object with all elements matched var jQueryMatchedObj = this; // This, in this context, refer to jQuery object // Unset total images in imageArray settings.imageArray.length = 0; // Unset image active information settings.activeImage = 0; // We have an image set? Or just an image? Letīs see it. // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references for ( var i = 0; i < jQueryMatchedObj.length; i++ ) { settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title'))); } while ( settings.imageArray[settings.activeImage][0] != jQueryMatchedObj[0].getAttribute('href') ) { settings.activeImage++; } _show_image_numbers(); $('#replacement-image').attr('src', $('#links a.first').attr('href')); $('#image-loading-div').hide(); _set_navigation(); function _set_image_to_view() { // show the loading // Show the loading $('#image-loading').attr('src', settings.imageLoading); $('#image-loading-div').show(); if ( settings.fixedNavigation ) { $('#replacement-image').hide(); } else { // Hide some elements $('#nav,#nav-btnPrev,#nav-btnNext').hide(); } }; /** * Show the prepared image * */ function _show_image() { $('#image-loading-div').hide(); // Image preload process var objImagePreloader = new Image(); objImagePreloader.onload = function() { $('#replacement-image').fadeOut(function() { $('#replacement-image').attr('src',settings.imageArray[settings.activeImage][0]); }); //$('#replacement-image').attr('src',settings.imageArray[settings.activeImage][0]); $('#replacement-image').fadeIn(); //alert($('#replacement-image').attr('src')); // clear onLoad, IE behaves irratically with animated gifs otherwise objImagePreloader.onload=function(){}; }; objImagePreloader.src = settings.imageArray[settings.activeImage][0]; _set_navigation(); _preload_neighbor_images(); }; /** * Show the image information * */ function _show_image_numbers() { // Changed to show a list of numbered links of the image set if ( settings.imageArray.length > 1 ) { //$('#image-number-links').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show(); var numbers = "Browse Images: "; var i = 0; var j = 1; for ( var x in settings.imageArray ) { numbers = numbers + "" + j + ""; i++; j++; } $('#image-number-links').html(numbers).show(); } $('#image-number-links a.number').bind('click',function(event) { event.preventDefault(); var imgLink = $(this).html() - 1; settings.activeImage = imgLink; _set_image_to_view(); _show_image(); return false; }); } /** * Display the button navigations * */ function _set_navigation() { $('#nav').show(); // Instead to define this configuration in CSS file, we define here. And itīs need to IE. Just. $('#nav-btnPrev,#nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); // Show the prev button, if not the first image in set if ( settings.activeImage != 0 ) { if ( settings.fixedNavigation ) { $('#nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 50% no-repeat' }) .unbind() .bind('click',function() { Prev(); return false; }); } else { // Show the images button for Next buttons $('#nav-btnPrev').unbind().hover(function() { $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 50% no-repeat' }); },function() { $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); }).show().bind('click',function() { Prev(); return false; }); } } // Show the next button, if not the last image in set if ( settings.activeImage != ( settings.imageArray.length -1 ) ) { if ( settings.fixedNavigation ) { $('#nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 50% no-repeat' }) .unbind() .bind('click',function() { Next(); return false; }); } else { // Show the images button for Next buttons $('#nav-btnNext').unbind().hover(function() { $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 50% no-repeat' }); },function() { $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); }).show().bind('click',function() { Next(); return false; }); } } } function Next() { settings.activeImage = settings.activeImage + 1; _set_image_to_view(); _show_image(); //alert(settings.activeImage); return false; } function Prev() { settings.activeImage = settings.activeImage - 1; _set_image_to_view(); _show_image(); //alert(settings.activeImage); return false; } /** * Preload prev and next images being showed * */ function _preload_neighbor_images() { if ( (settings.imageArray.length -1) > settings.activeImage ) { objNext = new Image(); objNext.src = settings.imageArray[settings.activeImage + 1][0]; } if ( settings.activeImage > 0 ) { objPrev = new Image(); objPrev.src = settings.imageArray[settings.activeImage -1][0]; } } /** * 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