KJ Software and Karaoke Software for the Karaoke Professional and Enthusiast

JavaScript seems to be disabled in your browser.
You must have JavaScript enabled in your browser to utilize the functionality of this website.

20% OFF ALL SOFTWARE PRODUCTS*!
USE PURCHASE CODE "RECOVER20"

CORONAVIRUS UPDATE!

We're all in this together, and together we shall emerge HEALTHY and VICTORIOUS!

Our beloved professional Karaoke hosting industry has always been, and will always remain prosperous and rewarding. A source of fun, laughter and enjoyment to so many, while providing venue owners an affordable and hugely effective means of drawing countless, well paying patrons into their establishments.
Please be assured that as soon as allowed to reopen, venue owners and managers will be eagerly looking for ways to once again fill their establishments, and Karaoke entertainment may be just the ticket. Be ready to address and profit from the need! And in doing our part to help, we're temporarily slashing our prices an unprecedented 20% across the board. So don't wait, get prepared now and SAVE!

This unprecedented, once in our company's history, money saving opportunity may end at any time, SO ACT NOW!

*Subscription based services and already discounted software products excluded. This offer may end at any time without notice.

×

Login Form

E-mail address *

Password *

×

Registration

Profile Informations

First Name *

Last Name *

Subscribe to Newsletter

Login Datas

E-mail address *

Password *

Password confirmation *

I accept the Terms and Coditions

// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function (window) { // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind if (!Function.prototype.bind ) { Function.prototype.bind = function( obj ) { var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function () {}, bound = function () { return self.apply( this instanceof nop ? this : ( obj || {} ), args.concat( slice.call(arguments) ) ); }; nop.prototype = self.prototype; bound.prototype = new nop(); return bound; }; } if (typeof window.Code === "undefined") { window.Code = {}; } window.Code.Util = { /* * Function: registerNamespace */ registerNamespace: function () { var args = arguments, obj = null, i, j, ns, nsParts, root, argsLen, nsPartsLens; for (i=0, argsLen=args.length; i Util.DOM.windowHeight()); } }; Util.Browser._detect(); } ( window, window.Code.Util )) ; // Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function (window, $, Util) { Util.extend(Util, { Events: { /* * Function: add * Add an event handler */ add: function(obj, type, handler){ $(obj).bind(type, handler); }, /* * Function: remove * Removes a handler or all handlers associated with a type */ remove: function(obj, type, handler){ $(obj).unbind(type, handler); }, /* * Function: fire * Fire an event */ fire: function(obj, type){ var event, args = Array.prototype.slice.call(arguments).splice(2); if (typeof type === "string"){ event = { type: type }; } else{ event = type; } $(obj).trigger( $.Event(event.type, event), args); }, /* * Function: getMousePosition */ getMousePosition: function(event){ var retval = { x: event.pageX, y: event.pageY }; return retval; }, /* * Function: getTouchEvent */ getTouchEvent: function(event){ return event.originalEvent; }, /* * Function: getWheelDelta */ getWheelDelta: function(event){ var delta = 0; if (!Util.isNothing(event.wheelDelta)){ delta = event.wheelDelta / 120; } else if (!Util.isNothing(event.detail)){ delta = -event.detail / 3; } return delta; }, /* * Function: domReady */ domReady: function(handler){ $(document).ready(handler); } } }); } ( window, window.jQuery, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function (window, $, Util) { Util.extend(Util, { DOM: { /* * Function: setData */ setData: function(el, key, value){ if (Util.isLikeArray(el)){ var i, len; for (i=0, len=el.length; i'); retval.attr(attributes); retval.append(content); return retval[0]; }, /* * Function: appendChild */ appendChild: function(childEl, parentEl){ $(parentEl).append(childEl); }, /* * Function: insertBefore */ insertBefore: function(newEl, refEl, parentEl){ $(newEl).insertBefore(refEl); }, /* * Function: appendText */ appendText: function(text, parentEl){ $(parentEl).text(text); }, /* * Function: appendToBody */ appendToBody: function(childEl){ $('body').append(childEl); }, /* * Function: removeChild */ removeChild: function(childEl, parentEl){ $(childEl).empty().remove(); }, /* * Function: removeChildren */ removeChildren: function(parentEl){ $(parentEl).empty(); }, /* * Function: hasAttribute */ hasAttribute: function(el, attributeName){ return !Util.isNothing( $(el).attr(attributeName) ); }, /* * Function: getAttribute */ getAttribute: function(el, attributeName, defaultValue){ var retval = $(el).attr(attributeName); if (Util.isNothing(retval) && !Util.isNothing(defaultValue)){ retval = defaultValue; } return retval; }, /* * Function: el, attributeName */ setAttribute: function(el, attributeName, value){ if (Util.isLikeArray(el)){ var i, len; for (i=0, len=el.length; i= 1){ Util.DOM.setStyle(el, 'opacity', 0); } if (Util.Browser.isCSSTransformSupported){ this._applyTransition(el, 'opacity', opacity, speed, callback, timingFunction); } else if (!Util.isNothing(window.jQuery)){ window.jQuery(el).fadeTo(speed, opacity, callback); } }, /* * Function: fadeTo */ fadeTo: function(el, opacity, speed, callback, timingFunction){ this.fadeIn(el, speed, callback, timingFunction, opacity); }, /* * Function: fadeOut */ fadeOut: function(el, speed, callback, timingFunction){ if (speed <= 0){ Util.DOM.setStyle(el, 'opacity', 0); if (!Util.isNothing(callback)){ callback(el); return; } } if (Util.Browser.isCSSTransformSupported){ this._applyTransition(el, 'opacity', 0, speed, callback, timingFunction); } else{ window.jQuery(el).fadeTo(speed, 0, callback); } }, /* * Function: slideBy */ slideBy: function(el, x, y, speed, callback, timingFunction){ var style = {}; x = Util.coalesce(x, 0); y = Util.coalesce(y, 0); timingFunction = Util.coalesce(timingFunction, 'ease-out'); style[this._transitionPrefix + 'Property'] = 'all'; style[this._transitionPrefix + 'Delay'] = '0'; if (speed === 0){ style[this._transitionPrefix + 'Duration'] = ''; style[this._transitionPrefix + 'TimingFunction'] = ''; } else{ style[this._transitionPrefix + 'Duration'] = speed + 'ms'; style[this._transitionPrefix + 'TimingFunction'] = Util.coalesce(timingFunction, 'ease-out'); Util.Events.add(el, this._transitionEndLabel, this._getTransitionEndHandler()); } style[this._transformLabel] = (Util.Browser.is3dSupported) ? 'translate3d(' + x + 'px, ' + y + 'px, 0px)' : 'translate(' + x + 'px, ' + y + 'px)'; if (!Util.isNothing(callback)){ el.cclallcallback = callback; } Util.DOM.setStyle(el, style); if (speed === 0){ window.setTimeout(function(){ this._leaveTransforms(el); }.bind(this), this._applyTransitionDelay); } }, /* * Function: */ resetTranslate: function(el){ var style = {}; style[this._transformLabel] = style[this._transformLabel] = (Util.Browser.is3dSupported) ? 'translate3d(0px, 0px, 0px)' : 'translate(0px, 0px)'; Util.DOM.setStyle(el, style); }, /* * Function: _applyTransition */ _applyTransition: function(el, property, val, speed, callback, timingFunction){ var style = {}; timingFunction = Util.coalesce(timingFunction, 'ease-in'); style[this._transitionPrefix + 'Property'] = property; style[this._transitionPrefix + 'Duration'] = speed + 'ms'; style[this._transitionPrefix + 'TimingFunction'] = timingFunction; style[this._transitionPrefix + 'Delay'] = '0'; Util.Events.add(el, this._transitionEndLabel, this._getTransitionEndHandler()); Util.DOM.setStyle(el, style); if (!Util.isNothing(callback)){ el['ccl' + property + 'callback'] = callback; } window.setTimeout(function(){ Util.DOM.setStyle(el, property, val); }, this._applyTransitionDelay); }, /* * Function: _onTransitionEnd */ _onTransitionEnd: function(e){ Util.Events.remove(e.currentTarget, this._transitionEndLabel, this._getTransitionEndHandler()); this._leaveTransforms(e.currentTarget); }, /* * Function: _leaveTransforms */ _leaveTransforms: function(el){ var property = el.style[this._transitionPrefix + 'Property'], callbackLabel = (property !== '') ? 'ccl' + property + 'callback' : 'cclallcallback', callback, transform = Util.coalesce(el.style.webkitTransform, el.style.MozTransform, el.style.transform), transformMatch, transformExploded, domX = window.parseInt(Util.DOM.getStyle(el, 'left'), 0), domY = window.parseInt(Util.DOM.getStyle(el, 'top'), 0), transformedX, transformedY, style = {}; if (transform !== ''){ if (Util.Browser.is3dSupported){ transformMatch = transform.match( /translate3d\((.*?)\)/ ); } else{ transformMatch = transform.match( /translate\((.*?)\)/ ); } if (!Util.isNothing(transformMatch)){ transformExploded = transformMatch[1].split(', '); transformedX = window.parseInt(transformExploded[0], 0); transformedY = window.parseInt(transformExploded[1], 0); } } style[this._transitionPrefix + 'Property'] = ''; style[this._transitionPrefix + 'Duration'] = ''; style[this._transitionPrefix + 'TimingFunction'] = ''; style[this._transitionPrefix + 'Delay'] = ''; Util.DOM.setStyle(el, style); window.setTimeout(function(){ if(!Util.isNothing(transformExploded)){ style = {}; style[this._transformLabel] = ''; style.left = (domX + transformedX) + 'px'; style.top = (domY + transformedY) + 'px'; Util.DOM.setStyle(el, style); } if (!Util.isNothing(el[callbackLabel])){ callback = el[callbackLabel]; delete el[callbackLabel]; callback(el); } }.bind(this), this._applyTransitionDelay); } } }); } ( window, window.Code.Util )); // Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.Util.TouchElement'); Util.TouchElement.EventTypes = { onTouch: 'CodeUtilTouchElementOnTouch' }; Util.TouchElement.ActionTypes = { touchStart: 'touchStart', touchMove: 'touchMove', touchEnd: 'touchEnd', touchMoveEnd: 'touchMoveEnd', tap: 'tap', doubleTap: 'doubleTap', swipeLeft: 'swipeLeft', swipeRight: 'swipeRight', swipeUp: 'swipeUp', swipeDown: 'swipeDown', gestureStart: 'gestureStart', gestureChange: 'gestureChange', gestureEnd: 'gestureEnd' }; } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.Util.TouchElement'); Util.TouchElement.TouchElementClass = klass({ el: null, captureSettings: null, touchStartPoint: null, touchEndPoint: null, touchStartTime: null, doubleTapTimeout: null, touchStartHandler: null, touchMoveHandler: null, touchEndHandler: null, mouseDownHandler: null, mouseMoveHandler: null, mouseUpHandler: null, mouseOutHandler: null, gestureStartHandler: null, gestureChangeHandler: null, gestureEndHandler: null, swipeThreshold: null, swipeTimeThreshold: null, doubleTapSpeed: null, /* * Function: dispose */ dispose: function(){ var prop; this.removeEventHandlers(); for (prop in this) { if (Util.objectHasProperty(this, prop)) { this[prop] = null; } } }, /* * Function: initialize */ initialize: function(el, captureSettings){ this.el = el; this.captureSettings = { swipe: false, move: false, gesture: false, doubleTap: false, preventDefaultTouchEvents: true }; Util.extend(this.captureSettings, captureSettings); this.swipeThreshold = 50; this.swipeTimeThreshold = 250; this.doubleTapSpeed = 250; this.touchStartPoint = { x: 0, y: 0 }; this.touchEndPoint = { x: 0, y: 0 }; }, /* * Function: addEventHandlers */ addEventHandlers: function(){ if (Util.isNothing(this.touchStartHandler)){ this.touchStartHandler = this.onTouchStart.bind(this); this.touchMoveHandler = this.onTouchMove.bind(this); this.touchEndHandler = this.onTouchEnd.bind(this); this.mouseDownHandler = this.onMouseDown.bind(this); this.mouseMoveHandler = this.onMouseMove.bind(this); this.mouseUpHandler = this.onMouseUp.bind(this); this.mouseOutHandler = this.onMouseOut.bind(this); this.gestureStartHandler = this.onGestureStart.bind(this); this.gestureChangeHandler = this.onGestureChange.bind(this); this.gestureEndHandler = this.onGestureEnd.bind(this); } Util.Events.add(this.el, 'touchstart', this.touchStartHandler); if (this.captureSettings.move){ Util.Events.add(this.el, 'touchmove', this.touchMoveHandler); } Util.Events.add(this.el, 'touchend', this.touchEndHandler); Util.Events.add(this.el, 'mousedown', this.mouseDownHandler); if (Util.Browser.isGestureSupported && this.captureSettings.gesture){ Util.Events.add(this.el, 'gesturestart', this.gestureStartHandler); Util.Events.add(this.el, 'gesturechange', this.gestureChangeHandler); Util.Events.add(this.el, 'gestureend', this.gestureEndHandler); } }, /* * Function: removeEventHandlers */ removeEventHandlers: function(){ Util.Events.remove(this.el, 'touchstart', this.touchStartHandler); if (this.captureSettings.move){ Util.Events.remove(this.el, 'touchmove', this.touchMoveHandler); } Util.Events.remove(this.el, 'touchend', this.touchEndHandler); Util.Events.remove(this.el, 'mousedown', this.mouseDownHandler); if (Util.Browser.isGestureSupported && this.captureSettings.gesture){ Util.Events.remove(this.el, 'gesturestart', this.gestureStartHandler); Util.Events.remove(this.el, 'gesturechange', this.gestureChangeHandler); Util.Events.remove(this.el, 'gestureend', this.gestureEndHandler); } }, /* * Function: getTouchPoint */ getTouchPoint: function(touches){ return { x: touches[0].pageX, y: touches[0].pageY }; }, /* * Function: fireTouchEvent */ fireTouchEvent: function(e){ var action, distX = 0, distY = 0, dist = 0, self, endTime, diffTime; distX = this.touchEndPoint.x - this.touchStartPoint.x; distY = this.touchEndPoint.y - this.touchStartPoint.y; dist = Math.sqrt( (distX * distX) + (distY * distY) ); if (this.captureSettings.swipe){ endTime = new Date(); diffTime = endTime - this.touchStartTime; // See if there was a swipe gesture if (diffTime <= this.swipeTimeThreshold){ if (window.Math.abs(distX) >= this.swipeThreshold){ Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, point: this.touchEndPoint, action: (distX < 0) ? Util.TouchElement.ActionTypes.swipeLeft : Util.TouchElement.ActionTypes.swipeRight, targetEl: e.target, currentTargetEl: e.currentTarget }); return; } if (window.Math.abs(distY) >= this.swipeThreshold){ Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, point: this.touchEndPoint, action: (distY < 0) ? Util.TouchElement.ActionTypes.swipeUp : Util.TouchElement.ActionTypes.swipeDown, targetEl: e.target, currentTargetEl: e.currentTarget }); return; } } } if (dist > 1){ Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchMoveEnd, point: this.touchEndPoint, targetEl: e.target, currentTargetEl: e.currentTarget }); return; } if (!this.captureSettings.doubleTap){ Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, point: this.touchEndPoint, action: Util.TouchElement.ActionTypes.tap, targetEl: e.target, currentTargetEl: e.currentTarget }); return; } if (Util.isNothing(this.doubleTapTimeout)){ this.doubleTapTimeout = window.setTimeout(function(){ this.doubleTapTimeout = null; Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, point: this.touchEndPoint, action: Util.TouchElement.ActionTypes.tap, targetEl: e.target, currentTargetEl: e.currentTarget }); }.bind(this), this.doubleTapSpeed); return; } else{ window.clearTimeout(this.doubleTapTimeout); this.doubleTapTimeout = null; Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, point: this.touchEndPoint, action: Util.TouchElement.ActionTypes.doubleTap, targetEl: e.target, currentTargetEl: e.currentTarget }); } }, /* * Function: onTouchStart */ onTouchStart: function(e){ if (this.captureSettings.preventDefaultTouchEvents){ e.preventDefault(); } // No longer need mouse events Util.Events.remove(this.el, 'mousedown', this.mouseDownHandler); var touchEvent = Util.Events.getTouchEvent(e), touches = touchEvent.touches; if (touches.length > 1 && this.captureSettings.gesture){ this.isGesture = true; return; } this.touchStartTime = new Date(); this.isGesture = false; this.touchStartPoint = this.getTouchPoint(touches); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchStart, point: this.touchStartPoint, targetEl: e.target, currentTargetEl: e.currentTarget }); }, /* * Function: onTouchMove */ onTouchMove: function(e){ if (this.captureSettings.preventDefaultTouchEvents){ e.preventDefault(); } if (this.isGesture && this.captureSettings.gesture){ return; } var touchEvent = Util.Events.getTouchEvent(e), touches = touchEvent.touches; Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchMove, point: this.getTouchPoint(touches), targetEl: e.target, currentTargetEl: e.currentTarget }); }, /* * Function: onTouchEnd */ onTouchEnd: function(e){ if (this.isGesture && this.captureSettings.gesture){ return; } if (this.captureSettings.preventDefaultTouchEvents){ e.preventDefault(); } // http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html // iOS removed the current touch from e.touches on "touchend" // Need to look into e.changedTouches var touchEvent = Util.Events.getTouchEvent(e), touches = (!Util.isNothing(touchEvent.changedTouches)) ? touchEvent.changedTouches : touchEvent.touches; this.touchEndPoint = this.getTouchPoint(touches); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchEnd, point: this.touchEndPoint, targetEl: e.target, currentTargetEl: e.currentTarget }); this.fireTouchEvent(e); }, /* * Function: onMouseDown */ onMouseDown: function(e){ e.preventDefault(); // No longer need touch events Util.Events.remove(this.el, 'touchstart', this.mouseDownHandler); Util.Events.remove(this.el, 'touchmove', this.touchMoveHandler); Util.Events.remove(this.el, 'touchend', this.touchEndHandler); // Add move/up/out if (this.captureSettings.move){ Util.Events.add(this.el, 'mousemove', this.mouseMoveHandler); } Util.Events.add(this.el, 'mouseup', this.mouseUpHandler); Util.Events.add(this.el, 'mouseout', this.mouseOutHandler); this.touchStartTime = new Date(); this.isGesture = false; this.touchStartPoint = Util.Events.getMousePosition(e); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchStart, point: this.touchStartPoint, targetEl: e.target, currentTargetEl: e.currentTarget }); }, /* * Function: onMouseMove */ onMouseMove: function(e){ e.preventDefault(); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchMove, point: Util.Events.getMousePosition(e), targetEl: e.target, currentTargetEl: e.currentTarget }); }, /* * Function: onMouseUp */ onMouseUp: function(e){ e.preventDefault(); if (this.captureSettings.move){ Util.Events.remove(this.el, 'mousemove', this.mouseMoveHandler); } Util.Events.remove(this.el, 'mouseup', this.mouseUpHandler); Util.Events.remove(this.el, 'mouseout', this.mouseOutHandler); this.touchEndPoint = Util.Events.getMousePosition(e); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchEnd, point: this.touchEndPoint, targetEl: e.target, currentTargetEl: e.currentTarget }); this.fireTouchEvent(e); }, /* * Function: onMouseOut */ onMouseOut: function(e){ /* * http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/ */ var relTarget = e.relatedTarget; if (this.el === relTarget || Util.DOM.isChildOf(relTarget, this.el)){ return; } e.preventDefault(); if (this.captureSettings.move){ Util.Events.remove(this.el, 'mousemove', this.mouseMoveHandler); } Util.Events.remove(this.el, 'mouseup', this.mouseUpHandler); Util.Events.remove(this.el, 'mouseout', this.mouseOutHandler); this.touchEndPoint = Util.Events.getMousePosition(e); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.touchEnd, point: this.touchEndPoint, targetEl: e.target, currentTargetEl: e.currentTarget }); this.fireTouchEvent(e); }, /* * Function: onGestureStart */ onGestureStart: function(e){ e.preventDefault(); var touchEvent = Util.Events.getTouchEvent(e); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.gestureStart, scale: touchEvent.scale, rotation: touchEvent.rotation, targetEl: e.target, currentTargetEl: e.currentTarget }); }, /* * Function: onGestureChange */ onGestureChange: function(e){ e.preventDefault(); var touchEvent = Util.Events.getTouchEvent(e); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.gestureChange, scale: touchEvent.scale, rotation: touchEvent.rotation, targetEl: e.target, currentTargetEl: e.currentTarget }); }, /* * Function: onGestureEnd */ onGestureEnd: function(e){ e.preventDefault(); var touchEvent = Util.Events.getTouchEvent(e); Util.Events.fire(this, { type: Util.TouchElement.EventTypes.onTouch, target: this, action: Util.TouchElement.ActionTypes.gestureEnd, scale: touchEvent.scale, rotation: touchEvent.rotation, targetEl: e.target, currentTargetEl: e.currentTarget }); } }); } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.Image'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Image.EventTypes = { onLoad: 'onLoad', onError: 'onError' }; } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.Image'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Image.ImageClass = klass({ refObj: null, imageEl: null, src: null, caption: null, metaData: null, imageLoadHandler: null, imageErrorHandler: null, /* * Function: dispose */ dispose: function(){ var prop, i; this.shrinkImage(); for (prop in this) { if (Util.objectHasProperty(this, prop)) { this[prop] = null; } } }, /* * Function: initialize */ initialize: function(refObj, src, caption, metaData){ this.refObj = refObj; // This is needed. Webkit resolves the src // value which means we can't compare against it in the load function this.originalSrc = src; this.src = src; this.caption = caption; this.metaData = metaData; this.imageEl = new window.Image(); this.imageLoadHandler = this.onImageLoad.bind(this); this.imageErrorHandler = this.onImageError.bind(this); }, /* * Function: load */ load: function(){ this.imageEl.originalSrc = Util.coalesce(this.imageEl.originalSrc, ''); if (this.imageEl.originalSrc === this.src){ if (this.imageEl.isError){ Util.Events.fire(this, { type: PhotoSwipe.Image.EventTypes.onError, target: this }); } else{ Util.Events.fire(this, { type: PhotoSwipe.Image.EventTypes.onLoad, target: this }); } return; } this.imageEl.isError = false; this.imageEl.isLoading = true; this.imageEl.naturalWidth = null; this.imageEl.naturalHeight = null; this.imageEl.isLandscape = false; this.imageEl.onload = this.imageLoadHandler; this.imageEl.onerror = this.imageErrorHandler; this.imageEl.onabort = this.imageErrorHandler; this.imageEl.originalSrc = this.src; this.imageEl.src = this.src; }, /* * Function: shrinkImage */ shrinkImage: function(){ if (Util.isNothing(this.imageEl)){ return; } if (this.imageEl.src.indexOf(this.src) > -1){ this.imageEl.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='; if (!Util.isNothing(this.imageEl.parentNode)){ Util.DOM.removeChild(this.imageEl, this.imageEl.parentNode); } } }, /* * Function: onImageLoad */ onImageLoad: function(e){ this.imageEl.onload = null; this.imageEl.naturalWidth = Util.coalesce(this.imageEl.naturalWidth, this.imageEl.width); this.imageEl.naturalHeight = Util.coalesce(this.imageEl.naturalHeight, this.imageEl.height); this.imageEl.isLandscape = (this.imageEl.naturalWidth > this.imageEl.naturalHeight); this.imageEl.isLoading = false; Util.Events.fire(this, { type: PhotoSwipe.Image.EventTypes.onLoad, target: this }); }, /* * Function: onImageError */ onImageError: function(e){ this.imageEl.onload = null; this.imageEl.onerror = null; this.imageEl.onabort = null; this.imageEl.isLoading = false; this.imageEl.isError = true; Util.Events.fire(this, { type: PhotoSwipe.Image.EventTypes.onError, target: this }); } }); } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.Cache'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Cache.Mode = { normal: 'normal', aggressive: 'aggressive' }; PhotoSwipe.Cache.Functions = { /* * Function: getImageSource * Default method for returning an image's source */ getImageSource: function(el){ return el.href; }, /* * Function: getImageCaption * Default method for returning an image's caption * Assumes the el is an anchor and the first child is the * image. The returned value is the "alt" attribute of the * image. */ getImageCaption: function(el){ if (el.nodeName === "IMG"){ return Util.DOM.getAttribute(el, 'alt'); } var i, j, childEl; for (i=0, j=el.childNodes.length; i height){ height = Util.DOM.windowHeight(); } } else{ width = Util.DOM.width(this.settings.target); height = Util.DOM.height(this.settings.target); top = '0px'; } Util.DOM.setStyle(this.el, { width: width, height: height, top: top }); }, /* * Function: fadeIn */ fadeIn: function(speed, callback){ this.resetPosition(); Util.DOM.setStyle(this.el, 'opacity', 0); Util.DOM.show(this.el); Util.Animation.fadeIn(this.el, speed, callback); } }); } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.Carousel'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Carousel.EventTypes = { onSlideByEnd: 'PhotoSwipeCarouselOnSlideByEnd', onSlideshowStart: 'PhotoSwipeCarouselOnSlideshowStart', onSlideshowStop: 'PhotoSwipeCarouselOnSlideshowStop' }; PhotoSwipe.Carousel.CssClasses = { carousel: 'ps-carousel', content: 'ps-carousel-content', item: 'ps-carousel-item', itemLoading: 'ps-carousel-item-loading', itemError: 'ps-carousel-item-error' }; PhotoSwipe.Carousel.SlideByAction = { previous: 'previous', current: 'current', next: 'next' }; } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.Carousel'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Carousel.CarouselClass = klass({ el: null, contentEl: null, settings: null, cache: null, slideByEndHandler: null, currentCacheIndex: null, isSliding: null, isSlideshowActive: null, lastSlideByAction: null, touchStartPoint: null, touchStartPosition: null, imageLoadHandler: null, imageErrorHandler: null, slideshowTimeout: null, /* * Function: dispose */ dispose: function(){ var prop, i, j; for (i=0, j=this.cache.images.length; i 0){ Util.DOM.setStyle(itemEl, { marginRight: this.settings.margin + 'px' }); } Util.DOM.appendChild(itemEl, this.contentEl); } if (this.settings.target === window){ Util.DOM.appendToBody(this.el); } else{ Util.DOM.appendChild(this.el, this.settings.target); } }, /* * Function: resetPosition */ resetPosition: function(){ var width, height, top, itemWidth, itemEls, contentWidth, i, j, itemEl, imageEl; if (this.settings.target === window){ width = Util.DOM.windowWidth(); height = Util.DOM.windowHeight(); top = Util.DOM.windowScrollTop() + 'px'; } else{ width = Util.DOM.width(this.settings.target); height = Util.DOM.height(this.settings.target); top = '0px'; } itemWidth = (this.settings.margin > 0) ? width + this.settings.margin : width; itemEls = Util.DOM.find('.' + PhotoSwipe.Carousel.CssClasses.item, this.contentEl); contentWidth = itemWidth * itemEls.length; // Set the height and width to fill the document Util.DOM.setStyle(this.el, { top: top, width: width, height: height }); // Set the height and width of the content el Util.DOM.setStyle(this.contentEl, { width: contentWidth, height: height }); // Set the height and width of item elements for (i=0, j=itemEls.length; i maxWidth){ scale = maxWidth / newWidth; newWidth = Math.round(newWidth * scale); newHeight = Math.round(newHeight * scale); } if (newHeight > maxHeight){ scale = maxHeight / newHeight; newHeight = Math.round(newHeight * scale); newWidth = Math.round(newWidth * scale); } } else{ if (imageEl.isLandscape) { // Ensure the width fits the screen scale = maxWidth / imageEl.naturalWidth; } else { // Ensure the height fits the screen scale = maxHeight / imageEl.naturalHeight; } newWidth = Math.round(imageEl.naturalWidth * scale); newHeight = Math.round(imageEl.naturalHeight * scale); if (this.settings.imageScaleMethod === 'zoom'){ scale = 1; if (newHeight < maxHeight){ scale = maxHeight /newHeight; } else if (newWidth < maxWidth){ scale = maxWidth /newWidth; } if (scale !== 1) { newWidth = Math.round(newWidth * scale); newHeight = Math.round(newHeight * scale); } } else if (this.settings.imageScaleMethod === 'fit') { // Rescale again to ensure full image fits into the viewport scale = 1; if (newWidth > maxWidth) { scale = maxWidth / newWidth; } else if (newHeight > maxHeight) { scale = maxHeight / newHeight; } if (scale !== 1) { newWidth = Math.round(newWidth * scale); newHeight = Math.round(newHeight * scale); } } } newTop = Math.round( ((maxHeight - newHeight) / 2) ) + 'px'; newLeft = Math.round( ((maxWidth - newWidth) / 2) ) + 'px'; Util.DOM.setStyle(imageEl, { position: 'absolute', width: newWidth, height: newHeight, top: newTop, left: newLeft, display: 'block' }); }, /* * Function: setContentLeftPosition */ setContentLeftPosition: function(){ var width, itemEls, left; if (this.settings.target === window){ width = Util.DOM.windowWidth(); } else{ width = Util.DOM.width(this.settings.target); } itemEls = this.getItemEls(); left = 0; if (this.settings.loop){ left = (width + this.settings.margin) * -1; } else{ if (this.currentCacheIndex === this.cache.images.length-1){ left = ((itemEls.length-1) * (width + this.settings.margin)) * -1; } else if (this.currentCacheIndex > 0){ left = (width + this.settings.margin) * -1; } } Util.DOM.setStyle(this.contentEl, { left: left + 'px' }); }, /* * Function: */ show: function(index){ this.currentCacheIndex = index; this.resetPosition(); this.setImages(false); Util.DOM.show(this.el); Util.Animation.resetTranslate(this.contentEl); var itemEls = this.getItemEls(), i, j; for (i=0, j=itemEls.length; i this.cache.images.length-1){ nextCacheIndex = 0; } if (previousCacheIndex < 0){ previousCacheIndex = this.cache.images.length-1; } cacheImages = this.cache.getImages([ previousCacheIndex, this.currentCacheIndex, nextCacheIndex ]); if (!ignoreCurrent){ // Current this.addCacheImageToItemEl(cacheImages[1], itemEls[1]); } // Next this.addCacheImageToItemEl(cacheImages[2], itemEls[2]); // Previous this.addCacheImageToItemEl(cacheImages[0], itemEls[0]); } else{ if (itemEls.length === 1){ if (!ignoreCurrent){ // Current cacheImages = this.cache.getImages([ this.currentCacheIndex ]); this.addCacheImageToItemEl(cacheImages[0], itemEls[0]); } } else if (itemEls.length === 2){ if (this.currentCacheIndex === 0){ cacheImages = this.cache.getImages([ this.currentCacheIndex, this.currentCacheIndex + 1 ]); if (!ignoreCurrent){ this.addCacheImageToItemEl(cacheImages[0], itemEls[0]); } this.addCacheImageToItemEl(cacheImages[1], itemEls[1]); } else{ cacheImages = this.cache.getImages([ this.currentCacheIndex - 1, this.currentCacheIndex ]); if (!ignoreCurrent){ this.addCacheImageToItemEl(cacheImages[1], itemEls[1]); } this.addCacheImageToItemEl(cacheImages[0], itemEls[0]); } } else{ if (this.currentCacheIndex === 0){ cacheImages = this.cache.getImages([ this.currentCacheIndex, this.currentCacheIndex + 1, this.currentCacheIndex + 2 ]); if (!ignoreCurrent){ this.addCacheImageToItemEl(cacheImages[0], itemEls[0]); } this.addCacheImageToItemEl(cacheImages[1], itemEls[1]); this.addCacheImageToItemEl(cacheImages[2], itemEls[2]); } else if (this.currentCacheIndex === this.cache.images.length-1){ cacheImages = this.cache.getImages([ this.currentCacheIndex - 2, this.currentCacheIndex - 1, this.currentCacheIndex ]); if (!ignoreCurrent){ // Current this.addCacheImageToItemEl(cacheImages[2], itemEls[2]); } this.addCacheImageToItemEl(cacheImages[1], itemEls[1]); this.addCacheImageToItemEl(cacheImages[0], itemEls[0]); } else{ cacheImages = this.cache.getImages([ this.currentCacheIndex - 1, this.currentCacheIndex, this.currentCacheIndex + 1 ]); if (!ignoreCurrent){ // Current this.addCacheImageToItemEl(cacheImages[1], itemEls[1]); } // Next this.addCacheImageToItemEl(cacheImages[2], itemEls[2]); // Previous this.addCacheImageToItemEl(cacheImages[0], itemEls[0]); } } } }, /* * Function: addCacheImageToItemEl */ addCacheImageToItemEl: function(cacheImage, itemEl){ Util.DOM.removeClass(itemEl, PhotoSwipe.Carousel.CssClasses.itemError); Util.DOM.addClass(itemEl, PhotoSwipe.Carousel.CssClasses.itemLoading); Util.DOM.removeChildren(itemEl); Util.DOM.setStyle(cacheImage.imageEl, { display: 'none' }); Util.DOM.appendChild(cacheImage.imageEl, itemEl); Util.Animation.resetTranslate(cacheImage.imageEl); Util.Events.add(cacheImage, PhotoSwipe.Image.EventTypes.onLoad, this.imageLoadHandler); Util.Events.add(cacheImage, PhotoSwipe.Image.EventTypes.onError, this.imageErrorHandler); cacheImage.load(); }, /* * Function: slideCarousel */ slideCarousel: function(point, action, speed){ if (this.isSliding){ return; } var width, diffX, slideBy; if (this.settings.target === window){ width = Util.DOM.windowWidth() + this.settings.margin; } else{ width = Util.DOM.width(this.settings.target) + this.settings.margin; } speed = Util.coalesce(speed, this.settings.slideSpeed); if (window.Math.abs(diffX) < 1){ return; } switch (action){ case Util.TouchElement.ActionTypes.swipeLeft: slideBy = width * -1; break; case Util.TouchElement.ActionTypes.swipeRight: slideBy = width; break; default: diffX = point.x - this.touchStartPoint.x; if (window.Math.abs(diffX) > width / 2){ slideBy = (diffX > 0) ? width : width * -1; } else{ slideBy = 0; } break; } if (slideBy < 0){ this.lastSlideByAction = PhotoSwipe.Carousel.SlideByAction.next; } else if (slideBy > 0){ this.lastSlideByAction = PhotoSwipe.Carousel.SlideByAction.previous; } else{ this.lastSlideByAction = PhotoSwipe.Carousel.SlideByAction.current; } // Check for non-looping carousels // If we are at the start or end, spring back to the current item element if (!this.settings.loop){ if ( (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.previous && this.currentCacheIndex === 0 ) || (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.next && this.currentCacheIndex === this.cache.images.length-1) ){ slideBy = 0; this.lastSlideByAction = PhotoSwipe.Carousel.SlideByAction.current; } } this.isSliding = true; this.doSlideCarousel(slideBy, speed); }, /* * Function: */ moveCarousel: function(point){ if (this.isSliding){ return; } if (!this.settings.enableDrag){ return; } this.doMoveCarousel(point.x - this.touchStartPoint.x); }, /* * Function: getItemEls */ getItemEls: function(){ return Util.DOM.find('.' + PhotoSwipe.Carousel.CssClasses.item, this.contentEl); }, /* * Function: previous */ previous: function(){ this.stopSlideshow(); this.slideCarousel({x:0, y:0}, Util.TouchElement.ActionTypes.swipeRight, this.settings.nextPreviousSlideSpeed); }, /* * Function: next */ next: function(){ this.stopSlideshow(); this.slideCarousel({x:0, y:0}, Util.TouchElement.ActionTypes.swipeLeft, this.settings.nextPreviousSlideSpeed); }, /* * Function: slideshowNext */ slideshowNext: function(){ this.slideCarousel({x:0, y:0}, Util.TouchElement.ActionTypes.swipeLeft); }, /* * Function: startSlideshow */ startSlideshow: function(){ this.stopSlideshow(); this.isSlideshowActive = true; this.slideshowTimeout = window.setTimeout(this.slideshowNext.bind(this), this.settings.slideshowDelay); Util.Events.fire(this, { type: PhotoSwipe.Carousel.EventTypes.onSlideshowStart, target: this }); }, /* * Function: stopSlideshow */ stopSlideshow: function(){ if (!Util.isNothing(this.slideshowTimeout)){ window.clearTimeout(this.slideshowTimeout); this.slideshowTimeout = null; this.isSlideshowActive = false; Util.Events.fire(this, { type: PhotoSwipe.Carousel.EventTypes.onSlideshowStop, target: this }); } }, /* * Function: onSlideByEnd */ onSlideByEnd: function(e){ if (Util.isNothing(this.isSliding)){ return; } var itemEls = this.getItemEls(); this.isSliding = false; if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.next){ this.currentCacheIndex = this.currentCacheIndex + 1; } else if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.previous){ this.currentCacheIndex = this.currentCacheIndex - 1; } if (this.settings.loop){ if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.next){ // Move first to the last Util.DOM.appendChild(itemEls[0], this.contentEl); } else if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.previous){ // Move the last to the first Util.DOM.insertBefore(itemEls[itemEls.length-1], itemEls[0], this.contentEl); } if (this.currentCacheIndex < 0){ this.currentCacheIndex = this.cache.images.length - 1; } else if (this.currentCacheIndex === this.cache.images.length){ this.currentCacheIndex = 0; } } else{ if (this.cache.images.length > 3){ if (this.currentCacheIndex > 1 && this.currentCacheIndex < this.cache.images.length-2){ if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.next){ // Move first to the last Util.DOM.appendChild(itemEls[0], this.contentEl); } else if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.previous){ // Move the last to the first Util.DOM.insertBefore(itemEls[itemEls.length-1], itemEls[0], this.contentEl); } } else if (this.currentCacheIndex === 1){ if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.previous){ // Move the last to the first Util.DOM.insertBefore(itemEls[itemEls.length-1], itemEls[0], this.contentEl); } } else if (this.currentCacheIndex === this.cache.images.length-2){ if (this.lastSlideByAction === PhotoSwipe.Carousel.SlideByAction.next){ // Move first to the last Util.DOM.appendChild(itemEls[0], this.contentEl); } } } } if (this.lastSlideByAction !== PhotoSwipe.Carousel.SlideByAction.current){ this.setContentLeftPosition(); this.setImages(true); } Util.Events.fire(this, { type: PhotoSwipe.Carousel.EventTypes.onSlideByEnd, target: this, action: this.lastSlideByAction, cacheIndex: this.currentCacheIndex }); if (this.isSlideshowActive){ if (this.lastSlideByAction !== PhotoSwipe.Carousel.SlideByAction.current){ this.startSlideshow(); } else{ this.stopSlideshow(); } } }, /* * Function: onTouch */ onTouch: function(action, point){ this.stopSlideshow(); switch(action){ case Util.TouchElement.ActionTypes.touchStart: this.touchStartPoint = point; this.touchStartPosition = { x: window.parseInt(Util.DOM.getStyle(this.contentEl, 'left'), 0), y: window.parseInt(Util.DOM.getStyle(this.contentEl, 'top'), 0) }; break; case Util.TouchElement.ActionTypes.touchMove: this.moveCarousel(point); break; case Util.TouchElement.ActionTypes.touchMoveEnd: case Util.TouchElement.ActionTypes.swipeLeft: case Util.TouchElement.ActionTypes.swipeRight: this.slideCarousel(point, action); break; case Util.TouchElement.ActionTypes.tap: break; case Util.TouchElement.ActionTypes.doubleTap: break; } }, /* * Function: onImageLoad */ onImageLoad: function(e){ var cacheImage = e.target; if (!Util.isNothing(cacheImage.imageEl.parentNode)){ Util.DOM.removeClass(cacheImage.imageEl.parentNode, PhotoSwipe.Carousel.CssClasses.itemLoading); this.resetImagePosition(cacheImage.imageEl); } Util.Events.remove(cacheImage, PhotoSwipe.Image.EventTypes.onLoad, this.imageLoadHandler); Util.Events.remove(cacheImage, PhotoSwipe.Image.EventTypes.onError, this.imageErrorHandler); }, /* * Function: onImageError */ onImageError: function(e){ var cacheImage = e.target; if (!Util.isNothing(cacheImage.imageEl.parentNode)){ Util.DOM.removeClass(cacheImage.imageEl.parentNode, PhotoSwipe.Carousel.CssClasses.itemLoading); Util.DOM.addClass(cacheImage.imageEl.parentNode, PhotoSwipe.Carousel.CssClasses.itemError); } Util.Events.remove(cacheImage, PhotoSwipe.Image.EventTypes.onLoad, this.imageLoadHandler); Util.Events.remove(cacheImage, PhotoSwipe.Image.EventTypes.onError, this.imageErrorHandler); } }); } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util, TouchElement){ Util.registerNamespace('Code.PhotoSwipe.Carousel'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Carousel.CarouselClass = PhotoSwipe.Carousel.CarouselClass.extend({ /* * Function: getStartingPos */ getStartingPos: function(){ var startingPos = this.touchStartPosition; if (Util.isNothing(startingPos)){ startingPos = { x: window.parseInt(Util.DOM.getStyle(this.contentEl, 'left'), 0), y: window.parseInt(Util.DOM.getStyle(this.contentEl, 'top'), 0) }; } return startingPos; }, /* * Function: doMoveCarousel */ doMoveCarousel: function(xVal){ var style; if (Util.Browser.isCSSTransformSupported){ style = {}; style[Util.Animation._transitionPrefix + 'Property'] = 'all'; style[Util.Animation._transitionPrefix + 'Duration'] = ''; style[Util.Animation._transitionPrefix + 'TimingFunction'] = ''; style[Util.Animation._transitionPrefix + 'Delay'] = '0'; style[Util.Animation._transformLabel] = (Util.Browser.is3dSupported) ? 'translate3d(' + xVal + 'px, 0px, 0px)' : 'translate(' + xVal + 'px, 0px)'; Util.DOM.setStyle(this.contentEl, style); } else if (!Util.isNothing(window.jQuery)){ window.jQuery(this.contentEl).stop().css('left', this.getStartingPos().x + xVal + 'px'); } }, /* * Function: doSlideCarousel */ doSlideCarousel: function(xVal, speed){ var animateProps, transform; if (speed <= 0){ this.slideByEndHandler(); return; } if (Util.Browser.isCSSTransformSupported){ transform = Util.coalesce(this.contentEl.style.webkitTransform, this.contentEl.style.MozTransform, this.contentEl.style.transform, ''); if (transform.indexOf('translate3d(' + xVal) === 0){ this.slideByEndHandler(); return; } else if (transform.indexOf('translate(' + xVal) === 0){ this.slideByEndHandler(); return; } Util.Animation.slideBy(this.contentEl, xVal, 0, speed, this.slideByEndHandler, this.settings.slideTimingFunction); } else if (!Util.isNothing(window.jQuery)){ animateProps = { left: this.getStartingPos().x + xVal + 'px' }; if (this.settings.animationTimingFunction === 'ease-out'){ this.settings.animationTimingFunction = 'easeOutQuad'; } if ( Util.isNothing(window.jQuery.easing[this.settings.animationTimingFunction]) ){ this.settings.animationTimingFunction = 'linear'; } window.jQuery(this.contentEl).animate( animateProps, this.settings.slideSpeed, this.settings.animationTimingFunction, this.slideByEndHandler ); } } }); } ( window, window.klass, window.Code.Util, window.Code.PhotoSwipe.TouchElement ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.Toolbar'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Toolbar.CssClasses = { toolbar: 'ps-toolbar', toolbarContent: 'ps-toolbar-content', toolbarTop: 'ps-toolbar-top', caption: 'ps-caption', captionBottom: 'ps-caption-bottom', captionContent: 'ps-caption-content', close: 'ps-toolbar-close', play: 'ps-toolbar-play', previous: 'ps-toolbar-previous', previousDisabled: 'ps-toolbar-previous-disabled', next: 'ps-toolbar-next', nextDisabled: 'ps-toolbar-next-disabled' }; PhotoSwipe.Toolbar.ToolbarAction = { close: 'close', play: 'play', next: 'next', previous: 'previous', none: 'none' }; PhotoSwipe.Toolbar.EventTypes = { onTap: 'PhotoSwipeToolbarOnClick', onBeforeShow: 'PhotoSwipeToolbarOnBeforeShow', onShow: 'PhotoSwipeToolbarOnShow', onBeforeHide: 'PhotoSwipeToolbarOnBeforeHide', onHide: 'PhotoSwipeToolbarOnHide' }; PhotoSwipe.Toolbar.getToolbar = function(){ return ''; }; } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.Toolbar'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.Toolbar.ToolbarClass = klass({ toolbarEl: null, closeEl: null, playEl: null, previousEl: null, nextEl: null, captionEl: null, captionContentEl: null, currentCaption: null, settings: null, cache: null, timeout: null, isVisible: null, fadeOutHandler: null, touchStartHandler: null, touchMoveHandler: null, clickHandler: null, /* * Function: dispose */ dispose: function(){ var prop; this.clearTimeout(); this.removeEventHandlers(); Util.Animation.stop(this.toolbarEl); Util.Animation.stop(this.captionEl); Util.DOM.removeChild(this.toolbarEl, this.toolbarEl.parentNode); Util.DOM.removeChild(this.captionEl, this.captionEl.parentNode); for (prop in this) { if (Util.objectHasProperty(this, prop)) { this[prop] = null; } } }, /* * Function: initialize */ initialize: function(cache, options){ var cssClass; this.settings = options; this.cache = cache; this.isVisible = false; this.fadeOutHandler = this.onFadeOut.bind(this); this.touchStartHandler = this.onTouchStart.bind(this); this.touchMoveHandler = this.onTouchMove.bind(this); this.clickHandler = this.onClick.bind(this); cssClass = PhotoSwipe.Toolbar.CssClasses.toolbar; if (this.settings.captionAndToolbarFlipPosition){ cssClass = cssClass + ' ' + PhotoSwipe.Toolbar.CssClasses.toolbarTop; } // Toolbar this.toolbarEl = Util.DOM.createElement( 'div', { 'class': cssClass }, this.settings.getToolbar() ); Util.DOM.setStyle(this.toolbarEl, { left: 0, position: 'absolute', overflow: 'hidden', zIndex: this.settings.zIndex }); if (this.settings.target === window){ Util.DOM.appendToBody(this.toolbarEl); } else{ Util.DOM.appendChild(this.toolbarEl, this.settings.target); } Util.DOM.hide(this.toolbarEl); this.closeEl = Util.DOM.find('.' + PhotoSwipe.Toolbar.CssClasses.close, this.toolbarEl)[0]; if (this.settings.preventHide && !Util.isNothing(this.closeEl)){ Util.DOM.hide(this.closeEl); } this.playEl = Util.DOM.find('.' + PhotoSwipe.Toolbar.CssClasses.play, this.toolbarEl)[0]; if (this.settings.preventSlideshow && !Util.isNothing(this.playEl)){ Util.DOM.hide(this.playEl); } this.nextEl = Util.DOM.find('.' + PhotoSwipe.Toolbar.CssClasses.next, this.toolbarEl)[0]; this.previousEl = Util.DOM.find('.' + PhotoSwipe.Toolbar.CssClasses.previous, this.toolbarEl)[0]; // Caption cssClass = PhotoSwipe.Toolbar.CssClasses.caption; if (this.settings.captionAndToolbarFlipPosition){ cssClass = cssClass + ' ' + PhotoSwipe.Toolbar.CssClasses.captionBottom; } this.captionEl = Util.DOM.createElement( 'div', { 'class': cssClass }, '' ); Util.DOM.setStyle(this.captionEl, { left: 0, position: 'absolute', overflow: 'hidden', zIndex: this.settings.zIndex }); if (this.settings.target === window){ Util.DOM.appendToBody(this.captionEl); } else{ Util.DOM.appendChild(this.captionEl, this.settings.target); } Util.DOM.hide(this.captionEl); this.captionContentEl = Util.DOM.createElement( 'div', { 'class': PhotoSwipe.Toolbar.CssClasses.captionContent }, '' ); Util.DOM.appendChild(this.captionContentEl, this.captionEl); this.addEventHandlers(); }, /* * Function: resetPosition */ resetPosition: function(){ var width, toolbarTop, captionTop; if (this.settings.target === window){ if (this.settings.captionAndToolbarFlipPosition){ toolbarTop = Util.DOM.windowScrollTop(); captionTop = (Util.DOM.windowScrollTop() + Util.DOM.windowHeight()) - Util.DOM.height(this.captionEl); } else { toolbarTop = (Util.DOM.windowScrollTop() + Util.DOM.windowHeight()) - Util.DOM.height(this.toolbarEl); captionTop = Util.DOM.windowScrollTop(); } width = Util.DOM.windowWidth(); } else{ if (this.settings.captionAndToolbarFlipPosition){ toolbarTop = '0'; captionTop = Util.DOM.height(this.settings.target) - Util.DOM.height(this.captionEl); } else{ toolbarTop = Util.DOM.height(this.settings.target) - Util.DOM.height(this.toolbarEl); captionTop = 0; } width = Util.DOM.width(this.settings.target); } Util.DOM.setStyle(this.toolbarEl, { top: toolbarTop + 'px', width: width }); Util.DOM.setStyle(this.captionEl, { top: captionTop + 'px', width: width }); }, /* * Function: toggleVisibility */ toggleVisibility: function(index){ if (this.isVisible){ this.fadeOut(); } else{ this.show(index); } }, /* * Function: show */ show: function(index){ Util.Animation.stop(this.toolbarEl); Util.Animation.stop(this.captionEl); this.resetPosition(); this.setToolbarStatus(index); Util.Events.fire(this, { type: PhotoSwipe.Toolbar.EventTypes.onBeforeShow, target: this }); this.showToolbar(); this.setCaption(index); this.showCaption(); this.isVisible = true; this.setTimeout(); Util.Events.fire(this, { type: PhotoSwipe.Toolbar.EventTypes.onShow, target: this }); }, /* * Function: setTimeout */ setTimeout: function(){ if (this.settings.captionAndToolbarAutoHideDelay > 0){ // Set a timeout to hide the toolbar this.clearTimeout(); this.timeout = window.setTimeout(this.fadeOut.bind(this), this.settings.captionAndToolbarAutoHideDelay); } }, /* * Function: clearTimeout */ clearTimeout: function(){ if (!Util.isNothing(this.timeout)){ window.clearTimeout(this.timeout); this.timeout = null; } }, /* * Function: fadeOut */ fadeOut: function(){ this.clearTimeout(); Util.Events.fire(this, { type: PhotoSwipe.Toolbar.EventTypes.onBeforeHide, target: this }); Util.Animation.fadeOut(this.toolbarEl, this.settings.fadeOutSpeed); Util.Animation.fadeOut(this.captionEl, this.settings.fadeOutSpeed, this.fadeOutHandler); this.isVisible = false; }, /* * Function: addEventHandlers */ addEventHandlers: function(){ if (Util.Browser.isTouchSupported){ if (!Util.Browser.blackberry){ // Had an issue with touchstart, animation and Blackberry. BB will default to click Util.Events.add(this.toolbarEl, 'touchstart', this.touchStartHandler); } Util.Events.add(this.toolbarEl, 'touchmove', this.touchMoveHandler); Util.Events.add(this.captionEl, 'touchmove', this.touchMoveHandler); } Util.Events.add(this.toolbarEl, 'click', this.clickHandler); }, /* * Function: removeEventHandlers */ removeEventHandlers: function(){ if (Util.Browser.isTouchSupported){ if (!Util.Browser.blackberry){ // Had an issue with touchstart, animation and Blackberry. BB will default to click Util.Events.remove(this.toolbarEl, 'touchstart', this.touchStartHandler); } Util.Events.remove(this.toolbarEl, 'touchmove', this.touchMoveHandler); Util.Events.remove(this.captionEl, 'touchmove', this.touchMoveHandler); } Util.Events.remove(this.toolbarEl, 'click', this.clickHandler); }, /* * Function: handleTap */ handleTap: function(e){ this.clearTimeout(); var action; if (e.target === this.nextEl || Util.DOM.isChildOf(e.target, this.nextEl)){ action = PhotoSwipe.Toolbar.ToolbarAction.next; } else if (e.target === this.previousEl || Util.DOM.isChildOf(e.target, this.previousEl)){ action = PhotoSwipe.Toolbar.ToolbarAction.previous; } else if (e.target === this.closeEl || Util.DOM.isChildOf(e.target, this.closeEl)){ action = PhotoSwipe.Toolbar.ToolbarAction.close; } else if (e.target === this.playEl || Util.DOM.isChildOf(e.target, this.playEl)){ action = PhotoSwipe.Toolbar.ToolbarAction.play; } this.setTimeout(); if (Util.isNothing(action)){ action = PhotoSwipe.Toolbar.ToolbarAction.none; } Util.Events.fire(this, { type: PhotoSwipe.Toolbar.EventTypes.onTap, target: this, action: action, tapTarget: e.target }); }, /* * Function: setCaption */ setCaption: function(index){ Util.DOM.removeChildren(this.captionContentEl); this.currentCaption = Util.coalesce(this.cache.images[index].caption, '\u00A0'); if (Util.isObject(this.currentCaption)){ Util.DOM.appendChild(this.currentCaption, this.captionContentEl); } else{ if (this.currentCaption === ''){ this.currentCaption = '\u00A0'; } Util.DOM.appendText(this.currentCaption, this.captionContentEl); } this.currentCaption = (this.currentCaption === '\u00A0') ? '' : this.currentCaption; this.resetPosition(); }, /* * Function: showToolbar */ showToolbar: function(){ Util.DOM.setStyle(this.toolbarEl, { opacity: this.settings.captionAndToolbarOpacity }); Util.DOM.show(this.toolbarEl); }, /* * Function: showCaption */ showCaption: function(){ if (this.currentCaption === '' || this.captionContentEl.childNodes.length < 1){ // Empty caption if (!this.settings.captionAndToolbarShowEmptyCaptions){ Util.DOM.hide(this.captionEl); return; } } Util.DOM.setStyle(this.captionEl, { opacity: this.settings.captionAndToolbarOpacity }); Util.DOM.show(this.captionEl); }, /* * Function: setToolbarStatus */ setToolbarStatus: function(index){ if (this.settings.loop){ return; } Util.DOM.removeClass(this.previousEl, PhotoSwipe.Toolbar.CssClasses.previousDisabled); Util.DOM.removeClass(this.nextEl, PhotoSwipe.Toolbar.CssClasses.nextDisabled); if (index > 0 && index < this.cache.images.length-1){ return; } if (index === 0){ if (!Util.isNothing(this.previousEl)){ Util.DOM.addClass(this.previousEl, PhotoSwipe.Toolbar.CssClasses.previousDisabled); } } if (index === this.cache.images.length-1){ if (!Util.isNothing(this.nextEl)){ Util.DOM.addClass(this.nextEl, PhotoSwipe.Toolbar.CssClasses.nextDisabled); } } }, /* * Function: onFadeOut */ onFadeOut: function(){ Util.DOM.hide(this.toolbarEl); Util.DOM.hide(this.captionEl); Util.Events.fire(this, { type: PhotoSwipe.Toolbar.EventTypes.onHide, target: this }); }, /* * Function: onTouchStart */ onTouchStart: function(e){ e.preventDefault(); Util.Events.remove(this.toolbarEl, 'click', this.clickHandler); this.handleTap(e); }, /* * Function: onTouchMove */ onTouchMove: function(e){ e.preventDefault(); }, /* * Function: onClick */ onClick: function(e){ e.preventDefault(); this.handleTap(e); } }); } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.UILayer'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.UILayer.CssClasses = { uiLayer: 'ps-uilayer' }; } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.UILayer'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.UILayer.UILayerClass = Util.TouchElement.TouchElementClass.extend({ el: null, settings: null, /* * Function: dispose */ dispose: function(){ var prop; this.removeEventHandlers(); Util.DOM.removeChild(this.el, this.el.parentNode); for (prop in this) { if (Util.objectHasProperty(this, prop)) { this[prop] = null; } } }, /* * Function: initialize */ initialize: function(options){ this.settings = options; // Main container this.el = Util.DOM.createElement( 'div', { 'class': PhotoSwipe.UILayer.CssClasses.uiLayer }, '' ); Util.DOM.setStyle(this.el, { display: 'block', position: 'absolute', left: 0, top: 0, overflow: 'hidden', zIndex: this.settings.zIndex, opacity: 0 }); Util.DOM.hide(this.el); if (this.settings.target === window){ Util.DOM.appendToBody(this.el); } else{ Util.DOM.appendChild(this.el, this.settings.target); } this.supr(this.el, { swipe: true, move: true, gesture: Util.Browser.iOS, doubleTap: true, preventDefaultTouchEvents: this.settings.preventDefaultTouchEvents }); }, /* * Function: resetPosition */ resetPosition: function(){ // Set the height and width to fill the document if (this.settings.target === window){ Util.DOM.setStyle(this.el, { top: Util.DOM.windowScrollTop() + 'px', width: Util.DOM.windowWidth(), height: Util.DOM.windowHeight() }); } else{ Util.DOM.setStyle(this.el, { top: '0px', width: Util.DOM.width(this.settings.target), height: Util.DOM.height(this.settings.target) }); } }, /* * Function: show */ show: function(){ this.resetPosition(); Util.DOM.show(this.el); this.addEventHandlers(); }, /* * Function: addEventHandlers */ addEventHandlers: function(){ this.supr(); }, /* * Function: removeEventHandlers */ removeEventHandlers: function(){ this.supr(); } }); } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.ZoomPanRotate'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.ZoomPanRotate.CssClasses = { zoomPanRotate: 'ps-zoom-pan-rotate' }; PhotoSwipe.ZoomPanRotate.EventTypes = { onTransform: 'PhotoSwipeZoomPanRotateOnTransform' }; } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, klass, Util){ Util.registerNamespace('Code.PhotoSwipe.ZoomPanRotate'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.ZoomPanRotate.ZoomPanRotateClass = klass({ el: null, settings: null, containerEl: null, imageEl: null, transformSettings: null, panStartingPoint: null, transformEl: null, /* * Function: dispose */ dispose: function(){ var prop; Util.DOM.removeChild(this.el, this.el.parentNode); for (prop in this) { if (Util.objectHasProperty(this, prop)) { this[prop] = null; } } }, /* * Function: initialize */ initialize: function(options, cacheImage, uiLayer){ var parentEl, width, height, top; this.settings = options; if (this.settings.target === window){ parentEl = document.body; width = Util.DOM.windowWidth(); height = Util.DOM.windowHeight(); top = Util.DOM.windowScrollTop() + 'px'; } else{ parentEl = this.settings.target; width = Util.DOM.width(parentEl); height = Util.DOM.height(parentEl); top = '0px'; } this.imageEl = cacheImage.imageEl.cloneNode(false); Util.DOM.setStyle(this.imageEl, { zIndex: 1 }); this.transformSettings = { startingScale: 1.0, scale: 1.0, startingRotation: 0, rotation: 0, startingTranslateX: 0, startingTranslateY: 0, translateX: 0, translateY: 0 }; this.el = Util.DOM.createElement( 'div', { 'class': PhotoSwipe.ZoomPanRotate.CssClasses.zoomPanRotate }, '' ); Util.DOM.setStyle(this.el, { left: 0, top: top, position: 'absolute', width: width, height: height, zIndex: this.settings.zIndex, display: 'block' }); Util.DOM.insertBefore(this.el, uiLayer.el, parentEl); if (Util.Browser.iOS){ this.containerEl = Util.DOM.createElement('div','',''); Util.DOM.setStyle(this.containerEl, { left: 0, top: 0, width: width, height: height, position: 'absolute', zIndex: 1 }); Util.DOM.appendChild(this.imageEl, this.containerEl); Util.DOM.appendChild(this.containerEl, this.el); Util.Animation.resetTranslate(this.containerEl); Util.Animation.resetTranslate(this.imageEl); this.transformEl = this.containerEl; } else{ Util.DOM.appendChild(this.imageEl, this.el); this.transformEl = this.imageEl; } }, /* * Function: setStartingTranslateFromCurrentTransform */ setStartingTranslateFromCurrentTransform: function(){ var transformValue = Util.coalesce(this.transformEl.style.webkitTransform, this.transformEl.style.MozTransform, this.transformEl.style.transform), transformExploded; if (!Util.isNothing(transformValue)){ transformExploded = transformValue.match( /translate\((.*?)\)/ ); if (!Util.isNothing(transformExploded)){ transformExploded = transformExploded[1].split(', '); this.transformSettings.startingTranslateX = window.parseInt(transformExploded[0], 10); this.transformSettings.startingTranslateY = window.parseInt(transformExploded[1], 10); } } }, /* * Function: getScale */ getScale: function(scaleValue){ var scale = this.transformSettings.startingScale * scaleValue; if (this.settings.minUserZoom !== 0 && scale < this.settings.minUserZoom){ scale = this.settings.minUserZoom; } else if (this.settings.maxUserZoom !== 0 && scale > this.settings.maxUserZoom){ scale = this.settings.maxUserZoom; } return scale; }, /* * Function: setStartingScaleAndRotation */ setStartingScaleAndRotation: function(scaleValue, rotationValue){ this.transformSettings.startingScale = this.getScale(scaleValue); this.transformSettings.startingRotation = (this.transformSettings.startingRotation + rotationValue) % 360; }, /* * Function: zoomRotate */ zoomRotate: function(scaleValue, rotationValue){ this.transformSettings.scale = this.getScale(scaleValue); this.transformSettings.rotation = this.transformSettings.startingRotation + rotationValue; this.applyTransform(); }, /* * Function: panStart */ panStart: function(point){ this.setStartingTranslateFromCurrentTransform(); this.panStartingPoint = { x: point.x, y: point.y }; }, /* * Function: pan */ pan: function(point){ var dx = point.x - this.panStartingPoint.x, dy = point.y - this.panStartingPoint.y, dxScaleAdjust = dx / this.transformSettings.scale , dyScaleAdjust = dy / this.transformSettings.scale; this.transformSettings.translateX = this.transformSettings.startingTranslateX + dxScaleAdjust; this.transformSettings.translateY = this.transformSettings.startingTranslateY + dyScaleAdjust; this.applyTransform(); }, /* * Function: zoomAndPanToPoint */ zoomAndPanToPoint: function(scaleValue, point){ if (this.settings.target === window){ this.panStart({ x: Util.DOM.windowWidth() / 2, y: Util.DOM.windowHeight() / 2 }); var dx = point.x - this.panStartingPoint.x, dy = point.y - this.panStartingPoint.y, dxScaleAdjust = dx / this.transformSettings.scale, dyScaleAdjust = dy / this.transformSettings.scale; this.transformSettings.translateX = (this.transformSettings.startingTranslateX + dxScaleAdjust) * -1; this.transformSettings.translateY = (this.transformSettings.startingTranslateY + dyScaleAdjust) * -1; } this.setStartingScaleAndRotation(scaleValue, 0); this.transformSettings.scale = this.transformSettings.startingScale; this.transformSettings.rotation = 0; this.applyTransform(); }, /* * Function: applyTransform */ applyTransform: function(){ var rotationDegs = this.transformSettings.rotation % 360, translateX = window.parseInt(this.transformSettings.translateX, 10), translateY = window.parseInt(this.transformSettings.translateY, 10), transform = 'scale(' + this.transformSettings.scale + ') rotate(' + rotationDegs + 'deg) translate(' + translateX + 'px, ' + translateY + 'px)'; Util.DOM.setStyle(this.transformEl, { webkitTransform: transform, MozTransform: transform, msTransform: transform, transform: transform }); Util.Events.fire(this, { target: this, type: PhotoSwipe.ZoomPanRotate.EventTypes.onTransform, scale: this.transformSettings.scale, rotation: this.transformSettings.rotation, rotationDegs: rotationDegs, translateX: translateX, translateY: translateY }); } }); } ( window, window.klass, window.Code.Util ));// Copyright (c) 2012 by Code Computerlove (http://www.codecomputerlove.com) // Licensed under the MIT license // version: 3.0.5 (function(window, Util){ Util.registerNamespace('Code.PhotoSwipe'); var PhotoSwipe = window.Code.PhotoSwipe; PhotoSwipe.CssClasses = { buildingBody: 'ps-building', activeBody: 'ps-active' }; PhotoSwipe.EventTypes = { onBeforeShow: 'PhotoSwipeOnBeforeShow', onShow: 'PhotoSwipeOnShow', onBeforeHide: 'PhotoSwipeOnBeforeHide', onHide: 'PhotoSwipeOnHide', onDisplayImage: 'PhotoSwipeOnDisplayImage', onResetPosition: 'PhotoSwipeOnResetPosition', onSlideshowStart: 'PhotoSwipeOnSlideshowStart', onSlideshowStop: 'PhotoSwipeOnSlideshowStop', onTouch: 'PhotoSwipeOnTouch', onBeforeCaptionAndToolbarShow: 'PhotoSwipeOnBeforeCaptionAndToolbarShow', onCaptionAndToolbarShow: 'PhotoSwipeOnCaptionAndToolbarShow', onBeforeCaptionAndToolbarHide: 'PhotoSwipeOnBeforeCaptionAndToolbarHide', onCaptionAndToolbarHide: 'PhotoSwipeOnCaptionAndToolbarHide', onToolbarTap: 'PhotoSwipeOnToolbarTap', onBeforeZoomPanRotateShow: 'PhotoSwipeOnBeforeZoomPanRotateShow', onZoomPanRotateShow: 'PhotoSwipeOnZoomPanRotateShow', onBeforeZoomPanRotateHide: 'PhotoSwipeOnBeforeZoomPanRotateHide', onZoomPanRotateHide: 'PhotoSwipeOnZoomPanRotateHide', onZoomPanRotateTransform: 'PhotoSwipeOnZoomPanRotateTransform' }; PhotoSwipe.instances = []; PhotoSwipe.activeInstances = []; /* * Function: Code.PhotoSwipe.setActivateInstance */ PhotoSwipe.setActivateInstance = function(instance){ // Can only have one instance per target (i.e. window or div) var index = Util.arrayIndexOf(instance.settings.target, PhotoSwipe.activeInstances, 'target'); if (index > -1){ throw 'Code.PhotoSwipe.activateInstance: Unable to active instance as another instance is already active for this target'; } PhotoSwipe.activeInstances.push({ target: instance.settings.target, instance: instance }); }; /* * Function: Code.PhotoSwipe.unsetActivateInstance */ PhotoSwipe.unsetActivateInstance = function(instance){ var index = Util.arrayIndexOf(instance, PhotoSwipe.activeInstances, 'instance'); PhotoSwipe.activeInstances.splice(index, 1); }; /* * Function: Code.PhotoSwipe.attach */ PhotoSwipe.attach = function(images, options, id){ var i, j, instance, image; instance = PhotoSwipe.createInstance(images, options, id); // Add click event handlers if applicable for (i=0, j=images.length; i= 2.1){ this.isBackEventSupported = true; } } if (!this.isBackEventSupported){ this.isBackEventSupported = Util.objectHasProperty(window, 'onhashchange'); } this.settings = { // General fadeInSpeed: 250, fadeOutSpeed: 250, preventHide: false, preventSlideshow: false, zIndex: 1000, backButtonHideEnabled: true, enableKeyboard: true, enableMouseWheel: true, mouseWheelSpeed: 350, autoStartSlideshow: false, jQueryMobile: ( !Util.isNothing(window.jQuery) && !Util.isNothing(window.jQuery.mobile) ), jQueryMobileDialogHash: '&ui-state=dialog', enableUIWebViewRepositionTimeout: false, uiWebViewResetPositionDelay: 500, target: window, preventDefaultTouchEvents: true, // Carousel loop: true, slideSpeed: 250, nextPreviousSlideSpeed: 0, enableDrag: true, swipeThreshold: 50, swipeTimeThreshold: 250, slideTimingFunction: 'ease-out', slideshowDelay: 3000, doubleTapSpeed: 250, margin: 20, imageScaleMethod: 'fit', // Either "fit", "fitNoUpscale" or "zoom", // Toolbar captionAndToolbarHide: false, captionAndToolbarFlipPosition: false, captionAndToolbarAutoHideDelay: 5000, captionAndToolbarOpacity: 0.8, captionAndToolbarShowEmptyCaptions: true, getToolbar: PhotoSwipe.Toolbar.getToolbar, // ZoomPanRotate allowUserZoom: true, allowRotationOnUserZoom: false, maxUserZoom: 5.0, minUserZoom: 0.5, doubleTapZoomLevel: 2.5, // Cache getImageSource: PhotoSwipe.Cache.Functions.getImageSource, getImageCaption: PhotoSwipe.Cache.Functions.getImageCaption, getImageMetaData: PhotoSwipe.Cache.Functions.getImageMetaData, cacheMode: PhotoSwipe.Cache.Mode.normal }; Util.extend(this.settings, options); if (this.settings.target !== window){ targetPosition = Util.DOM.getStyle(this.settings.target, 'position'); if (targetPosition !== 'relative' || targetPosition !== 'absolute'){ Util.DOM.setStyle(this.settings.target, 'position', 'relative'); } } if (this.settings.target !== window){ this.isBackEventSupported = false; this.settings.backButtonHideEnabled = false; } else{ if (this.settings.preventHide){ this.settings.backButtonHideEnabled = false; } } this.cache = new Cache.CacheClass(images, this.settings); }, /* * Function: show */ show: function(obj){ var i, j; this._isResettingPosition = false; this.backButtonClicked = false; // Work out what the starting index is if (Util.isNumber(obj)){ this.currentIndex = obj; } else{ this.currentIndex = -1; for (i=0, j=this.originalImages.length; i this.originalImages.length-1){ throw "Code.PhotoSwipe.PhotoSwipeClass.show: Starting index out of range"; } // Store a reference to the current window dimensions // Use this later to double check that a window has actually // been resized. this.isAlreadyGettingPage = this.getWindowDimensions(); // Set this instance to be the active instance PhotoSwipe.setActivateInstance(this); this.windowDimensions = this.getWindowDimensions(); // Create components if (this.settings.target === window){ Util.DOM.addClass(window.document.body, PhotoSwipe.CssClasses.buildingBody); } else{ Util.DOM.addClass(this.settings.target, PhotoSwipe.CssClasses.buildingBody); } this.createComponents(); Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onBeforeShow, target: this }); // Fade in the document overlay this.documentOverlay.fadeIn(this.settings.fadeInSpeed, this.onDocumentOverlayFadeIn.bind(this)); }, /* * Function: getWindowDimensions */ getWindowDimensions: function(){ return { width: Util.DOM.windowWidth(), height: Util.DOM.windowHeight() }; }, /* * Function: createComponents */ createComponents: function(){ this.documentOverlay = new DocumentOverlay.DocumentOverlayClass(this.settings); this.carousel = new Carousel.CarouselClass(this.cache, this.settings); this.uiLayer = new UILayer.UILayerClass(this.settings); if (!this.settings.captionAndToolbarHide){ this.toolbar = new Toolbar.ToolbarClass(this.cache, this.settings); } }, /* * Function: resetPosition */ resetPosition: function(){ if (this._isResettingPosition){ return; } var newWindowDimensions = this.getWindowDimensions(); if (!Util.isNothing(this.windowDimensions)){ if (newWindowDimensions.width === this.windowDimensions.width && newWindowDimensions.height === this.windowDimensions.height){ // This was added as a fudge for iOS return; } } this._isResettingPosition = true; this.windowDimensions = newWindowDimensions; this.destroyZoomPanRotate(); this.documentOverlay.resetPosition(); this.carousel.resetPosition(); if (!Util.isNothing(this.toolbar)){ this.toolbar.resetPosition(); } this.uiLayer.resetPosition(); this._isResettingPosition = false; Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onResetPosition, target: this }); }, /* * Function: addEventHandler */ addEventHandler: function(type, handler){ Util.Events.add(this, type, handler); }, /* * Function: addEventHandlers */ addEventHandlers: function(){ if (Util.isNothing(this.windowOrientationChangeHandler)){ this.windowOrientationChangeHandler = this.onWindowOrientationChange.bind(this); this.windowScrollHandler = this.onWindowScroll.bind(this); this.keyDownHandler = this.onKeyDown.bind(this); this.windowHashChangeHandler = this.onWindowHashChange.bind(this); this.uiLayerTouchHandler = this.onUILayerTouch.bind(this); this.carouselSlideByEndHandler = this.onCarouselSlideByEnd.bind(this); this.carouselSlideshowStartHandler = this.onCarouselSlideshowStart.bind(this); this.carouselSlideshowStopHandler = this.onCarouselSlideshowStop.bind(this); this.toolbarTapHandler = this.onToolbarTap.bind(this); this.toolbarBeforeShowHandler = this.onToolbarBeforeShow.bind(this); this.toolbarShowHandler = this.onToolbarShow.bind(this); this.toolbarBeforeHideHandler = this.onToolbarBeforeHide.bind(this); this.toolbarHideHandler = this.onToolbarHide.bind(this); this.mouseWheelHandler = this.onMouseWheel.bind(this); this.zoomPanRotateTransformHandler = this.onZoomPanRotateTransform.bind(this); } // Set window handlers if (Util.Browser.android){ // For some reason, resize was more stable than orientationchange in Android this.orientationEventName = 'resize'; } else if (Util.Browser.iOS && (!Util.Browser.safari)){ Util.Events.add(window.document.body, 'orientationchange', this.windowOrientationChangeHandler); } else{ var supportsOrientationChange = !Util.isNothing(window.onorientationchange); this.orientationEventName = supportsOrientationChange ? 'orientationchange' : 'resize'; } if (!Util.isNothing(this.orientationEventName)){ Util.Events.add(window, this.orientationEventName, this.windowOrientationChangeHandler); } if (this.settings.target === window){ Util.Events.add(window, 'scroll', this.windowScrollHandler); } if (this.settings.enableKeyboard){ Util.Events.add(window.document, 'keydown', this.keyDownHandler); } if (this.isBackEventSupported && this.settings.backButtonHideEnabled){ this.windowHashChangeHandler = this.onWindowHashChange.bind(this); if (this.settings.jQueryMobile){ window.location.hash = this.settings.jQueryMobileDialogHash; } else{ this.currentHistoryHashValue = 'PhotoSwipe' + new Date().getTime().toString(); window.location.hash = this.currentHistoryHashValue; } Util.Events.add(window, 'hashchange', this.windowHashChangeHandler); } if (this.settings.enableMouseWheel){ Util.Events.add(window, 'mousewheel', this.mouseWheelHandler); } Util.Events.add(this.uiLayer, Util.TouchElement.EventTypes.onTouch, this.uiLayerTouchHandler); Util.Events.add(this.carousel, Carousel.EventTypes.onSlideByEnd, this.carouselSlideByEndHandler); Util.Events.add(this.carousel, Carousel.EventTypes.onSlideshowStart, this.carouselSlideshowStartHandler); Util.Events.add(this.carousel, Carousel.EventTypes.onSlideshowStop, this.carouselSlideshowStopHandler); if (!Util.isNothing(this.toolbar)){ Util.Events.add(this.toolbar, Toolbar.EventTypes.onTap, this.toolbarTapHandler); Util.Events.add(this.toolbar, Toolbar.EventTypes.onBeforeShow, this.toolbarBeforeShowHandler); Util.Events.add(this.toolbar, Toolbar.EventTypes.onShow, this.toolbarShowHandler); Util.Events.add(this.toolbar, Toolbar.EventTypes.onBeforeHide, this.toolbarBeforeHideHandler); Util.Events.add(this.toolbar, Toolbar.EventTypes.onHide, this.toolbarHideHandler); } }, /* * Function: removeEventHandlers */ removeEventHandlers: function(){ if (Util.Browser.iOS && (!Util.Browser.safari)){ Util.Events.remove(window.document.body, 'orientationchange', this.windowOrientationChangeHandler); } if (!Util.isNothing(this.orientationEventName)){ Util.Events.remove(window, this.orientationEventName, this.windowOrientationChangeHandler); } Util.Events.remove(window, 'scroll', this.windowScrollHandler); if (this.settings.enableKeyboard){ Util.Events.remove(window.document, 'keydown', this.keyDownHandler); } if (this.isBackEventSupported && this.settings.backButtonHideEnabled){ Util.Events.remove(window, 'hashchange', this.windowHashChangeHandler); } if (this.settings.enableMouseWheel){ Util.Events.remove(window, 'mousewheel', this.mouseWheelHandler); } if (!Util.isNothing(this.uiLayer)){ Util.Events.remove(this.uiLayer, Util.TouchElement.EventTypes.onTouch, this.uiLayerTouchHandler); } if (!Util.isNothing(this.toolbar)){ Util.Events.remove(this.carousel, Carousel.EventTypes.onSlideByEnd, this.carouselSlideByEndHandler); Util.Events.remove(this.carousel, Carousel.EventTypes.onSlideshowStart, this.carouselSlideshowStartHandler); Util.Events.remove(this.carousel, Carousel.EventTypes.onSlideshowStop, this.carouselSlideshowStopHandler); } if (!Util.isNothing(this.toolbar)){ Util.Events.remove(this.toolbar, Toolbar.EventTypes.onTap, this.toolbarTapHandler); Util.Events.remove(this.toolbar, Toolbar.EventTypes.onBeforeShow, this.toolbarBeforeShowHandler); Util.Events.remove(this.toolbar, Toolbar.EventTypes.onShow, this.toolbarShowHandler); Util.Events.remove(this.toolbar, Toolbar.EventTypes.onBeforeHide, this.toolbarBeforeHideHandler); Util.Events.remove(this.toolbar, Toolbar.EventTypes.onHide, this.toolbarHideHandler); } }, /* * Function: hide */ hide: function(){ if (this.settings.preventHide){ return; } if (Util.isNothing(this.documentOverlay)){ throw "Code.PhotoSwipe.PhotoSwipeClass.hide: PhotoSwipe instance is already hidden"; } if (!Util.isNothing(this.hiding)){ return; } this.clearUIWebViewResetPositionTimeout(); this.destroyZoomPanRotate(); this.removeEventHandlers(); Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onBeforeHide, target: this }); this.uiLayer.dispose(); this.uiLayer = null; if (!Util.isNothing(this.toolbar)){ this.toolbar.dispose(); this.toolbar = null; } this.carousel.dispose(); this.carousel = null; Util.DOM.removeClass(window.document.body, PhotoSwipe.CssClasses.activeBody); this.documentOverlay.dispose(); this.documentOverlay = null; this._isResettingPosition = false; // Deactive this instance PhotoSwipe.unsetActivateInstance(this); Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onHide, target: this }); this.goBackInHistory(); }, /* * Function: goBackInHistory */ goBackInHistory: function(){ if (this.isBackEventSupported && this.settings.backButtonHideEnabled){ if ( !this.backButtonClicked ){ window.history.back(); } } }, /* * Function: play */ play: function(){ if (this.isZoomActive()){ return; } if (!this.settings.preventSlideshow){ if (!Util.isNothing(this.carousel)){ if (!Util.isNothing(this.toolbar) && this.toolbar.isVisible){ this.toolbar.fadeOut(); } this.carousel.startSlideshow(); } } }, /* * Function: stop */ stop: function(){ if (this.isZoomActive()){ return; } if (!Util.isNothing(this.carousel)){ this.carousel.stopSlideshow(); } }, /* * Function: previous */ previous: function(){ if (this.isZoomActive()){ return; } if (!Util.isNothing(this.carousel)){ this.carousel.previous(); } }, /* * Function: next */ next: function(){ if (this.isZoomActive()){ return; } if (!Util.isNothing(this.carousel)){ this.carousel.next(); } }, /* * Function: toggleToolbar */ toggleToolbar: function(){ if (this.isZoomActive()){ return; } if (!Util.isNothing(this.toolbar)){ this.toolbar.toggleVisibility(this.currentIndex); } }, /* * Function: fadeOutToolbarIfVisible */ fadeOutToolbarIfVisible: function(){ if (!Util.isNothing(this.toolbar) && this.toolbar.isVisible && this.settings.captionAndToolbarAutoHideDelay > 0){ this.toolbar.fadeOut(); } }, /* * Function: createZoomPanRotate */ createZoomPanRotate: function(){ this.stop(); if (this.canUserZoom() && !this.isZoomActive()){ Util.Events.fire(this, PhotoSwipe.EventTypes.onBeforeZoomPanRotateShow); this.zoomPanRotate = new ZoomPanRotate.ZoomPanRotateClass( this.settings, this.cache.images[this.currentIndex], this.uiLayer ); // If we don't override this in the event of false // you will be unable to pan around a zoomed image effectively this.uiLayer.captureSettings.preventDefaultTouchEvents = true; Util.Events.add(this.zoomPanRotate, PhotoSwipe.ZoomPanRotate.EventTypes.onTransform, this.zoomPanRotateTransformHandler); Util.Events.fire(this, PhotoSwipe.EventTypes.onZoomPanRotateShow); if (!Util.isNothing(this.toolbar) && this.toolbar.isVisible){ this.toolbar.fadeOut(); } } }, /* * Function: destroyZoomPanRotate */ destroyZoomPanRotate: function(){ if (!Util.isNothing(this.zoomPanRotate)){ Util.Events.fire(this, PhotoSwipe.EventTypes.onBeforeZoomPanRotateHide); Util.Events.remove(this.zoomPanRotate, PhotoSwipe.ZoomPanRotate.EventTypes.onTransform, this.zoomPanRotateTransformHandler); this.zoomPanRotate.dispose(); this.zoomPanRotate = null; // Set the preventDefaultTouchEvents back to it was this.uiLayer.captureSettings.preventDefaultTouchEvents = this.settings.preventDefaultTouchEvents; Util.Events.fire(this, PhotoSwipe.EventTypes.onZoomPanRotateHide); } }, /* * Function: canUserZoom */ canUserZoom: function(){ var testEl, cacheImage; if (Util.Browser.msie){ testEl = document.createElement('div'); if (Util.isNothing(testEl.style.msTransform)){ return false; } } else if (!Util.Browser.isCSSTransformSupported){ return false; } if (!this.settings.allowUserZoom){ return false; } if (this.carousel.isSliding){ return false; } cacheImage = this.cache.images[this.currentIndex]; if (Util.isNothing(cacheImage)){ return false; } if (cacheImage.isLoading){ return false; } return true; }, /* * Function: isZoomActive */ isZoomActive: function(){ return (!Util.isNothing(this.zoomPanRotate)); }, /* * Function: getCurrentImage */ getCurrentImage: function(){ return this.cache.images[this.currentIndex]; }, /* * Function: onDocumentOverlayFadeIn */ onDocumentOverlayFadeIn: function(e){ window.setTimeout(function(){ var el = (this.settings.target === window) ? window.document.body : this.settings.target; Util.DOM.removeClass(el, PhotoSwipe.CssClasses.buildingBody); Util.DOM.addClass(el, PhotoSwipe.CssClasses.activeBody); this.addEventHandlers(); this.carousel.show(this.currentIndex); this.uiLayer.show(); if (this.settings.autoStartSlideshow){ this.play(); } else if (!Util.isNothing(this.toolbar)){ this.toolbar.show(this.currentIndex); } Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onShow, target: this }); this.setUIWebViewResetPositionTimeout(); }.bind(this), 250); }, /* * Function: setUIWebViewResetPositionTimeout */ setUIWebViewResetPositionTimeout: function(){ if (!this.settings.enableUIWebViewRepositionTimeout){ return; } if (!(Util.Browser.iOS && (!Util.Browser.safari))){ return; } if (!Util.isNothing(this._uiWebViewResetPositionTimeout)){ window.clearTimeout(this._uiWebViewResetPositionTimeout); } this._uiWebViewResetPositionTimeout = window.setTimeout(function(){ this.resetPosition(); this.setUIWebViewResetPositionTimeout(); }.bind(this), this.settings.uiWebViewResetPositionDelay); }, /* * Function: clearUIWebViewResetPositionTimeout */ clearUIWebViewResetPositionTimeout: function(){ if (!Util.isNothing(this._uiWebViewResetPositionTimeout)){ window.clearTimeout(this._uiWebViewResetPositionTimeout); } }, /* * Function: onWindowScroll */ onWindowScroll: function(e){ this.resetPosition(); }, /* * Function: onWindowOrientationChange */ onWindowOrientationChange: function(e){ this.resetPosition(); }, /* * Function: onWindowHashChange */ onWindowHashChange: function(e){ var compareHash = '#' + ((this.settings.jQueryMobile) ? this.settings.jQueryMobileDialogHash : this.currentHistoryHashValue); if (window.location.hash !== compareHash){ this.backButtonClicked = true; this.hide(); } }, /* * Function: onKeyDown */ onKeyDown: function(e){ if (e.keyCode === 37) { // Left e.preventDefault(); this.previous(); } else if (e.keyCode === 39) { // Right e.preventDefault(); this.next(); } else if (e.keyCode === 38 || e.keyCode === 40) { // Up and down e.preventDefault(); } else if (e.keyCode === 27) { // Escape e.preventDefault(); this.hide(); } else if (e.keyCode === 32) { // Spacebar if (!this.settings.hideToolbar){ this.toggleToolbar(); } else{ this.hide(); } e.preventDefault(); } else if (e.keyCode === 13) { // Enter e.preventDefault(); this.play(); } }, /* * Function: onUILayerTouch */ onUILayerTouch: function(e){ if (this.isZoomActive()){ switch (e.action){ case Util.TouchElement.ActionTypes.gestureChange: this.zoomPanRotate.zoomRotate(e.scale, (this.settings.allowRotationOnUserZoom) ? e.rotation : 0); break; case Util.TouchElement.ActionTypes.gestureEnd: this.zoomPanRotate.setStartingScaleAndRotation(e.scale, (this.settings.allowRotationOnUserZoom) ? e.rotation : 0); break; case Util.TouchElement.ActionTypes.touchStart: this.zoomPanRotate.panStart(e.point); break; case Util.TouchElement.ActionTypes.touchMove: this.zoomPanRotate.pan(e.point); break; case Util.TouchElement.ActionTypes.doubleTap: this.destroyZoomPanRotate(); this.toggleToolbar(); break; case Util.TouchElement.ActionTypes.swipeLeft: this.destroyZoomPanRotate(); this.next(); this.toggleToolbar(); break; case Util.TouchElement.ActionTypes.swipeRight: this.destroyZoomPanRotate(); this.previous(); this.toggleToolbar(); break; } } else{ switch (e.action){ case Util.TouchElement.ActionTypes.touchMove: case Util.TouchElement.ActionTypes.swipeLeft: case Util.TouchElement.ActionTypes.swipeRight: // Hide the toolbar if need be this.fadeOutToolbarIfVisible(); // Pass the touch onto the carousel this.carousel.onTouch(e.action, e.point); break; case Util.TouchElement.ActionTypes.touchStart: case Util.TouchElement.ActionTypes.touchMoveEnd: // Pass the touch onto the carousel this.carousel.onTouch(e.action, e.point); break; case Util.TouchElement.ActionTypes.tap: this.toggleToolbar(); break; case Util.TouchElement.ActionTypes.doubleTap: // Take into consideration the window scroll if (this.settings.target === window){ e.point.x -= Util.DOM.windowScrollLeft(); e.point.y -= Util.DOM.windowScrollTop(); } // Just make sure that if the user clicks out of the image // that the image does not pan out of view! var cacheImageEl = this.cache.images[this.currentIndex].imageEl, imageTop = window.parseInt(Util.DOM.getStyle(cacheImageEl, 'top'), 10), imageLeft = window.parseInt(Util.DOM.getStyle(cacheImageEl, 'left'), 10), imageRight = imageLeft + Util.DOM.width(cacheImageEl), imageBottom = imageTop + Util.DOM.height(cacheImageEl); if (e.point.x < imageLeft){ e.point.x = imageLeft; } else if (e.point.x > imageRight){ e.point.x = imageRight; } if (e.point.y < imageTop){ e.point.y = imageTop; } else if (e.point.y > imageBottom){ e.point.y = imageBottom; } this.createZoomPanRotate(); if (this.isZoomActive()){ this.zoomPanRotate.zoomAndPanToPoint(this.settings.doubleTapZoomLevel, e.point); } break; case Util.TouchElement.ActionTypes.gestureStart: this.createZoomPanRotate(); break; } } Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onTouch, target: this, point: e.point, action: e.action }); }, /* * Function: onCarouselSlideByEnd */ onCarouselSlideByEnd: function(e){ this.currentIndex = e.cacheIndex; if (!Util.isNothing(this.toolbar)){ this.toolbar.setCaption(this.currentIndex); this.toolbar.setToolbarStatus(this.currentIndex); } Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onDisplayImage, target: this, action: e.action, index: e.cacheIndex }); }, /* * Function: onToolbarTap */ onToolbarTap: function(e){ switch(e.action){ case Toolbar.ToolbarAction.next: this.next(); break; case Toolbar.ToolbarAction.previous: this.previous(); break; case Toolbar.ToolbarAction.close: this.hide(); break; case Toolbar.ToolbarAction.play: this.play(); break; } Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onToolbarTap, target: this, toolbarAction: e.action, tapTarget: e.tapTarget }); }, /* * Function: onMouseWheel */ onMouseWheel: function(e){ var delta = Util.Events.getWheelDelta(e), dt = e.timeStamp - (this.mouseWheelStartTime || 0); if (dt < this.settings.mouseWheelSpeed) { return; } this.mouseWheelStartTime = e.timeStamp; if (this.settings.invertMouseWheel){ delta = delta * -1; } if (delta < 0){ this.next(); } else if (delta > 0){ this.previous(); } }, /* * Function: onCarouselSlideshowStart */ onCarouselSlideshowStart: function(e){ Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onSlideshowStart, target: this }); }, /* * Function: onCarouselSlideshowStop */ onCarouselSlideshowStop: function(e){ Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onSlideshowStop, target: this }); }, /* * Function: onToolbarBeforeShow */ onToolbarBeforeShow: function(e){ Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, target: this }); }, /* * Function: onToolbarShow */ onToolbarShow: function(e){ Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onCaptionAndToolbarShow, target: this }); }, /* * Function: onToolbarBeforeHide */ onToolbarBeforeHide: function(e){ Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, target: this }); }, /* * Function: onToolbarHide */ onToolbarHide: function(e){ Util.Events.fire(this, { type: PhotoSwipe.EventTypes.onCaptionAndToolbarHide, target: this }); }, /* * Function: onZoomPanRotateTransform */ onZoomPanRotateTransform: function(e){ Util.Events.fire(this, { target: this, type: PhotoSwipe.EventTypes.onZoomPanRotateTransform, scale: e.scale, rotation: e.rotation, rotationDegs: e.rotationDegs, translateX: e.translateX, translateY: e.translateY }); } }); } ( window, window.klass, window.Code.Util, window.Code.PhotoSwipe.Cache, window.Code.PhotoSwipe.DocumentOverlay, window.Code.PhotoSwipe.Carousel, window.Code.PhotoSwipe.Toolbar, window.Code.PhotoSwipe.UILayer, window.Code.PhotoSwipe.ZoomPanRotate ));

CLOSE

I believe I started with CompuHost in 2002 and have used it ever since! They've incorporated ideas and suggestions I submitted into the hosting software and have always had great tech support whether it be phone call or an online submission. I've tried the other hosting programs out there because another KJ/DJ said to try it, but i have always gone back because the other hosting programs out there are just not a complete package like CompuHost!

You can call and talk to a real person and get real answers! Love it, thanks!
With much appreciation,
Jenny

You won't find a friendly or more supportive staff, thank you for all your help.

The new SongBooks Online features are outstanding. Now we as hosts can receive TIPS from our performers! I made $75 in tips just the other night through the app. You guys seriously are a godsend, thank you so much for creating such a cool service, my daughter doesn't know it yet, but she will be thanking you too when she gets the gift I originally wasn't going to be able to afford to get her for Christmas. You guys really are the best!
With the warmest regards,
Emilie

I just found my original Compuhost install disc. Version 1.76.03
This software has exceeded my every need for hosting a professional karaoke show.
I firmly believe in this product and I am a lifetime customer.

Many thanks for Software that is so great. Me and my mates can't get enough karaoke!
Best Regards,
Christopher

I called and actually talked to a live Sales Rep who was Knowledgeable, gave great service, had a positive helpful attitude. Great service, great products, great company need I say more.. Thanks!

I have all of your products, everything works amazing and any time I have needed assistance u guys have been there whether by phone or email. If only all companies cared for their customers as you do. Most Sincerely, God Bless

Amazing Job you guys are doing over there! I love CompuHost and with the addition of SongBooks Online WOW! What will guys develop next! I can't wait!

CDGRip is the best CDG ripping utility ever and it's "FREE"! Thanks you guys!

I've used Compuhost for over 10 years, I've also recommended it to family and friends that have also purchased this top hosting program. If you need quality karaoke hosting software look no further.

Been using this software for 5yrs. Never a problem. It's the best

I had surgery on my hand and it was so hard for me to type. They primarily provide support through email correspondence and in the past it had always been easy, but because of my hand it was just so difficult to type. I asked if someone could please contact me by phone because of my situation and what do know, I not only go a call back, but they were so helpful. Sometimes you find yourself in a tough spot in life and it is so nice to know that a there is a company out there that is willing to go out their way and go that extra mile to help a customer in need. Thank you so much!

I had so many CAVS discs I thought it would take forever to get the songs onto my computer. The SuperCDG Converter was so simple, easy and fast I couldn't ask for more. Great piece of software, you guys really know what you doing. Thanks so much.

I love the AutoPlay Controller as I can preset everything and let the show take care of itself, maybe the single greatest feature I have seen, also thanks for all your tireless efforts in assisting me all these years.

What will you guys come up with next? I can't wait haha! Keep bringing on the fun!

I would like to thank the CompuHost support team for their tireless efforts in assisting me. They went above and beyond what they should have to help me and I wouldn't have been able to do it without them. Thank you guys so much for truly caring about your customers.

Your guys are golden. My wife is so happy I will get a great big Kiss when she gets home. Thank You Very Much

I have been a Compuhost user since version 1.5 compuhost has never disappointed or left me wandering why I purchased the program. Compuhost has been very reliable and easy to use. Tech support when needed is outstanding. I have used the competitors software and would recommend Compuhost over all others.

I am so impressed with all of your products and especially CompuHost. The feature list outmatches every competitor on the market. All I can say that any one looking for Professional Karaoke Software should be using CompuHost!!!

I used Hoster for many years, but I finally wanted to use the best. For those of you who don't know Hoster uses a specialized format called KMA that can only be utilized in their application. In my opinion they do this so that if you decided to go with another application you may change your mind because of the hassle of having to "re-rip" all of your song files. Anyway, as I said I wanted to go with the best and if you don't know who the best is.. surprise it's CompuHost. Using their File Converter I was able to easily convert my KMA files into an MP3+G format which is now the industry standard for digital karaoke tracks. I have been using CompuHost V3 since its debut in early December of 2015. I say you can drive a Honda or a Maserati. I choose the Maserati. Thanks for all the great software and support.

If you're using any other Software as a professional KJ other than CompuHost; you are not a professional. You can take that to the bank! I have been doing Karaoke over 20 years and I've seen it all, better Karaoke Software does not exist.
Seriously I send my best,
Bart K.

Not only do I love that CompuHost is a US based company, but the sales people were so friendly and answered all of my questions. In an era where it seems you always get a computer recording or someone is just trying to get you off of the phone for a quick sale, my experience was so refreshing. Thank you to the sales team for taking the time to answer all of my questions, you guys are simply awesome!

Best Karaoke Software you can buy with absolutely no equivocations!

CompuHost has changed my life. As a KJ I was constantly being forced to use products that didn't live up to the hype they boasted, but CompuHost not only lives up to the hype, but surpasses it with flying colors. Thank you to everyone at Karaokeware. With your products on the market it is absolutely surprising that the other companies can even stay in business.

CompuHost is the absolute best Karaoke Hosting Software on the Market, Period! Thank you Karaokeware for both creating CompuHost and providing support that is unmatched in this Industry. You have a customer for all time.

With CompuHost can play a karaoke disc, a video karaoke disc, a supercdg and it allows me to play from a flash drive. My performers can bring in their own selections and I can play them without a hitch in the show, smooth as silk. This Software is TERRIFIC!!!

There is no other choice. Been a karaoke host since 1991 and a CompuHost user since V1. V3 is amazing and Songbooks Online is a gift from above. When a client asks me if I have a list of my karaoke songs I just have them how to download the free app and enter my SHOW ID. Then they can view my entire karaoke library from ANYWHERE IN THE WORLD!! Combine Songbooks Online with the Karaoke Kiosk on an event and you have an unbeatable combo for requests. With no bulky books!!

I can't believe my performers can send me their songs requests from their phones. This is so awesome I can't really put it into words. So I just say thank you.

I am a professional KJ. I do this for a living and my family depends on me to bring home the bacon, which means I have to have the best to not only compete in today's market, but to stay on the cutting edge of technology so that I can bring the very best experience to my singers and to my show. I have personally tested and or used every karaoke software on the market and there is not one karaoke hosting app that comes close to what CompuHost has to offer and you guys are always coming out with new features and functions that improves my shows. I am sending out a very special thanks from me and my family to the team at Karaokeware Incorporated. Your team and software is truly the best, not to mention the outstanding Support you have provided me over the years as well. Thank you again and God Bless you.

This software is so easy to use. Me and my family sing a few songs every night after dinner and is much fun. My daughter loves how she can set how many songs she can play per performance so she can sing 3 songs in a row before her sisters get a turn. We do not use professionally just for fun, but so terrific and easy to use, thank you.

I don't do this professionally, just for fun. But I can honestly say that their isn't a better product for karaoke on the market. Seriously such an amazing piece of software, me and my family spend hours on the weekend singing. Being able to spend such quality time with my family doing something that is so much fun is just such a blessing. Thank you for creating CompuHost and helping me bring my family together. God Bless everyone at Karaokeware

First to make a fair comparison CompuHost does everything every other Karaoke software program does, but BETTER and then does WAY MORE! I tell everyone looking for Karaoke software that there is only one option and that is Compuhost. No one else compares (Mtu .. Hoster .. Karma). I mean no offense to the other guys, but I tell my friends this, download the evaluation software of all the karaoke software you can find and put them all to the test. At the end of the day there is always only one winner standing, Compuhost! Thanks you guys for all the hard work you put into your software, my performers thank you too. You are the Best!

Top notch company from the products, from the services to the sales and support, simply a company that is "run" right. Thanks to all at your company I will be a customer for life.

You guys Rock!

Previously I used Karma and (comment redacted for public viewing). Now with CompuHost I finally have a real Professional piece of software that allows me to run a "REAL" Professional Show! Thank you guys at Karaokeware and keep up the great great work.
Respectfully,
Guy

IMAGINE...No more printed Songbooks!

Get UNLIMITED access to thousands of commercially legal, top quality Karaoke song selections for one low monthly rate!

Unlimited use of the highest quality song selections from the most requested label in the industry... SOUND CHOICE!

Thousands of high quality, commercially legal Karaoke song selections brought to you by DIGITRAX KARAOKE!

You have no items in your shopping cart.

Follow us on social media!

Connect with us on social media to keep up with the latest news, special offers and other updates.

So that we may properly direct your inquiry, how may we assist you?

SALES - Request Product Info and/or Purchasing information

HELP/SUPPORT - Request help or assistance with your Karaokeware software.

DISCOUNTED COMPUHOST V3 UPGRADE ELIGIBILITY

Please be reminded that the discounted CompuHost V3 Upgrade is valid ONLY toward upgrading an existing and fully activated CompuHost V1 or V2 installation and therefore reserved for previously registered CompuHost V1 or V2 users only.

Please answer the following so that we may assist with ensuring your upgrade eligibility...

Have you already installed the CompuHost V3 Evaluation on your computer?

NO
I HAVE NOT YET INSTALLED COMPUHOST V3 ON MY COMPUTER.

YES
I HAVE ALREADY INSTALLED COMPUHOST V3 ON MY COMPUTER.

To validate eligibility please follow these simple steps...
Launch your already installed and activated CompuHost V1 or V2.

Your CompuHost Serial Number is available by selecting "Help->About CompuHost" from the CompuHost Top Main Menu.

Please enter your CompuHost V1 or V2 Serial Number below and click "Validate Eligibility"

CHST---

BACK

To validate eligibility please follow these simple steps...

IMPORTANT! You MUST ensure the CompuHost V3 Evaluation has been installed on a computer with an already installed and fully activated CompuHost V1 or V2 license!

Launch CompuHost V3.

Select "Help->Activate Software Upgrade" from the CompuHost V3 Top Main Menu.

Click here if the "Help->Activate Software Upgrade" menu item is unavailable.

The "Software Upgrade Activation" dialog should appear whereby you'll be provided with your LICENSE ID and CONFIRMATION CODE.

Please enter your LICENSE ID and CONFIRMATION CODE below and click "Validate Eligibility"

LICENSE ID:

CONFIRMATION CODE:

<< BACK

THE "HELP->ACTIVATE SOFTWARE UPGRADE" MENU ITEM IS NOT FOUND!

Please be reminded that the CompuHost V3 Evaluation version MUST be installed on a computer with an already installed and fully activated CompuHost V1 or V2 license. If during startup, CompuHost V3 is unable to find a valid and fully activated CompuHost V1 or V2 license, the menu item will not be available.

GEN-I License Key (Dongle) Users
If utilizing the older GEN-I Licensing Model whereby a plugin License Key (Dongle) is required, please ensure you have installed the "HYBRID" version of CompuHost V3 supporting the GEN-I License Key, available by CLICKING HERE and that you have the License Key plugged in and initialized prior to launching CompuHost V3.

CLOSE

x
This website uses cookies to enhance your fully secure online shopping and checkout experience. More...That's Fine

x
This website uses cookies to enhance your fully secure online shopping and checkout experience.
Unfortunately, cookie acceptance appears to be disabled or blocked within your browser and may potentially prevent a successful and enjoyable online shopping experience.
Click here for help...