//---------------------------------------------------------- // WebPlus LightBox //---------------------------------------------------------- (function($) { jQuery.fn.wplightbox = function( settings ) { //----------------------------------- // Extend jQuery settings to include arguments //----------------------------------- settings = jQuery.extend( { bShowToolTip: false, strCloseToolTip: 'Fermer (Echap)', strPrevToolTip: 'Précédent (<)', strNextToolTip: 'Suivant (>)', strPlayToolTip: 'Lecture', strPauseToolTip: 'Pause', bBkgrndClickable: true, strBkgrndCol: '#000000', nBkgrndOpacity: 0.5, strContentCol: '#ffffff', nContentOpacity: 0.8, strCaptionCol: '#555555', nCaptionOpacity: 1.0, nCaptionType: 1, bCaptionCount: true, strCaptionFontType: 'Tahoma,Serif', strCaptionFontCol: '#ffffff', nCaptionFontSz: 15, bShowPlay: true, bAnimateOpenClose: true, nPlayPeriod: 2000, //----------------------------------- // Permanent Settings //----------------------------------- nZIndex: 151, nPlayBtnOffset: 18, nNextBtnSz: 35, nLoadBtnSz: 50, nPlayBtnSz: 40, nBtnOffset: 10, nTableBorderSz: 10, nCaptionPadding: 15, nCaptionOffset: 10, bShowTranspBkgrndDiv: true, loadBtnSrc: ( settings.strImgDir + 'lightbox_load.gif' ), blankSrc: ( settings.strScriptDir + 'blank.gif' ), playBtnSrc: ( settings.strImgDir + 'lightbox_play.png' ), playOverBtnSrc: ( settings.strImgDir + 'lightbox_play_over.png' ), pauseBtnSrc: ( settings.strImgDir + 'lightbox_pause.png' ), pauseOverBtnSrc: ( settings.strImgDir + 'lightbox_pause_over.png' ) , closeBtnSrc: ( settings.strImgDir + 'lightbox_close_' + settings.nButtonType + '.png' ), closeOverBtnSrc: ( settings.strImgDir + 'lightbox_close_over_' + settings.nButtonType + '.png' ), nextBtnSrc: ( settings.strImgDir + 'lightbox_next_' + settings.nButtonType + '.png' ), nextOverBtnSrc: ( settings.strImgDir + 'lightbox_next_over_' + settings.nButtonType + '.png' ), prevBtnSrc: ( settings.strImgDir + 'lightbox_prev_' + settings.nButtonType + '.png' ), prevOverBtnSrc: ( settings.strImgDir + 'lightbox_prev_over_' + settings.nButtonType + '.png' ), border_n: ( settings.strImgDir + 'lightbox_n_' + settings.nBorderType + '.png' ), border_e: ( settings.strImgDir + 'lightbox_e_' + settings.nBorderType + '.png' ), border_s: ( settings.strImgDir + 'lightbox_s_' + settings.nBorderType + '.png' ), border_w: ( settings.strImgDir + 'lightbox_w_' + settings.nBorderType + '.png' ), border_ne: ( settings.strImgDir + 'lightbox_ne_' + settings.nBorderType + '.png' ), border_nw: ( settings.strImgDir + 'lightbox_nw_' + settings.nBorderType + '.png' ), border_se: ( settings.strImgDir + 'lightbox_se_' + settings.nBorderType + '.png' ), border_sw: ( settings.strImgDir + 'lightbox_sw_' + settings.nBorderType + '.png' ) }, settings); //----------------------------------- // Declare browser enumeration //----------------------------------- var eBrowser = { Msie:0, Mozilla:1, Safari:2, Opera:3, Chrome:4 }; //----------------------------------- // Declare rev enumeration //----------------------------------- var eRev = { GalleryId:0, UniqueId:1, Caption:2, Width:3, Height:4 }; //----------------------------------- // Declare content enumeration //----------------------------------- var eContent = { Image:0, Iframe:1, Flash:2, QuickTime:3 }; //----------------------------------- // Declare caption position enumeration //----------------------------------- var eCaption = { NoCaption:0, ExternalDivBottom:1, ExternalDivTop:2 }; //----------------------------------- // Declare mouse over enumeration //----------------------------------- var eMouseOver = { None:0, Next:1, Prev:2 }; //----------------------------------- // Declare member variables //----------------------------------- var m_nContentType = eContent.Image; var m_AnchorArray = new Array(); var m_nArrayPos = 0; var m_nArraySize = 0; var $m_BackgroundDiv = null; var $m_Table = null; var $m_Content = null; var $m_ContentContainer = null; var $m_CloseDiv = null; var $m_NextDiv = null; var $m_PrevDiv = null; var $m_PlayDiv = null; var $m_CaptionContainer = null; var $m_Caption = null; var m_strCloseTitle = settings.bShowToolTip ? 'title="' + settings.strCloseToolTip + '"' : ''; var m_strPrevTitle = settings.bShowToolTip ? 'title="' + settings.strPrevToolTip + '"' : ''; var m_strNextTitle = settings.bShowToolTip ? 'title="' + settings.strNextToolTip + '"' : ''; var m_strPlayTitle = settings.bShowToolTip ? 'title="' + settings.strPlayToolTip + '"' : ''; var m_strPauseTitle = settings.bShowToolTip ? 'title="' + settings.strPauseToolTip + '"' : ''; var m_bResizing = false; var m_bClosing = false; var m_nResizeStep = 0; var m_nResizeTimerId = 0; var m_bChangingContent = false; var m_bSingleItem = false; var m_strSource; var m_strCaption; var m_nContentWidth = 0; var m_nContentHeight = 0; var m_nContentLeft = 0; var m_nContentTop = 0; var m_nOldContentWidth = m_nContentWidth; var m_nOldContentHeight = m_nContentHeight; var m_nOldContentLeft = m_nContentLeft; var m_nOldContentTop = m_nContentTop; var m_nDefaultWidth = 600; var m_nDefaultHeight = 400; var m_nCaptionHeight = settings.nCaptionFontSz + settings.nCaptionPadding; var m_bPlaying = false; var m_nPlayTimerId = 0; var m_nMouseOverPos = 0; var m_nBrowser = eBrowser.Opera; if( jQuery.browser.mozilla ) m_nBrowser = eBrowser.Mozilla; if( jQuery.browser.msie ) m_nBrowser = eBrowser.Msie; else if( /chrome/.test( navigator.userAgent.toLowerCase() ) ) m_nBrowser = eBrowser.Chrome; else if( jQuery.browser.safari ) m_nBrowser = eBrowser.Safari; var m_bPngHack = ( jQuery.browser.msie && jQuery.browser.version < 7 ); //----------------------------------- // Initialise gallery //----------------------------------- this.click(function() { if( !$m_Table ) Initialise( this ); return false; }); //-------------------------------------- // Main initialisation function which registers events and configures lightbox //-------------------------------------- function Initialise( anchor ) { // Reset content dimensions m_nContentWidth = 200; m_nContentHeight = 200; m_nContentLeft = GetContentLeft(); m_nContentTop = GetContentTop(); StoreOldDimensions(); // Preload loading image imgLoad = new Image(); imgLoad.src = settings.loadBtnSrc; //----------------------------------- // Add lightbox elements //----------------------------------- // Add transparent background Div if( settings.bShowTranspBkgrndDiv ) { $('body').append('
'); $m_BackgroundDiv = $('#wplightbox_bkgrnd'); } // Add table to hold image contents var strTable = '\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ '; // Append contents table $('body').append( strTable ); $m_Table = $('#wplightbox_table'); $m_ContentContainer = $('#wplightbox_contentcol'); $m_Content = $('#wplightbox_content'); // Add close button $('body').append('
'); $m_CloseDiv = $('#wplightbox_closediv'); // Add next and previous buttons $('body').append(''); $('body').append(''); $m_NextDiv = $('#wplightbox_nextdiv'); $m_PrevDiv = $('#wplightbox_prevdiv'); // Add play button if( settings.bShowPlay ) { $('body').append(''); $m_PlayDiv = $('#wplightbox_playdiv'); } // Initialise captions InitCaption(); // Register mouse click if( settings.bShowTranspBkgrndDiv && settings.bBkgrndClickable ) { $m_BackgroundDiv.click(function() { StartClose(); return false; }); } //----------------------------------- // Bind lightbox events //----------------------------------- // Register resize event $(window).bind('resize', function() { m_nContentLeft = GetContentLeft(); m_nContentTop = GetContentTop(); if( settings.bShowTranspBkgrndDiv ) $m_BackgroundDiv.css({ 'width':GetPageWidth(), 'height':GetPageHeight(), 'overflow':'hidden' }); // Remove and re-append contents table - this fixes a bug with // safari where resizing the table causes table border artefacts if( $m_CaptionContainer ) { $m_CaptionContainer.remove(); $m_CaptionContainer = null; } $m_Table.remove(); $('body').append( strTable ); $m_Table = $('#wplightbox_table'); $m_ContentContainer = $('#wplightbox_contentcol'); $m_Content = $('#wplightbox_content'); $m_Content.attr({ 'src':m_strSource, 'width':m_nContentWidth, 'height':m_nContentHeight }); $m_Table.css({ 'left':(m_nContentLeft - settings.nTableBorderSz), 'top':(m_nContentTop - settings.nTableBorderSz), 'width':(m_nContentWidth + (settings.nTableBorderSz * 2)), 'height':(m_nContentHeight + (settings.nTableBorderSz * 2)) }); $m_Table.show(); InitCaption(); SetCaptionText( true ); SetCaptionPosition(); ShowCaption( HasCaption() ); PositionCloseBtn(); if( settings.bShowPlay ) PositionPlayBtn(); PositionNextAndPrevBtn(); ShowImg(); }); // Split the lightbox tag into its component parts var optionArray = anchor.rev.split('~#~'); // Reset the m_AnchorArray if( m_nArraySize > 0 ) m_AnchorArray = []; m_nArrayPos = 0; // Load single item if( optionArray[0] === 'wplightbox' ) { m_nArraySize = 1; m_AnchorArray[ m_nArrayPos ] = anchor; if( settings.bAnimateOpenClose ) GetPositionFromAnchor( $(anchor), true ); Load( anchor, true ); RegisterEvents( true ); $m_Table.show(); } else // Load multiple items { var nCount = 0; var uniqueArray = new Array(); // Populate the m_AnchorArray $('a').each( function(i) { if( this.rev ) { var tmpArray = this.rev.split('~#~'); if( optionArray[0] === tmpArray[0] ) { var bProcessAnchor = false; if( tmpArray[eRev.UniqueId] === "" ) { bProcessAnchor = true; } else if( uniqueArray[ tmpArray[eRev.UniqueId] ] != 99 ) { uniqueArray[ tmpArray[eRev.UniqueId] ] = 99; bProcessAnchor = true; } if( bProcessAnchor ) { m_AnchorArray[ nCount ] = this; ++nCount; } } } }); m_nArraySize = nCount; m_bSingleItem = ( m_nArraySize < 2 ); var assocOffset = GetAssociateImageOffset( anchor ); // Find current anchor position for( nCount = 0; nCount < m_nArraySize; ++nCount ) { if( m_AnchorArray[ nCount ].href === anchor.href && m_AnchorArray[ nCount ].rev === anchor.rev ) { if( assocOffset === null ) { m_nArrayPos = nCount; break; } else { var anchorOffset = GetAssociateImageOffset( m_AnchorArray[ nCount ] ); if( anchorOffset != null && assocOffset.left === anchorOffset.left && assocOffset.top === anchorOffset.top ) { m_nArrayPos = nCount; break; } } } } if( settings.bAnimateOpenClose ) GetPositionFromAnchor( $(m_AnchorArray[ m_nArrayPos ]), true ); Load( m_AnchorArray[ m_nArrayPos ], m_bSingleItem ); RegisterEvents( m_bSingleItem ); $m_Table.show(); } if( m_bPngHack ) { $('#ne,#n,#nw,#e,#w,#se,#s,#sw,#cne,#cn,#cnw,#ce,#cw,#cse,#cs,#csw,#wplightbox_closediv,#wplightbox_nextdiv,#wplightbox_prevdiv').PngHack(); if( settings.bShowPlay && !m_bSingleItem ) $m_PlayDiv.PngHack(); } }; //-------------------------------------- // Configures next and previous buttons according to mouse over pos //-------------------------------------- function SetMouseOverPos( nPos ) { if( !m_bResizing ) { m_nMouseOverPos = nPos; switch( m_nMouseOverPos ) { case eMouseOver.None: $m_NextDiv.hide(); $m_PrevDiv.hide(); $m_Content.css({ 'cursor':'default' }); break; case eMouseOver.Next: $m_NextDiv.show(); $m_PrevDiv.hide(); $m_Content.css({ 'cursor':'pointer' }); break; case eMouseOver.Prev: $m_NextDiv.hide(); $m_PrevDiv.show(); $m_Content.css({ 'cursor':'pointer' }); break; } } }; //-------------------------------------- // Get position from objAnchor //-------------------------------------- function GetPositionFromAnchor( objAnchor, bStart ) { var span = objAnchor.parent('span'); if( span.size() > 0 ) // If artistic text then extract position from grand-parent div { // This works ok as long as WP exports artistic text using //
Text
// If export format changes then update code below. var positionDiv = span.parent().parent(); var divOffset = positionDiv.offset(); m_nContentLeft = divOffset.left; m_nContentTop = divOffset.top; m_nContentWidth = positionDiv.width(); m_nContentHeight = positionDiv.height(); } else { var img = jQuery( 'img', objAnchor ); if( img.size() < 1 ) // If can't find image, search siblings { var parentDiv = $(objAnchor).parent('div'); if( parentDiv.size() > 0 ) img = jQuery( 'img', parentDiv ); } if( img.size() > 0 ) // For a standard image, extract position from image coords { var imgOffset = img.offset(); m_nContentLeft = imgOffset.left; m_nContentTop = imgOffset.top; m_nContentWidth = img.width(); m_nContentHeight = img.height(); } else // Else use raw anchor coords { var anchorOffset = objAnchor.offset(); m_nContentLeft = anchorOffset.left; m_nContentTop = anchorOffset.top; m_nContentWidth = objAnchor.width(); m_nContentHeight = objAnchor.height(); } } if( bStart ) { $m_Table.css({ 'left':(m_nContentLeft - settings.nTableBorderSz), 'top':(m_nContentTop - settings.nTableBorderSz), 'width':(m_nContentWidth + (settings.nTableBorderSz * 2)), 'height':(m_nContentHeight + (settings.nTableBorderSz * 2)) }); } } //-------------------------------------- // Loads content from objAnchor //-------------------------------------- function Load( objAnchor, bSingleItem ) { var bItemLoaded = false; m_bSingleItem = bSingleItem; var objArray = objAnchor.rev.split('~#~'); if( objArray.length > 1 ) m_strCaption = objArray[eRev.Caption]; else m_strCaption = ''; m_strSource = objAnchor.href; if( !m_strSource.length ) { // If not a standard // extract image url from the area's href // First attempt to find a child area var childArea = jQuery( 'area', objAnchor ); if( childArea.size() > 0 ) { jQuery.each( childArea, function(){ m_strSource = this.href; if( m_strSource.length > 0 ) return false; }); } else { // Failed to find child area, find parent area var parentDiv = $(objAnchor).parent('div'); if( parentDiv.size() > 0 ) { var area = jQuery( 'area', parentDiv ); if( area.size() > 0 ) m_strSource = area[0].href; } } } SetContentToImage(); var urlType = m_strSource.toLowerCase().slice( m_strSource.lastIndexOf( '.' ) ); m_nContentType = eContent.Iframe; // Use Iframe as default content switch( urlType ) { case '.jpg': case '.jpeg': case '.png': case '.gif': case '.bmp': m_nContentType = eContent.Image; break; case '.swf': m_nContentType = eContent.Flash; break; case '.mov': m_nContentType = eContent.QuickTime; break; } if( m_nContentType != eContent.Image ) GetRevDimensions( objAnchor, m_nContentType ); HideControls(); if( m_nContentType == eContent.Image ) { var image = new Image(); image.onload = function() { bItemLoaded = true; image.onload = null; StoreOldDimensions(); m_nContentWidth = image.width; m_nContentHeight = image.height; if( settings.nCaptionType == eCaption.ExternalDivTop ) { SetCaptionText( true ); SetCaptionPosition(); } m_nContentLeft = GetContentLeft(); m_nContentTop = GetContentTop(); StartResize(); }; image.src = m_strSource; } else { StartResize(); } }; //-------------------------------------- // Displays new image //-------------------------------------- function ShowImg() { StopResize(); switch( m_nContentType ) { case eContent.Image: $m_ContentContainer.append( '' ); break; case eContent.Iframe: $m_ContentContainer.append( '