function JSlideImage() { this.defaults = { animationSpeed: 50, aspectRatio: 1.964, buttons: false, captions: true, circular: false, imageCursor: 'default', JSlideImageID: 'JSlideImage', imageFocusM: 1.0, imageFocusMax: 4, imagePath: '', imageScaling: true, imagesHeight: 0.67, imagesM: 1.0, onClick: function () { document.location = this.url }, opacity: false, opacityArray: [10, 8, 6, 4, 2], percentLandscape: 118, percentOther: 100, preloadImages: true, reflections: true, reflectionGET: '', reflectionP: 0.5, reflectionPNG: false, reflectPath: '', scrollbarP: 0.6, slider: true, sliderCursor: 'e-resize', sliderWidth: 14, slideshow: false, slideshowSpeed: 1500, slideshowAutoplay: false, startID: 1, glideToStartID: true, startAnimation: false, xStep: 150 }; var t = this; this.init = function (a) { for (var b in t.defaults) { this[b] = (a !== undefined && a[b] !== undefined) ? a[b] : t.defaults[b] } var c = document.getElementById(t.JSlideImageID); if (c) { c.style.visibility = 'visible'; this.JSlideImageDiv = c; if (this.createStructure()) { this.imagesDiv = document.getElementById(t.JSlideImageID + '_images'); this.captionDiv = document.getElementById(t.JSlideImageID + '_caption'); this.navigationDiv = document.getElementById(t.JSlideImageID + '_navigation'); this.scrollbarDiv = document.getElementById(t.JSlideImageID + '_scrollbar'); this.sliderDiv = document.getElementById(t.JSlideImageID + '_slider'); this.buttonNextDiv = document.getElementById(t.JSlideImageID + '_next'); this.buttonPreviousDiv = document.getElementById(t.JSlideImageID + '_previous'); this.buttonSlideshow = document.getElementById(t.JSlideImageID + '_slideshow'); this.indexArray = []; this.current = 0; this.imageID = 0; this.target = 0; this.memTarget = 0; this.firstRefresh = true; this.firstCheck = true; this.busy = false; var d = this.JSlideImageDiv.offsetWidth; var e = Math.round(d / t.aspectRatio); document.getElementById(t.JSlideImageID + '_loading_txt').style.paddingTop = ((e * 0.5) - 22) + 'px'; c.style.height = e + 'px'; this.loadingProgress() } } }; this.createStructure = function () { var a = t.Helper.createDocumentElement('div', 'images'); var b, version, src, imageNode; var c = t.JSlideImageDiv.childNodes.length; for (var d = 0; d < c; d++) { b = t.JSlideImageDiv.childNodes[d]; if (b && b.nodeType == 1 && b.nodeName == 'IMG') { if (t.reflections === true) { version = (t.reflectionPNG) ? '3' : '2'; src = t.imagePath + b.getAttribute('src', 2); src = t.reflectPath + 'reflect' + version + '.php?img=' + src + t.reflectionGET; b.setAttribute('src', src) } imageNode = b.cloneNode(true); a.appendChild(imageNode) } } if (t.circular) { var e = t.Helper.createDocumentElement('div', 'images'); var f = t.Helper.createDocumentElement('div', 'images'); c = a.childNodes.length; if (c < t.imageFocusMax) { t.imageFocusMax = c } if (c > 1) { var i; for (i = 0; i < c; i++) { b = a.childNodes[i]; if (i < t.imageFocusMax) { imageNode = b.cloneNode(true); e.appendChild(imageNode) } if (c - i < t.imageFocusMax + 1) { imageNode = b.cloneNode(true); f.appendChild(imageNode) } } for (i = 0; i < c; i++) { b = a.childNodes[i]; imageNode = b.cloneNode(true); f.appendChild(imageNode) } for (i = 0; i < t.imageFocusMax; i++) { b = e.childNodes[i]; imageNode = b.cloneNode(true); f.appendChild(imageNode) } a = f } } if (t.slideshow) { var g = t.Helper.createDocumentElement('div', 'slideshow'); a.appendChild(g) } var h = t.Helper.createDocumentElement('p', 'loading_txt'); var j = document.createTextNode(' '); h.appendChild(j); var k = t.Helper.createDocumentElement('div', 'loading'); var l = t.Helper.createDocumentElement('div', 'loading_bar'); k.appendChild(l); var m = t.Helper.createDocumentElement('div', 'caption'); var n = t.Helper.createDocumentElement('div', 'scrollbar'); var o = t.Helper.createDocumentElement('div', 'slider'); n.appendChild(o); if (t.buttons) { var p = t.Helper.createDocumentElement('div', 'previous', 'button'); var q = t.Helper.createDocumentElement('div', 'next', 'button'); n.appendChild(p); n.appendChild(q) } var r = t.Helper.createDocumentElement('div', 'navigation'); r.appendChild(m); r.appendChild(n); var s = false; if (t.JSlideImageDiv.appendChild(a) && t.JSlideImageDiv.appendChild(h) && t.JSlideImageDiv.appendChild(k) && t.JSlideImageDiv.appendChild(r)) { c = t.JSlideImageDiv.childNodes.length; for (d = 0; d < c; d++) { b = t.JSlideImageDiv.childNodes[d]; if (b && b.nodeType == 1 && b.nodeName == 'IMG') { t.JSlideImageDiv.removeChild(b) } } s = true } return s }; this.loadingProgress = function () { var p = t.loadingStatus(); if ((p < 100 || t.firstCheck) && t.preloadImages) { if (t.firstCheck && p == 100) { t.firstCheck = false; window.setTimeout(t.loadingProgress, 100) } else { window.setTimeout(t.loadingProgress, 40) } } else { document.getElementById(t.JSlideImageID + '_loading_txt').style.display = 'none'; document.getElementById(t.JSlideImageID + '_loading').style.display = 'none'; window.setTimeout(t.Helper.addResizeEvent, 1000); t.refresh(); if (t.max > 1) { t.MouseWheel.init(); t.MouseDrag.init(); t.Touch.init(); t.Key.init(); if (t.slideshow) { t.Slideshow.init() } if (t.slider) { t.scrollbarDiv.style.visibility = 'visible' } } } }; this.loadingStatus = function () { var a = t.imagesDiv.childNodes.length; var i = 0, completed = 0; var b = null; for (var c = 0; c < a; c++) { b = t.imagesDiv.childNodes[c]; if (b && b.nodeType == 1 && b.nodeName == 'IMG') { if (b.complete) { completed++ } i++ } } var d = Math.round((completed / i) * 100); var e = document.getElementById(t.JSlideImageID + '_loading_bar'); e.style.width = d + '%'; if (t.circular) { i = i - (t.imageFocusMax * 2); completed = (d < 1) ? 0 : Math.round((i / 100) * d) } var f = document.getElementById(t.JSlideImageID + '_loading_txt'); var g = document.createTextNode('loading images ' + completed + '/' + i); f.replaceChild(g, f.firstChild); return d }; this.refresh = function () { this.imagesDivWidth = t.imagesDiv.offsetWidth + t.imagesDiv.offsetLeft; this.maxHeight = Math.round(t.imagesDivWidth / t.aspectRatio); this.maxFocus = t.imageFocusMax * t.xStep; this.size = t.imagesDivWidth * 0.5; this.sliderWidth = t.sliderWidth * 0.5; this.scrollbarWidth = (t.imagesDivWidth - (Math.round(t.sliderWidth) * 2)) * t.scrollbarP; this.imagesDivHeight = Math.round(t.maxHeight * t.imagesHeight); t.JSlideImageDiv.style.height = t.maxHeight + 'px'; t.imagesDiv.style.height = t.imagesDivHeight + 'px'; t.navigationDiv.style.height = (t.maxHeight - t.imagesDivHeight) + 'px'; t.captionDiv.style.width = t.imagesDivWidth + 'px'; t.captionDiv.style.paddingTop = Math.round(t.imagesDivWidth * 0.02) + 'px'; t.scrollbarDiv.style.width = t.scrollbarWidth + 'px'; t.scrollbarDiv.style.marginTop = Math.round(t.imagesDivWidth * 0.02) + 'px'; t.scrollbarDiv.style.marginLeft = Math.round(t.sliderWidth + ((t.imagesDivWidth - t.scrollbarWidth) / 2)) + 'px'; t.sliderDiv.style.cursor = t.sliderCursor; t.sliderDiv.onmousedown = function () { t.MouseDrag.start(this); return false }; if (t.buttons) { t.buttonPreviousDiv.onclick = function () { t.MouseWheel.handle(1) }; t.buttonNextDiv.onclick = function () { t.MouseWheel.handle(-1) } } var a = (t.reflections === true) ? t.reflectionP + 1 : 1; var b = t.imagesDiv.childNodes.length; var i = 0; var c = null; for (var d = 0; d < b; d++) { c = t.imagesDiv.childNodes[d]; if (c !== null && c.nodeType == 1 && c.nodeName == 'IMG') { this.indexArray[i] = d; c.url = c.getAttribute('longdesc'); c.xPosition = (-i * t.xStep); c.i = i; if (t.firstRefresh) { if (c.getAttribute('width') !== null && c.getAttribute('height') !== null) { c.w = c.getAttribute('width'); c.h = c.getAttribute('height') * a } else { c.w = c.width; c.h = c.height } } if ((c.w) > (c.h / (t.reflectionP + 1))) { c.pc = t.percentLandscape; c.pcMem = t.percentLandscape } else { c.pc = t.percentOther; c.pcMem = t.percentOther } if (t.imageScaling === false) { c.style.position = 'relative'; c.style.display = 'inline' } c.style.cursor = t.imageCursor; i++ } } this.max = t.indexArray.length; if (t.imageScaling === false) { c = t.imagesDiv.childNodes[t.indexArray[0]]; this.totalImagesWidth = c.w * t.max; c.style.paddingLeft = (t.imagesDivWidth / 2) + (c.w / 2) + 'px'; t.imagesDiv.style.height = c.h + 'px'; t.navigationDiv.style.height = (t.maxHeight - c.h) + 'px' } if (t.firstRefresh) { t.firstRefresh = false; t.imageID = t.startID - 1; if (t.imageID < 0) { t.imageID = 0 } if (t.circular) { t.imageID = t.imageID + t.imageFocusMax } maxId = (t.circular) ? (t.max - (t.imageFocusMax)) - 1 : t.max - 1; if (t.imageID > maxId) { t.imageID = maxId } if (t.glideToStartID === false) { t.moveTo(-t.imageID * t.xStep) } if (t.startAnimation) { t.moveTo(5000) } } if (t.max > 1) { t.glideTo(t.imageID) } t.moveTo(t.current) }; this.moveTo = function (x) { this.current = x; this.zIndex = t.max; for (var a = 0; a < t.max; a++) { var b = t.imagesDiv.childNodes[t.indexArray[a]]; var c = a * -t.xStep; if (t.imageScaling) { if ((c + t.maxFocus) < t.memTarget || (c - t.maxFocus) > t.memTarget) { b.style.visibility = 'hidden'; b.style.display = 'none' } else { var z = (Math.sqrt(10000 + x * x) + 100) * t.imagesM; var d = x / z * t.size + t.size; b.style.display = 'block'; var e = (b.h / b.w * b.pc) / z * t.size; var f = 0; switch (e > t.maxHeight) { case false: f = b.pc / z * t.size; break; default: e = t.maxHeight; f = b.w * e / b.h; break } var g = (t.imagesDivHeight - e) + ((e / (t.reflectionP + 1)) * t.reflectionP); b.style.left = d - (b.pc / 2) / z * t.size + 'px'; if (f && e) { b.style.height = e + 'px'; b.style.width = f + 'px'; b.style.top = g + 'px' } b.style.visibility = 'visible'; switch (x < 0) { case true: this.zIndex++; break; default: this.zIndex = t.zIndex - 1; break } switch (b.i == t.imageID) { case false: b.onclick = function () { t.glideTo(this.i) }; break; default: this.zIndex = t.zIndex + 1; if (b.url !== '') { b.onclick = t.onClick } break } b.style.zIndex = t.zIndex } } else { if ((c + t.maxFocus) < t.memTarget || (c - t.maxFocus) > t.memTarget) { b.style.visibility = 'hidden' } else { b.style.visibility = 'visible'; switch (b.i == t.imageID) { case false: b.onclick = function () { t.glideTo(this.i) }; break; default: if (b.url !== '') { b.onclick = t.onClick } break } } t.imagesDiv.style.marginLeft = (x - t.totalImagesWidth) + 'px' } x += t.xStep } }; this.glideTo = function (a) { var b, clonedImageID; if (t.circular) { if (a + 1 === t.imageFocusMax) { clonedImageID = t.max - t.imageFocusMax; b = -clonedImageID * t.xStep; a = clonedImageID - 1 } if (a === (t.max - t.imageFocusMax)) { clonedImageID = t.imageFocusMax - 1; b = -clonedImageID * t.xStep; a = clonedImageID + 1 } } var x = -a * t.xStep; this.target = x; this.memTarget = x; this.imageID = a; var c = t.imagesDiv.childNodes[a].getAttribute('alt'); if (c === '' || t.captions === false) { c = '&nbsp;' } t.captionDiv.innerHTML = c; if (t.MouseDrag.busy === false) { if (t.circular) { this.newSliderX = ((a - t.imageFocusMax) * t.scrollbarWidth) / (t.max - (t.imageFocusMax * 2) - 1) - t.MouseDrag.newX } else { this.newSliderX = (a * t.scrollbarWidth) / (t.max - 1) - t.MouseDrag.newX } t.sliderDiv.style.marginLeft = (t.newSliderX - t.sliderWidth) + 'px' } if (t.opacity === true || t.imageFocusM !== t.defaults.imageFocusM) { t.Helper.setOpacity(t.imagesDiv.childNodes[a], t.opacityArray[0]); t.imagesDiv.childNodes[a].pc = t.imagesDiv.childNodes[a].pc * t.imageFocusM; var d = 0; var e = 0; var f = 0; var g = t.opacityArray.length; for (var i = 1; i < (t.imageFocusMax + 1); i++) { if ((i + 1) > g) { d = t.opacityArray[g - 1] } else { d = t.opacityArray[i] } e = a + i; f = a - i; if (e < t.max) { t.Helper.setOpacity(t.imagesDiv.childNodes[e], d); t.imagesDiv.childNodes[e].pc = t.imagesDiv.childNodes[e].pcMem } if (f >= 0) { t.Helper.setOpacity(t.imagesDiv.childNodes[f], d); t.imagesDiv.childNodes[f].pc = t.imagesDiv.childNodes[f].pcMem } } } if (b) { t.moveTo(b) } if (t.busy === false) { t.busy = true; t.animate() } }; this.animate = function () { switch (t.target < t.current - 1 || t.target > t.current + 1) { case true: t.moveTo(t.current + (t.target - t.current) / 3); window.setTimeout(t.animate, t.animationSpeed); t.busy = true; break; default: t.busy = false; break } }; this.glideOnEvent = function (a) { if (t.slideshow) { t.Slideshow.interrupt() } t.glideTo(a) }; this.Slideshow = { direction: 1, init: function () { (t.slideshowAutoplay) ? t.Slideshow.start() : t.Slideshow.stop() }, interrupt: function () { t.Helper.removeEvent(t.JSlideImageDiv, 'click', t.Slideshow.interrupt); t.Slideshow.stop() }, addInterruptEvent: function () { t.Helper.addEvent(t.JSlideImageDiv, 'click', t.Slideshow.interrupt) }, start: function () { t.Helper.setClassName(t.buttonSlideshow, 'slideshow pause'); t.buttonSlideshow.onclick = function () { t.Slideshow.stop() }; t.Slideshow.action = window.setInterval(t.Slideshow.slide, t.slideshowSpeed); window.setTimeout(t.Slideshow.addInterruptEvent, 100) }, stop: function () { t.Helper.setClassName(t.buttonSlideshow, 'slideshow play'); t.buttonSlideshow.onclick = function () { t.Slideshow.start() }; window.clearInterval(t.Slideshow.action) }, slide: function () { var a = t.imageID + t.Slideshow.direction; var b = false; if (a === t.max) { t.Slideshow.direction = -1; b = true } if (a < 0) { t.Slideshow.direction = 1; b = true } (b) ? t.Slideshow.slide() : t.glideTo(a) } }; this.MouseWheel = { init: function () { if (window.addEventListener) { t.JSlideImageDiv.addEventListener('DOMMouseScroll', t.MouseWheel.get, false) } t.Helper.addEvent(t.JSlideImageDiv, 'mousewheel', t.MouseWheel.get) }, get: function (a) { var b = 0; if (!a) { a = window.event } if (a.wheelDelta) { b = a.wheelDelta / 120 } else if (a.detail) { b = -a.detail / 3 } if (b) { t.MouseWheel.handle(b) } t.Helper.suppressBrowserDefault(a) }, handle: function (a) { var b = false; var c = 0; if (a > 0) { if (t.imageID >= 1) { c = t.imageID - 1; b = true } } else { if (t.imageID < (t.max - 1)) { c = t.imageID + 1; b = true } } if (b) { t.glideOnEvent(c) } } }; this.MouseDrag = { object: null, objectX: 0, mouseX: 0, newX: 0, busy: false, init: function () { t.Helper.addEvent(t.JSlideImageDiv, 'mousemove', t.MouseDrag.drag); t.Helper.addEvent(t.JSlideImageDiv, 'mouseup', t.MouseDrag.stop); t.Helper.addEvent(document, 'mouseup', t.MouseDrag.stop); t.JSlideImageDiv.onselectstart = function () { var a = true; if (t.MouseDrag.busy) { a = false } return a } }, start: function (o) { t.MouseDrag.object = o; t.MouseDrag.objectX = t.MouseDrag.mouseX - o.offsetLeft + t.newSliderX }, stop: function () { t.MouseDrag.object = null; t.MouseDrag.busy = false }, drag: function (e) { var a = 0; if (!e) { e = window.event } if (e.pageX) { a = e.pageX } else if (e.clientX) { a = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft } t.MouseDrag.mouseX = a; if (t.MouseDrag.object !== null) { var b = (t.MouseDrag.mouseX - t.MouseDrag.objectX) + t.sliderWidth; if (b < (-t.newSliderX)) { b = -t.newSliderX } if (b > (t.scrollbarWidth - t.newSliderX)) { b = t.scrollbarWidth - t.newSliderX } var c, imageID; if (t.circular) { c = (b + t.newSliderX) / (t.scrollbarWidth / (t.max - (t.imageFocusMax * 2) - 1)); imageID = Math.round(c) + t.imageFocusMax } else { c = (b + t.newSliderX) / (t.scrollbarWidth / (t.max - 1)); imageID = Math.round(c) } t.MouseDrag.newX = b; t.MouseDrag.object.style.left = b + 'px'; if (t.imageID !== imageID) { t.glideOnEvent(imageID) } t.MouseDrag.busy = true } } }; this.Touch = { x: 0, startX: 0, stopX: 0, busy: false, first: true, init: function () { t.Helper.addEvent(t.navigationDiv, 'touchstart', t.Touch.start); t.Helper.addEvent(document, 'touchmove', t.Touch.handle); t.Helper.addEvent(document, 'touchend', t.Touch.stop) }, isOnNavigationDiv: function (e) { var a = false; if (e.touches) { var b = e.touches[0].target; if (b === t.navigationDiv || b === t.sliderDiv || b === t.scrollbarDiv) { a = true } } return a }, getX: function (e) { var x = 0; if (e.touches) { x = e.touches[0].pageX } return x }, start: function (e) { t.Touch.startX = t.Touch.getX(e); t.Touch.busy = true; t.Helper.suppressBrowserDefault(e) }, isBusy: function () { var a = false; if (t.Touch.busy) { a = true } return a }, handle: function (e) { if (t.Touch.isBusy && t.Touch.isOnNavigationDiv(e)) { var a = (t.circular) ? (t.max - (t.imageFocusMax * 2) - 1) : (t.max - 1); if (t.Touch.first) { t.Touch.stopX = (a - t.imageID) * (t.imagesDivWidth / a); t.Touch.first = false } var b = -(t.Touch.getX(e) - t.Touch.startX - t.Touch.stopX); if (b < 0) { b = 0 } if (b > t.imagesDivWidth) { b = t.imagesDivWidth } t.Touch.x = b; var c = Math.round(b / (t.imagesDivWidth / a)); c = a - c; if (t.imageID !== c) { if (t.circular) { c = c + t.imageFocusMax } t.glideOnEvent(c) } t.Helper.suppressBrowserDefault(e) } }, stop: function () { t.Touch.stopX = t.Touch.x; t.Touch.busy = false } }; this.Key = { init: function () { document.onkeydown = function (a) { t.Key.handle(a) } }, handle: function (a) { var b = t.Key.get(a); switch (b) { case 39: t.MouseWheel.handle(-1); break; case 37: t.MouseWheel.handle(1); break } }, get: function (a) { a = a || window.event; return a.keyCode } }; this.Helper = { addEvent: function (a, b, c) { if (a.addEventListener) { a.addEventListener(b, c, false) } else if (a.attachEvent) { a["e" + b + c] = c; a[b + c] = function () { a["e" + b + c](window.event) }; a.attachEvent("on" + b, a[b + c]) } }, removeEvent: function (a, b, c) { if (a.removeEventListener) { a.removeEventListener(b, c, false) } else if (a.detachEvent) { if (a[b + c] === undefined) { alert('Helper.removeEvent » Pointer to detach event is undefined - perhaps you are trying to detach an unattached event?') } a.detachEvent('on' + b, a[b + c]); a[b + c] = null; a['e' + b + c] = null } }, setOpacity: function (a, b) { if (t.opacity === true) { a.style.opacity = b / 10; a.style.filter = 'alpha(opacity=' + b * 10 + ')' } }, createDocumentElement: function (a, b, c) { var d = document.createElement(a); d.setAttribute('id', t.JSlideImageID + '_' + b); if (c !== undefined) { b += ' ' + c } t.Helper.setClassName(d, b); return d }, setClassName: function (a, b) { if (a) { a.setAttribute('class', b); a.setAttribute('className', b) } }, suppressBrowserDefault: function (e) { if (e.preventDefault) { e.preventDefault() } else { e.returnValue = false } return false }, addResizeEvent: function () { var a = window.onresize; if (typeof window.onresize != 'function') { window.onresize = function () { t.refresh() } } else { window.onresize = function () { if (a) { a() } t.refresh() } } } } } var domReadyEvent = { name: "domReadyEvent", events: {}, domReadyID: 1, bDone: false, DOMContentLoadedCustom: null, add: function (a) { if (!a.$$domReadyID) { a.$$domReadyID = this.domReadyID++; if (this.bDone) { a() } this.events[a.$$domReadyID] = a } }, remove: function (a) { if (a.$$domReadyID) { delete this.events[a.$$domReadyID] } }, run: function () { if (this.bDone) { return } this.bDone = true; for (var i in this.events) { this.events[i]() } }, schedule: function () { if (this.bDone) { return } if (/KHTML|WebKit/i.test(navigator.userAgent)) { if (/loaded|complete/.test(document.readyState)) { this.run() } else { setTimeout(this.name + ".schedule()", 100) } } else if (document.getElementById("__ie_onload")) { return true } if (typeof this.DOMContentLoadedCustom === "function") { if (typeof document.getElementsByTagName !== 'undefined' && (document.getElementsByTagName('body')[0] !== null || document.body !== null)) { if (this.DOMContentLoadedCustom()) { this.run() } else { setTimeout(this.name + ".schedule()", 250) } } } return true }, init: function () { if (document.addEventListener) { document.addEventListener("DOMContentLoaded", function () { domReadyEvent.run() }, false) } setTimeout("domReadyEvent.schedule()", 100); function run() { domReadyEvent.run() } if (typeof addEvent !== "undefined") { addEvent(window, "load", run) } else if (document.addEventListener) { document.addEventListener("load", run, false) } else if (typeof window.onload === "function") { var a = window.onload; window.onload = function () { domReadyEvent.run(); a() } } else { window.onload = run } /*@cc_on@if(@_win32||@_win64)document.write("<script id=__ie_onload defer src=\"//:\"><\/script>"); var b = document.getElementById("__ie_onload"); b.onreadystatechange = function () { if (this.readyState == "complete") { domReadyEvent.run() } }; @end@*/ } }; var domReady = function (a) { domReadyEvent.add(a) }; domReadyEvent.init();
domReady(function()
{
	var instanceOne = new JSlideImage();
	instanceOne.init({ JSlideImageID: 'myJSlideImage', captions: false, slider: false, reflections: false, reflectionP: 0.4, opacity: true, startID: 3, startAnimation: true, imageFocusM: 1.5 , onClick: function(){return false;} }); 
});