2015-12-30 14:53:02 +01:00
/ * !
Colorbox 1.6 . 3
license : MIT
http : //www.jacklmoore.com/colorbox
2013-02-05 02:09:25 +01:00
* /
( function ( $ , document , window ) {
var
// Default settings object.
// See http://jacklmoore.com/colorbox for details.
defaults = {
2015-12-30 14:53:02 +01:00
// data sources
html : false ,
photo : false ,
iframe : false ,
inline : false ,
// behavior and appearance
2013-02-05 02:09:25 +01:00
transition : "elastic" ,
speed : 300 ,
2015-12-30 14:53:02 +01:00
fadeOut : 300 ,
2013-02-05 02:09:25 +01:00
width : false ,
initialWidth : "600" ,
innerWidth : false ,
maxWidth : false ,
height : false ,
initialHeight : "450" ,
innerHeight : false ,
maxHeight : false ,
scalePhotos : true ,
scrolling : true ,
opacity : 0.9 ,
preloading : true ,
className : false ,
2015-12-30 14:53:02 +01:00
overlayClose : true ,
escKey : true ,
arrowKey : true ,
top : false ,
bottom : false ,
left : false ,
right : false ,
fixed : false ,
data : undefined ,
closeButton : true ,
fastIframe : true ,
open : false ,
reposition : true ,
loop : true ,
slideshow : false ,
slideshowAuto : true ,
slideshowSpeed : 2500 ,
slideshowStart : "start slideshow" ,
slideshowStop : "stop slideshow" ,
photoRegex : /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i ,
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
// alternate image paths for high-res displays
retinaImage : false ,
retinaUrl : false ,
retinaSuffix : '@2x.$1' ,
// internationalization
2013-02-05 02:09:25 +01:00
current : "image {current} of {total}" ,
previous : "previous" ,
next : "next" ,
close : "close" ,
xhrError : "This content failed to load." ,
imgError : "This image failed to load." ,
2015-12-30 14:53:02 +01:00
// accessbility
2013-02-05 02:09:25 +01:00
returnFocus : true ,
2015-12-30 14:53:02 +01:00
trapFocus : true ,
// callbacks
2013-02-05 02:09:25 +01:00
onOpen : false ,
onLoad : false ,
onComplete : false ,
onCleanup : false ,
onClosed : false ,
2015-12-30 14:53:02 +01:00
rel : function ( ) {
return this . rel ;
} ,
href : function ( ) {
// using this.href would give the absolute url, when the href may have been inteded as a selector (e.g. '#container')
return $ ( this ) . attr ( 'href' ) ;
} ,
title : function ( ) {
return this . title ;
} ,
createImg : function ( ) {
var img = new Image ( ) ;
var attrs = $ ( this ) . data ( 'cbox-img-attrs' ) ;
if ( typeof attrs === 'object' ) {
$ . each ( attrs , function ( key , val ) {
img [ key ] = val ;
} ) ;
}
return img ;
} ,
createIframe : function ( ) {
var iframe = document . createElement ( 'iframe' ) ;
var attrs = $ ( this ) . data ( 'cbox-iframe-attrs' ) ;
if ( typeof attrs === 'object' ) {
$ . each ( attrs , function ( key , val ) {
iframe [ key ] = val ;
} ) ;
}
if ( 'frameBorder' in iframe ) {
iframe . frameBorder = 0 ;
}
if ( 'allowTransparency' in iframe ) {
iframe . allowTransparency = "true" ;
}
iframe . name = ( new Date ( ) ) . getTime ( ) ; // give the iframe a unique name to prevent caching
iframe . allowFullscreen = true ;
return iframe ;
}
2013-02-05 02:09:25 +01:00
} ,
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
// Abstracting the HTML and event identifiers for easy rebranding
colorbox = 'colorbox' ,
prefix = 'cbox' ,
boxElement = prefix + 'Element' ,
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
// Events
event _open = prefix + '_open' ,
event _load = prefix + '_load' ,
event _complete = prefix + '_complete' ,
event _cleanup = prefix + '_cleanup' ,
event _closed = prefix + '_closed' ,
event _purge = prefix + '_purge' ,
// Cached jQuery Object Variables
$overlay ,
$box ,
$wrap ,
$content ,
$topBorder ,
$leftBorder ,
$rightBorder ,
$bottomBorder ,
$related ,
$window ,
$loaded ,
$loadingBay ,
$loadingOverlay ,
$title ,
$current ,
$slideshow ,
$next ,
$prev ,
$close ,
$groupControls ,
2015-12-30 14:53:02 +01:00
$events = $ ( '<a/>' ) , // $({}) would be prefered, but there is an issue with jQuery 1.4.2
2013-02-05 02:09:25 +01:00
// Variables for cached values or use across multiple functions
settings ,
interfaceHeight ,
interfaceWidth ,
loadedHeight ,
loadedWidth ,
index ,
photo ,
open ,
active ,
closing ,
loadingTimer ,
publicMethod ,
div = "div" ,
2015-12-30 14:53:02 +01:00
requests = 0 ,
previousCSS = { } ,
2013-02-05 02:09:25 +01:00
init ;
// ****************
// HELPER FUNCTIONS
// ****************
2015-12-30 14:53:02 +01:00
// Convenience function for creating new jQuery objects
2013-02-05 02:09:25 +01:00
function $tag ( tag , id , css ) {
var element = document . createElement ( tag ) ;
if ( id ) {
element . id = prefix + id ;
}
if ( css ) {
element . style . cssText = css ;
}
return $ ( element ) ;
}
2015-12-30 14:53:02 +01:00
// Get the window height using innerHeight when available to avoid an issue with iOS
// http://bugs.jquery.com/ticket/6724
function winheight ( ) {
return window . innerHeight ? window . innerHeight : $ ( window ) . height ( ) ;
}
function Settings ( element , options ) {
if ( options !== Object ( options ) ) {
options = { } ;
}
this . cache = { } ;
this . el = element ;
this . value = function ( key ) {
var dataAttr ;
if ( this . cache [ key ] === undefined ) {
dataAttr = $ ( this . el ) . attr ( 'data-cbox-' + key ) ;
if ( dataAttr !== undefined ) {
this . cache [ key ] = dataAttr ;
} else if ( options [ key ] !== undefined ) {
this . cache [ key ] = options [ key ] ;
} else if ( defaults [ key ] !== undefined ) {
this . cache [ key ] = defaults [ key ] ;
}
}
return this . cache [ key ] ;
} ;
this . get = function ( key ) {
var value = this . value ( key ) ;
return $ . isFunction ( value ) ? value . call ( this . el , this ) : value ;
} ;
}
2013-02-05 02:09:25 +01:00
// Determine the next and previous members in a group.
function getIndex ( increment ) {
var
max = $related . length ,
newIndex = ( index + increment ) % max ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
return ( newIndex < 0 ) ? max + newIndex : newIndex ;
}
// Convert '%' and 'px' values to integers
function setSize ( size , dimension ) {
2015-12-30 14:53:02 +01:00
return Math . round ( ( /%/ . test ( size ) ? ( ( dimension === 'x' ? $window . width ( ) : winheight ( ) ) / 100 ) : 1 ) * parseInt ( size , 10 ) ) ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
// Checks an href to see if it is a photo.
2015-12-30 14:53:02 +01:00
// There is a force photo option (photo: true) for hrefs that cannot be matched by the regex.
function isImage ( settings , url ) {
return settings . get ( 'photo' ) || settings . get ( 'photoRegex' ) . test ( url ) ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
function retinaUrl ( settings , url ) {
return settings . get ( 'retinaUrl' ) && window . devicePixelRatio > 1 ? url . replace ( settings . get ( 'photoRegex' ) , settings . get ( 'retinaSuffix' ) ) : url ;
}
function trapFocus ( e ) {
if ( 'contains' in $box [ 0 ] && ! $box [ 0 ] . contains ( e . target ) && e . target !== $overlay [ 0 ] ) {
e . stopPropagation ( ) ;
$box . focus ( ) ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
}
function setClass ( str ) {
if ( setClass . str !== str ) {
$box . add ( $overlay ) . removeClass ( setClass . str ) . addClass ( str ) ;
setClass . str = str ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
}
function getRelated ( rel ) {
index = 0 ;
if ( rel && rel !== false && rel !== 'nofollow' ) {
$related = $ ( '.' + boxElement ) . filter ( function ( ) {
var options = $ . data ( this , colorbox ) ;
var settings = new Settings ( this , options ) ;
return ( settings . get ( 'rel' ) === rel ) ;
} ) ;
index = $related . index ( settings . el ) ;
// Check direct calls to Colorbox.
if ( index === - 1 ) {
$related = $related . add ( settings . el ) ;
index = $related . length - 1 ;
}
} else {
$related = $ ( settings . el ) ;
2013-02-05 02:09:25 +01:00
}
}
2015-12-30 14:53:02 +01:00
function trigger ( event ) {
2013-02-05 02:09:25 +01:00
// for external use
$ ( document ) . trigger ( event ) ;
// for internal use
2015-12-30 14:53:02 +01:00
$events . triggerHandler ( event ) ;
}
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
var slideshow = ( function ( ) {
var active ,
className = prefix + "Slideshow_" ,
click = "click." + prefix ,
timeOut ;
function clear ( ) {
clearTimeout ( timeOut ) ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
function set ( ) {
if ( settings . get ( 'loop' ) || $related [ index + 1 ] ) {
clear ( ) ;
timeOut = setTimeout ( publicMethod . next , settings . get ( 'slideshowSpeed' ) ) ;
}
}
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
function start ( ) {
$slideshow
. html ( settings . get ( 'slideshowStop' ) )
. unbind ( click )
. one ( click , stop ) ;
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
$events
. bind ( event _complete , set )
. bind ( event _load , clear ) ;
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
$box . removeClass ( className + "off" ) . addClass ( className + "on" ) ;
}
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
function stop ( ) {
clear ( ) ;
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
$events
. unbind ( event _complete , set )
. unbind ( event _load , clear ) ;
$slideshow
. html ( settings . get ( 'slideshowStart' ) )
. unbind ( click )
. one ( click , function ( ) {
publicMethod . next ( ) ;
start ( ) ;
} ) ;
$box . removeClass ( className + "on" ) . addClass ( className + "off" ) ;
}
function reset ( ) {
active = false ;
$slideshow . hide ( ) ;
clear ( ) ;
$events
. unbind ( event _complete , set )
. unbind ( event _load , clear ) ;
2013-02-05 02:09:25 +01:00
$box . removeClass ( className + "off " + className + "on" ) ;
}
2015-12-30 14:53:02 +01:00
return function ( ) {
if ( active ) {
if ( ! settings . get ( 'slideshow' ) ) {
$events . unbind ( event _cleanup , reset ) ;
reset ( ) ;
}
} else {
if ( settings . get ( 'slideshow' ) && $related [ 1 ] ) {
active = true ;
$events . one ( event _cleanup , reset ) ;
if ( settings . get ( 'slideshowAuto' ) ) {
start ( ) ;
} else {
stop ( ) ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
$slideshow . show ( ) ;
2013-02-05 02:09:25 +01:00
}
}
2015-12-30 14:53:02 +01:00
} ;
} ( ) ) ;
function launch ( element ) {
var options ;
if ( ! closing ) {
options = $ ( element ) . data ( colorbox ) ;
settings = new Settings ( element , options ) ;
getRelated ( settings . get ( 'rel' ) ) ;
2013-02-05 02:09:25 +01:00
if ( ! open ) {
open = active = true ; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
2015-12-30 14:53:02 +01:00
setClass ( settings . get ( 'className' ) ) ;
2013-02-05 02:09:25 +01:00
// Show colorbox so the sizes can be calculated in older versions of jQuery
2015-12-30 14:53:02 +01:00
$box . css ( { visibility : 'hidden' , display : 'block' , opacity : '' } ) ;
$loaded = $tag ( div , 'LoadedContent' , 'width:0; height:0; overflow:hidden; visibility:hidden' ) ;
$content . css ( { width : '' , height : '' } ) . append ( $loaded ) ;
2013-02-05 02:09:25 +01:00
// Cache values needed for size calculations
2015-12-30 14:53:02 +01:00
interfaceHeight = $topBorder . height ( ) + $bottomBorder . height ( ) + $content . outerHeight ( true ) - $content . height ( ) ;
2013-02-05 02:09:25 +01:00
interfaceWidth = $leftBorder . width ( ) + $rightBorder . width ( ) + $content . outerWidth ( true ) - $content . width ( ) ;
loadedHeight = $loaded . outerHeight ( true ) ;
loadedWidth = $loaded . outerWidth ( true ) ;
2015-12-30 14:53:02 +01:00
// Opens inital empty Colorbox prior to content being loaded.
var initialWidth = setSize ( settings . get ( 'initialWidth' ) , 'x' ) ;
var initialHeight = setSize ( settings . get ( 'initialHeight' ) , 'y' ) ;
var maxWidth = settings . get ( 'maxWidth' ) ;
var maxHeight = settings . get ( 'maxHeight' ) ;
settings . w = Math . max ( ( maxWidth !== false ? Math . min ( initialWidth , setSize ( maxWidth , 'x' ) ) : initialWidth ) - loadedWidth - interfaceWidth , 0 ) ;
settings . h = Math . max ( ( maxHeight !== false ? Math . min ( initialHeight , setSize ( maxHeight , 'y' ) ) : initialHeight ) - loadedHeight - interfaceHeight , 0 ) ;
$loaded . css ( { width : '' , height : settings . h } ) ;
publicMethod . position ( ) ;
trigger ( event _open ) ;
settings . get ( 'onOpen' ) ;
$groupControls . add ( $title ) . hide ( ) ;
$box . focus ( ) ;
if ( settings . get ( 'trapFocus' ) ) {
// Confine focus to the modal
// Uses event capturing that is not supported in IE8-
if ( document . addEventListener ) {
document . addEventListener ( 'focus' , trapFocus , true ) ;
$events . one ( event _closed , function ( ) {
document . removeEventListener ( 'focus' , trapFocus , true ) ;
} ) ;
}
}
// Return focus on closing
if ( settings . get ( 'returnFocus' ) ) {
2013-02-05 02:09:25 +01:00
$events . one ( event _closed , function ( ) {
2015-12-30 14:53:02 +01:00
$ ( settings . el ) . focus ( ) ;
2013-02-05 02:09:25 +01:00
} ) ;
}
2015-12-30 14:53:02 +01:00
}
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
var opacity = parseFloat ( settings . get ( 'opacity' ) ) ;
$overlay . css ( {
opacity : opacity === opacity ? opacity : '' ,
cursor : settings . get ( 'overlayClose' ) ? 'pointer' : '' ,
visibility : 'visible'
} ) . show ( ) ;
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'closeButton' ) ) {
$close . html ( settings . get ( 'close' ) ) . appendTo ( $content ) ;
} else {
$close . appendTo ( '<div/>' ) ; // replace with .detach() when dropping jQuery < 1.4
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
load ( ) ;
2013-02-05 02:09:25 +01:00
}
}
2015-12-30 14:53:02 +01:00
// Colorbox's markup needs to be added to the DOM prior to being called
2013-02-05 02:09:25 +01:00
// so that the browser will go ahead and load the CSS background images.
function appendHTML ( ) {
2015-12-30 14:53:02 +01:00
if ( ! $box ) {
2013-02-05 02:09:25 +01:00
init = false ;
$window = $ ( window ) ;
2015-12-30 14:53:02 +01:00
$box = $tag ( div ) . attr ( {
id : colorbox ,
'class' : $ . support . opacity === false ? prefix + 'IE' : '' , // class for optional IE8 & lower targeted CSS.
role : 'dialog' ,
tabindex : '-1'
} ) . hide ( ) ;
$overlay = $tag ( div , "Overlay" ) . hide ( ) ;
$loadingOverlay = $ ( [ $tag ( div , "LoadingOverlay" ) [ 0 ] , $tag ( div , "LoadingGraphic" ) [ 0 ] ] ) ;
2013-02-05 02:09:25 +01:00
$wrap = $tag ( div , "Wrapper" ) ;
$content = $tag ( div , "Content" ) . append (
$title = $tag ( div , "Title" ) ,
$current = $tag ( div , "Current" ) ,
2015-12-30 14:53:02 +01:00
$prev = $ ( '<button type="button"/>' ) . attr ( { id : prefix + 'Previous' } ) ,
$next = $ ( '<button type="button"/>' ) . attr ( { id : prefix + 'Next' } ) ,
$slideshow = $tag ( 'button' , "Slideshow" ) ,
$loadingOverlay
2013-02-05 02:09:25 +01:00
) ;
2015-12-30 14:53:02 +01:00
$close = $ ( '<button type="button"/>' ) . attr ( { id : prefix + 'Close' } ) ;
$wrap . append ( // The 3x3 Grid that makes up Colorbox
2013-02-05 02:09:25 +01:00
$tag ( div ) . append (
$tag ( div , "TopLeft" ) ,
$topBorder = $tag ( div , "TopCenter" ) ,
$tag ( div , "TopRight" )
) ,
$tag ( div , false , 'clear:left' ) . append (
$leftBorder = $tag ( div , "MiddleLeft" ) ,
$content ,
$rightBorder = $tag ( div , "MiddleRight" )
) ,
$tag ( div , false , 'clear:left' ) . append (
$tag ( div , "BottomLeft" ) ,
$bottomBorder = $tag ( div , "BottomCenter" ) ,
$tag ( div , "BottomRight" )
)
) . find ( 'div div' ) . css ( { 'float' : 'left' } ) ;
2015-12-30 14:53:02 +01:00
$loadingBay = $tag ( div , false , 'position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;' ) ;
$groupControls = $next . add ( $prev ) . add ( $current ) . add ( $slideshow ) ;
}
if ( document . body && ! $box . parent ( ) . length ) {
2013-02-05 02:09:25 +01:00
$ ( document . body ) . append ( $overlay , $box . append ( $wrap , $loadingBay ) ) ;
}
}
2015-12-30 14:53:02 +01:00
// Add Colorbox's event bindings
2013-02-05 02:09:25 +01:00
function addBindings ( ) {
function clickHandler ( e ) {
// ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt.
// See: http://jacklmoore.com/notes/click-events/
2015-12-30 14:53:02 +01:00
if ( ! ( e . which > 1 || e . shiftKey || e . altKey || e . metaKey || e . ctrlKey ) ) {
2013-02-05 02:09:25 +01:00
e . preventDefault ( ) ;
launch ( this ) ;
}
}
if ( $box ) {
if ( ! init ) {
init = true ;
// Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
$next . click ( function ( ) {
publicMethod . next ( ) ;
} ) ;
$prev . click ( function ( ) {
publicMethod . prev ( ) ;
} ) ;
$close . click ( function ( ) {
publicMethod . close ( ) ;
} ) ;
$overlay . click ( function ( ) {
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'overlayClose' ) ) {
2013-02-05 02:09:25 +01:00
publicMethod . close ( ) ;
}
} ) ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
// Key Bindings
$ ( document ) . bind ( 'keydown.' + prefix , function ( e ) {
var key = e . keyCode ;
2015-12-30 14:53:02 +01:00
if ( open && settings . get ( 'escKey' ) && key === 27 ) {
2013-02-05 02:09:25 +01:00
e . preventDefault ( ) ;
publicMethod . close ( ) ;
}
2015-12-30 14:53:02 +01:00
if ( open && settings . get ( 'arrowKey' ) && $related [ 1 ] && ! e . altKey ) {
2013-02-05 02:09:25 +01:00
if ( key === 37 ) {
e . preventDefault ( ) ;
$prev . click ( ) ;
} else if ( key === 39 ) {
e . preventDefault ( ) ;
$next . click ( ) ;
}
}
} ) ;
if ( $ . isFunction ( $ . fn . on ) ) {
2015-12-30 14:53:02 +01:00
// For jQuery 1.7+
2013-02-05 02:09:25 +01:00
$ ( document ) . on ( 'click.' + prefix , '.' + boxElement , clickHandler ) ;
2015-12-30 14:53:02 +01:00
} else {
// For jQuery 1.3.x -> 1.6.x
// This code is never reached in jQuery 1.9, so do not contact me about 'live' being removed.
// This is not here for jQuery 1.9, it's here for legacy users.
2013-02-05 02:09:25 +01:00
$ ( '.' + boxElement ) . live ( 'click.' + prefix , clickHandler ) ;
}
}
return true ;
}
return false ;
}
2015-12-30 14:53:02 +01:00
// Don't do anything if Colorbox already exists.
if ( $ [ colorbox ] ) {
2013-02-05 02:09:25 +01:00
return ;
}
// Append the HTML when the DOM loads
$ ( appendHTML ) ;
// ****************
// PUBLIC FUNCTIONS
2015-12-30 14:53:02 +01:00
// Usage format: $.colorbox.close();
// Usage from within an iframe: parent.jQuery.colorbox.close();
2013-02-05 02:09:25 +01:00
// ****************
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
publicMethod = $ . fn [ colorbox ] = $ [ colorbox ] = function ( options , callback ) {
2015-12-30 14:53:02 +01:00
var settings ;
var $obj = this ;
2013-02-05 02:09:25 +01:00
options = options || { } ;
2015-12-30 14:53:02 +01:00
if ( $ . isFunction ( $obj ) ) { // assume a call to $.colorbox
$obj = $ ( '<a/>' ) ;
options . open = true ;
}
if ( ! $obj [ 0 ] ) { // colorbox being applied to empty collection
return $obj ;
}
2013-02-05 02:09:25 +01:00
appendHTML ( ) ;
if ( addBindings ( ) ) {
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
if ( callback ) {
options . onComplete = callback ;
}
2015-12-30 14:53:02 +01:00
$obj . each ( function ( ) {
var old = $ . data ( this , colorbox ) || { } ;
$ . data ( this , colorbox , $ . extend ( old , options ) ) ;
2013-02-05 02:09:25 +01:00
} ) . addClass ( boxElement ) ;
2015-12-30 14:53:02 +01:00
settings = new Settings ( $obj [ 0 ] , options ) ;
if ( settings . get ( 'open' ) ) {
launch ( $obj [ 0 ] ) ;
2013-02-05 02:09:25 +01:00
}
}
2015-12-30 14:53:02 +01:00
return $obj ;
2013-02-05 02:09:25 +01:00
} ;
publicMethod . position = function ( speed , loadedCallback ) {
var
css ,
top = 0 ,
left = 0 ,
offset = $box . offset ( ) ,
scrollTop ,
scrollLeft ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$window . unbind ( 'resize.' + prefix ) ;
// remove the modal so that it doesn't influence the document width/height
$box . css ( { top : - 9e4 , left : - 9e4 } ) ;
scrollTop = $window . scrollTop ( ) ;
scrollLeft = $window . scrollLeft ( ) ;
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'fixed' ) ) {
2013-02-05 02:09:25 +01:00
offset . top -= scrollTop ;
offset . left -= scrollLeft ;
$box . css ( { position : 'fixed' } ) ;
} else {
top = scrollTop ;
left = scrollLeft ;
$box . css ( { position : 'absolute' } ) ;
}
// keeps the top and left positions within the browser's viewport.
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'right' ) !== false ) {
left += Math . max ( $window . width ( ) - settings . w - loadedWidth - interfaceWidth - setSize ( settings . get ( 'right' ) , 'x' ) , 0 ) ;
} else if ( settings . get ( 'left' ) !== false ) {
left += setSize ( settings . get ( 'left' ) , 'x' ) ;
2013-02-05 02:09:25 +01:00
} else {
left += Math . round ( Math . max ( $window . width ( ) - settings . w - loadedWidth - interfaceWidth , 0 ) / 2 ) ;
}
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'bottom' ) !== false ) {
top += Math . max ( winheight ( ) - settings . h - loadedHeight - interfaceHeight - setSize ( settings . get ( 'bottom' ) , 'y' ) , 0 ) ;
} else if ( settings . get ( 'top' ) !== false ) {
top += setSize ( settings . get ( 'top' ) , 'y' ) ;
2013-02-05 02:09:25 +01:00
} else {
2015-12-30 14:53:02 +01:00
top += Math . round ( Math . max ( winheight ( ) - settings . h - loadedHeight - interfaceHeight , 0 ) / 2 ) ;
2013-02-05 02:09:25 +01:00
}
$box . css ( { top : offset . top , left : offset . left , visibility : 'visible' } ) ;
// this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
// but it has to be shrank down around the size of div#colorbox when it's done. If not,
// it can invoke an obscure IE bug when using iframes.
$wrap [ 0 ] . style . width = $wrap [ 0 ] . style . height = "9999px" ;
2015-12-30 14:53:02 +01:00
function modalDimensions ( ) {
$topBorder [ 0 ] . style . width = $bottomBorder [ 0 ] . style . width = $content [ 0 ] . style . width = ( parseInt ( $box [ 0 ] . style . width , 10 ) - interfaceWidth ) + 'px' ;
$content [ 0 ] . style . height = $leftBorder [ 0 ] . style . height = $rightBorder [ 0 ] . style . height = ( parseInt ( $box [ 0 ] . style . height , 10 ) - interfaceHeight ) + 'px' ;
2013-02-05 02:09:25 +01:00
}
css = { width : settings . w + loadedWidth + interfaceWidth , height : settings . h + loadedHeight + interfaceHeight , top : top , left : left } ;
2015-12-30 14:53:02 +01:00
// setting the speed to 0 if the content hasn't changed size or position
if ( speed ) {
var tempSpeed = 0 ;
$ . each ( css , function ( i ) {
if ( css [ i ] !== previousCSS [ i ] ) {
tempSpeed = speed ;
return ;
}
} ) ;
speed = tempSpeed ;
}
previousCSS = css ;
if ( ! speed ) {
2013-02-05 02:09:25 +01:00
$box . css ( css ) ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$box . dequeue ( ) . animate ( css , {
2015-12-30 14:53:02 +01:00
duration : speed || 0 ,
2013-02-05 02:09:25 +01:00
complete : function ( ) {
2015-12-30 14:53:02 +01:00
modalDimensions ( ) ;
2013-02-05 02:09:25 +01:00
active = false ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
// shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
$wrap [ 0 ] . style . width = ( settings . w + loadedWidth + interfaceWidth ) + "px" ;
$wrap [ 0 ] . style . height = ( settings . h + loadedHeight + interfaceHeight ) + "px" ;
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'reposition' ) ) {
2013-02-05 02:09:25 +01:00
setTimeout ( function ( ) { // small delay before binding onresize due to an IE8 bug.
$window . bind ( 'resize.' + prefix , publicMethod . position ) ;
} , 1 ) ;
}
2015-12-30 14:53:02 +01:00
if ( $ . isFunction ( loadedCallback ) ) {
2013-02-05 02:09:25 +01:00
loadedCallback ( ) ;
}
} ,
2015-12-30 14:53:02 +01:00
step : modalDimensions
2013-02-05 02:09:25 +01:00
} ) ;
} ;
publicMethod . resize = function ( options ) {
2015-12-30 14:53:02 +01:00
var scrolltop ;
2013-02-05 02:09:25 +01:00
if ( open ) {
options = options || { } ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
if ( options . width ) {
settings . w = setSize ( options . width , 'x' ) - loadedWidth - interfaceWidth ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
if ( options . innerWidth ) {
settings . w = setSize ( options . innerWidth , 'x' ) ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$loaded . css ( { width : settings . w } ) ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
if ( options . height ) {
settings . h = setSize ( options . height , 'y' ) - loadedHeight - interfaceHeight ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
if ( options . innerHeight ) {
settings . h = setSize ( options . innerHeight , 'y' ) ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
if ( ! options . innerHeight && ! options . height ) {
2015-12-30 14:53:02 +01:00
scrolltop = $loaded . scrollTop ( ) ;
2013-02-05 02:09:25 +01:00
$loaded . css ( { height : "auto" } ) ;
settings . h = $loaded . height ( ) ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$loaded . css ( { height : settings . h } ) ;
2015-12-30 14:53:02 +01:00
if ( scrolltop ) {
$loaded . scrollTop ( scrolltop ) ;
}
publicMethod . position ( settings . get ( 'transition' ) === "none" ? 0 : settings . get ( 'speed' ) ) ;
2013-02-05 02:09:25 +01:00
}
} ;
publicMethod . prep = function ( object ) {
if ( ! open ) {
return ;
}
2015-12-30 14:53:02 +01:00
var callback , speed = settings . get ( 'transition' ) === "none" ? 0 : settings . get ( 'speed' ) ;
$loaded . remove ( ) ;
2013-02-05 02:09:25 +01:00
$loaded = $tag ( div , 'LoadedContent' ) . append ( object ) ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
function getWidth ( ) {
settings . w = settings . w || $loaded . width ( ) ;
settings . w = settings . mw && settings . mw < settings . w ? settings . mw : settings . w ;
return settings . w ;
}
function getHeight ( ) {
settings . h = settings . h || $loaded . height ( ) ;
settings . h = settings . mh && settings . mh < settings . h ? settings . mh : settings . h ;
return settings . h ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$loaded . hide ( )
. appendTo ( $loadingBay . show ( ) ) // content has to be appended to the DOM for accurate size calculations.
2015-12-30 14:53:02 +01:00
. css ( { width : getWidth ( ) , overflow : settings . get ( 'scrolling' ) ? 'auto' : 'hidden' } )
2013-02-05 02:09:25 +01:00
. css ( { height : getHeight ( ) } ) // sets the height independently from the width in case the new width influences the value of height.
. prependTo ( $content ) ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$loadingBay . hide ( ) ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
// floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$ ( photo ) . css ( { 'float' : 'none' } ) ;
2015-12-30 14:53:02 +01:00
setClass ( settings . get ( 'className' ) ) ;
2013-02-05 02:09:25 +01:00
callback = function ( ) {
var total = $related . length ,
iframe ,
complete ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
if ( ! open ) {
return ;
}
2015-12-30 14:53:02 +01:00
function removeFilter ( ) { // Needed for IE8 in versions of jQuery prior to 1.7.2
if ( $ . support . opacity === false ) {
2013-02-05 02:09:25 +01:00
$box [ 0 ] . style . removeAttribute ( 'filter' ) ;
}
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
complete = function ( ) {
clearTimeout ( loadingTimer ) ;
2015-12-30 14:53:02 +01:00
$loadingOverlay . hide ( ) ;
trigger ( event _complete ) ;
settings . get ( 'onComplete' ) ;
2013-02-05 02:09:25 +01:00
} ;
2015-12-30 14:53:02 +01:00
$title . html ( settings . get ( 'title' ) ) . show ( ) ;
$loaded . show ( ) ;
2013-02-05 02:09:25 +01:00
if ( total > 1 ) { // handle grouping
2015-12-30 14:53:02 +01:00
if ( typeof settings . get ( 'current' ) === "string" ) {
$current . html ( settings . get ( 'current' ) . replace ( '{current}' , index + 1 ) . replace ( '{total}' , total ) ) . show ( ) ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
$next [ ( settings . get ( 'loop' ) || index < total - 1 ) ? "show" : "hide" ] ( ) . html ( settings . get ( 'next' ) ) ;
$prev [ ( settings . get ( 'loop' ) || index ) ? "show" : "hide" ] ( ) . html ( settings . get ( 'previous' ) ) ;
slideshow ( ) ;
2013-02-05 02:09:25 +01:00
// Preloads images within a rel group
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'preloading' ) ) {
2013-02-05 02:09:25 +01:00
$ . each ( [ getIndex ( - 1 ) , getIndex ( 1 ) ] , function ( ) {
2015-12-30 14:53:02 +01:00
var img ,
2013-02-05 02:09:25 +01:00
i = $related [ this ] ,
2015-12-30 14:53:02 +01:00
settings = new Settings ( i , $ . data ( i , colorbox ) ) ,
src = settings . get ( 'href' ) ;
2013-02-05 02:09:25 +01:00
2015-12-30 14:53:02 +01:00
if ( src && isImage ( settings , src ) ) {
src = retinaUrl ( settings , src ) ;
img = document . createElement ( 'img' ) ;
2013-02-05 02:09:25 +01:00
img . src = src ;
}
} ) ;
}
} else {
$groupControls . hide ( ) ;
}
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'iframe' ) ) {
iframe = settings . get ( 'createIframe' ) ;
if ( ! settings . get ( 'scrolling' ) ) {
2013-02-05 02:09:25 +01:00
iframe . scrolling = "no" ;
}
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$ ( iframe )
. attr ( {
2015-12-30 14:53:02 +01:00
src : settings . get ( 'href' ) ,
'class' : prefix + 'Iframe'
2013-02-05 02:09:25 +01:00
} )
. one ( 'load' , complete )
. appendTo ( $loaded ) ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
$events . one ( event _purge , function ( ) {
iframe . src = "//about:blank" ;
} ) ;
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'fastIframe' ) ) {
2013-02-05 02:09:25 +01:00
$ ( iframe ) . trigger ( 'load' ) ;
}
} else {
complete ( ) ;
}
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'transition' ) === 'fade' ) {
2013-02-05 02:09:25 +01:00
$box . fadeTo ( speed , 1 , removeFilter ) ;
} else {
removeFilter ( ) ;
}
} ;
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'transition' ) === 'fade' ) {
2013-02-05 02:09:25 +01:00
$box . fadeTo ( speed , 0 , function ( ) {
publicMethod . position ( 0 , callback ) ;
} ) ;
} else {
publicMethod . position ( speed , callback ) ;
}
} ;
2015-12-30 14:53:02 +01:00
function load ( ) {
var href , setResize , prep = publicMethod . prep , $inline , request = ++ requests ;
2013-02-05 02:09:25 +01:00
active = true ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
photo = false ;
trigger ( event _purge ) ;
2015-12-30 14:53:02 +01:00
trigger ( event _load ) ;
settings . get ( 'onLoad' ) ;
settings . h = settings . get ( 'height' ) ?
setSize ( settings . get ( 'height' ) , 'y' ) - loadedHeight - interfaceHeight :
settings . get ( 'innerHeight' ) && setSize ( settings . get ( 'innerHeight' ) , 'y' ) ;
settings . w = settings . get ( 'width' ) ?
setSize ( settings . get ( 'width' ) , 'x' ) - loadedWidth - interfaceWidth :
settings . get ( 'innerWidth' ) && setSize ( settings . get ( 'innerWidth' ) , 'x' ) ;
2013-02-05 02:09:25 +01:00
// Sets the minimum dimensions for use in image scaling
settings . mw = settings . w ;
settings . mh = settings . h ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
// Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
// If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'maxWidth' ) ) {
settings . mw = setSize ( settings . get ( 'maxWidth' ) , 'x' ) - loadedWidth - interfaceWidth ;
2013-02-05 02:09:25 +01:00
settings . mw = settings . w && settings . w < settings . mw ? settings . w : settings . mw ;
}
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'maxHeight' ) ) {
settings . mh = setSize ( settings . get ( 'maxHeight' ) , 'y' ) - loadedHeight - interfaceHeight ;
2013-02-05 02:09:25 +01:00
settings . mh = settings . h && settings . h < settings . mh ? settings . h : settings . mh ;
}
2015-12-30 14:53:02 +01:00
href = settings . get ( 'href' ) ;
2013-02-05 02:09:25 +01:00
loadingTimer = setTimeout ( function ( ) {
2015-12-30 14:53:02 +01:00
$loadingOverlay . show ( ) ;
2013-02-05 02:09:25 +01:00
} , 100 ) ;
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'inline' ) ) {
var $target = $ ( href ) ;
2013-02-05 02:09:25 +01:00
// Inserts an empty placeholder where inline content is being pulled from.
2015-12-30 14:53:02 +01:00
// An event is bound to put inline content back when Colorbox closes or loads new content.
$inline = $ ( '<div>' ) . hide ( ) . insertBefore ( $target ) ;
2013-02-05 02:09:25 +01:00
$events . one ( event _purge , function ( ) {
2015-12-30 14:53:02 +01:00
$inline . replaceWith ( $target ) ;
2013-02-05 02:09:25 +01:00
} ) ;
2015-12-30 14:53:02 +01:00
prep ( $target ) ;
} else if ( settings . get ( 'iframe' ) ) {
2013-02-05 02:09:25 +01:00
// IFrame element won't be added to the DOM until it is ready to be displayed,
// to avoid problems with DOM-ready JS that might be trying to run in that iframe.
prep ( " " ) ;
2015-12-30 14:53:02 +01:00
} else if ( settings . get ( 'html' ) ) {
prep ( settings . get ( 'html' ) ) ;
} else if ( isImage ( settings , href ) ) {
href = retinaUrl ( settings , href ) ;
photo = settings . get ( 'createImg' ) ;
$ ( photo )
2013-02-05 02:09:25 +01:00
. addClass ( prefix + 'Photo' )
2015-12-30 14:53:02 +01:00
. bind ( 'error.' + prefix , function ( ) {
prep ( $tag ( div , 'Error' ) . html ( settings . get ( 'imgError' ) ) ) ;
2013-02-05 02:09:25 +01:00
} )
. one ( 'load' , function ( ) {
2015-12-30 14:53:02 +01:00
if ( request !== requests ) {
return ;
}
// A small pause because some browsers will occassionaly report a
// img.width and img.height of zero immediately after the img.onload fires
setTimeout ( function ( ) {
var percent ;
if ( settings . get ( 'retinaImage' ) && window . devicePixelRatio > 1 ) {
photo . height = photo . height / window . devicePixelRatio ;
photo . width = photo . width / window . devicePixelRatio ;
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
if ( settings . get ( 'scalePhotos' ) ) {
setResize = function ( ) {
photo . height -= photo . height * percent ;
photo . width -= photo . width * percent ;
} ;
if ( settings . mw && photo . width > settings . mw ) {
percent = ( photo . width - settings . mw ) / photo . width ;
setResize ( ) ;
}
if ( settings . mh && photo . height > settings . mh ) {
percent = ( photo . height - settings . mh ) / photo . height ;
setResize ( ) ;
}
2013-02-05 02:09:25 +01:00
}
2015-12-30 14:53:02 +01:00
if ( settings . h ) {
photo . style . marginTop = Math . max ( settings . mh - photo . height , 0 ) / 2 + 'px' ;
}
if ( $related [ 1 ] && ( settings . get ( 'loop' ) || $related [ index + 1 ] ) ) {
photo . style . cursor = 'pointer' ;
$ ( photo ) . bind ( 'click.' + prefix , function ( ) {
publicMethod . next ( ) ;
} ) ;
}
photo . style . width = photo . width + 'px' ;
photo . style . height = photo . height + 'px' ;
2013-02-05 02:09:25 +01:00
prep ( photo ) ;
} , 1 ) ;
} ) ;
2015-12-30 14:53:02 +01:00
photo . src = href ;
2013-02-05 02:09:25 +01:00
} else if ( href ) {
2015-12-30 14:53:02 +01:00
$loadingBay . load ( href , settings . get ( 'data' ) , function ( data , status ) {
if ( request === requests ) {
prep ( status === 'error' ? $tag ( div , 'Error' ) . html ( settings . get ( 'xhrError' ) ) : $ ( this ) . contents ( ) ) ;
}
2013-02-05 02:09:25 +01:00
} ) ;
}
2015-12-30 14:53:02 +01:00
}
2013-02-05 02:09:25 +01:00
// Navigates to the next page/image in a set.
publicMethod . next = function ( ) {
2015-12-30 14:53:02 +01:00
if ( ! active && $related [ 1 ] && ( settings . get ( 'loop' ) || $related [ index + 1 ] ) ) {
2013-02-05 02:09:25 +01:00
index = getIndex ( 1 ) ;
2015-12-30 14:53:02 +01:00
launch ( $related [ index ] ) ;
2013-02-05 02:09:25 +01:00
}
} ;
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
publicMethod . prev = function ( ) {
2015-12-30 14:53:02 +01:00
if ( ! active && $related [ 1 ] && ( settings . get ( 'loop' ) || index ) ) {
2013-02-05 02:09:25 +01:00
index = getIndex ( - 1 ) ;
2015-12-30 14:53:02 +01:00
launch ( $related [ index ] ) ;
2013-02-05 02:09:25 +01:00
}
} ;
2015-12-30 14:53:02 +01:00
// Note: to use this within an iframe use the following format: parent.jQuery.colorbox.close();
2013-02-05 02:09:25 +01:00
publicMethod . close = function ( ) {
if ( open && ! closing ) {
2015-12-30 14:53:02 +01:00
2013-02-05 02:09:25 +01:00
closing = true ;
open = false ;
2015-12-30 14:53:02 +01:00
trigger ( event _cleanup ) ;
settings . get ( 'onCleanup' ) ;
$window . unbind ( '.' + prefix ) ;
$overlay . fadeTo ( settings . get ( 'fadeOut' ) || 0 , 0 ) ;
$box . stop ( ) . fadeTo ( settings . get ( 'fadeOut' ) || 0 , 0 , function ( ) {
$box . hide ( ) ;
$overlay . hide ( ) ;
2013-02-05 02:09:25 +01:00
trigger ( event _purge ) ;
2015-12-30 14:53:02 +01:00
$loaded . remove ( ) ;
2013-02-05 02:09:25 +01:00
setTimeout ( function ( ) {
closing = false ;
2015-12-30 14:53:02 +01:00
trigger ( event _closed ) ;
settings . get ( 'onClosed' ) ;
2013-02-05 02:09:25 +01:00
} , 1 ) ;
} ) ;
}
} ;
2015-12-30 14:53:02 +01:00
// Removes changes Colorbox made to the document, but does not remove the plugin.
2013-02-05 02:09:25 +01:00
publicMethod . remove = function ( ) {
2015-12-30 14:53:02 +01:00
if ( ! $box ) { return ; }
$box . stop ( ) ;
$ [ colorbox ] . close ( ) ;
$box . stop ( false , true ) . remove ( ) ;
$overlay . remove ( ) ;
closing = false ;
2013-02-05 02:09:25 +01:00
$box = null ;
$ ( '.' + boxElement )
. removeData ( colorbox )
. removeClass ( boxElement ) ;
2015-12-30 14:53:02 +01:00
$ ( document ) . unbind ( 'click.' + prefix ) . unbind ( 'keydown.' + prefix ) ;
2013-02-05 02:09:25 +01:00
} ;
2015-12-30 14:53:02 +01:00
// A method for fetching the current element Colorbox is referencing.
2013-02-05 02:09:25 +01:00
// returns a jQuery object.
publicMethod . element = function ( ) {
2015-12-30 14:53:02 +01:00
return $ ( settings . el ) ;
2013-02-05 02:09:25 +01:00
} ;
publicMethod . settings = defaults ;
} ( jQuery , document , window ) ) ;