+++ /dev/null
-/*\r
- * imgAreaSelect jQuery plugin\r
- * version 0.7\r
- *\r
- * Copyright (c) 2008-2009 Michal Wojciechowski (odyniec.net)\r
- *\r
- * Dual licensed under the MIT (MIT-LICENSE.txt) \r
- * and GPL (GPL-LICENSE.txt) licenses.\r
- *\r
- * http://odyniec.net/projects/imgareaselect/\r
- *\r
- */\r
-\r
-jQuery.imgAreaSelect = { onKeyPress: null };\r
-\r
-jQuery.imgAreaSelect.init = function (img, options) {\r
- var $img = jQuery(img), $area = jQuery('<div />'),\r
- $border1 = jQuery('<div />'), $border2 = jQuery('<div />'),\r
- $areaOver = jQuery('<div />'), $areaOver2,\r
- $outLeft = jQuery('<div />'), $outTop = jQuery('<div />'),\r
- $outRight = jQuery('<div />'), $outBottom = jQuery('<div />'),\r
- $handles, handleWidth, handles = [ ],\r
- left, top, imgOfs, imgWidth, imgHeight, parent, parOfs, parScroll,\r
- zIndex = 0, position = 'absolute', $p, startX, startY, moveX, moveY,\r
- resizeMargin = 10, resize = [ ], V = 0, H = 1,\r
- keyDown, d, aspectRatio, x1, x2, y1, y2, x, y, adjusted,\r
- selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 };\r
-\r
- var $a = $area.add($border1).add($border2).add($areaOver);\r
- var $o = $outLeft.add($outTop).add($outRight).add($outBottom);\r
-\r
- function viewX(x)\r
- {\r
- return x + imgOfs.left + parScroll.left - parOfs.left;\r
- }\r
-\r
- function viewY(y)\r
- {\r
- return y + imgOfs.top + parScroll.top - parOfs.top;\r
- }\r
-\r
- function selX(x)\r
- {\r
- return x - imgOfs.left - parScroll.left + parOfs.left;\r
- }\r
-\r
- function selY(y)\r
- {\r
- return y - imgOfs.top - parScroll.top + parOfs.top;\r
- }\r
-\r
- function evX(event)\r
- {\r
- return event.pageX + parScroll.left - parOfs.left;\r
- }\r
-\r
- function evY(event)\r
- {\r
- return event.pageY + parScroll.top - parOfs.top;\r
- }\r
-\r
- function getZIndex()\r
- {\r
- $p = $img;\r
-\r
- while ($p.length && !$p.is('body')) {\r
- if (!isNaN($p.css('z-index')) && $p.css('z-index') > zIndex)\r
- zIndex = $p.css('z-index');\r
- if ($p.css('position') == 'fixed')\r
- position = 'fixed';\r
-\r
- $p = $p.parent();\r
- }\r
- }\r
-\r
- function adjust()\r
- {\r
- imgOfs = $img.offset();\r
- imgOfs.left = parseInt(imgOfs.left) + parseInt($img.css("border-left-width")) + parseInt($img.css("padding-left"));\r
- imgOfs.top = parseInt(imgOfs.top) + parseInt($img.css("border-top-width")) + parseInt($img.css("padding-top"));\r
- imgWidth = $img.width();\r
- imgHeight = $img.height(); \r
-\r
- if (jQuery(parent).is('body'))\r
- parOfs = parScroll = { left: 0, top: 0 };\r
- else {\r
- parOfs = jQuery(parent).offset();\r
- parScroll = { left: parent.scrollLeft, top: parent.scrollTop };\r
- }\r
-\r
- left = viewX(0);\r
- top = viewY(0);\r
- }\r
-\r
- function update(resetKeyPress)\r
- {\r
- $a.css({\r
- left: viewX(selection.x1) + 'px',\r
- top: viewY(selection.y1) + 'px',\r
- width: Math.max(selection.width - options.borderWidth * 2, 0) + 'px',\r
- height: Math.max(selection.height - options.borderWidth * 2, 0) + 'px'\r
- });\r
- $areaOver.css({ width: selection.width + 'px', height: selection.height + 'px' });\r
- $outLeft.css({ left: left + 'px', top: top + 'px',\r
- width: selection.x1 + 'px', height: imgHeight + 'px' });\r
- $outTop.css({ left: left + selection.x1 + 'px', top: top + 'px',\r
- width: selection.width + 'px', height: selection.y1 + 'px' });\r
- $outRight.css({ left: left + selection.x2 + 'px', top: top + 'px',\r
- width: imgWidth - selection.x2 + 'px', height: imgHeight + 'px' });\r
- $outBottom.css({ left: left + selection.x1 + 'px', top: top + selection.y2 + 'px',\r
- width: selection.width + 'px', height: imgHeight - selection.y2 + 'px' });\r
-\r
- if ($handles) {\r
- handles[0].css({ left: viewX(selection.x1) + 'px',\r
- top: viewY(selection.y1) + 'px' });\r
- handles[1].css({ left: viewX(selection.x2 - handleWidth) + 'px',\r
- top: viewY(selection.y1) + 'px' });\r
- handles[2].css({ left: viewX(selection.x1) + 'px',\r
- top: viewY(selection.y2 - handleWidth) + 'px' });\r
- handles[3].css({ left: viewX(selection.x2 - handleWidth) + 'px',\r
- top: viewY(selection.y2 - handleWidth) + 'px' });\r
-\r
- if (handles.length == 8) {\r
- handles[4].css({ left: viewX(selection.x1 + (selection.width -\r
- handleWidth) / 2) + 'px', top: viewY(selection.y1) + 'px' });\r
- handles[5].css({ left: viewX(selection.x1) + 'px', top: \r
- viewY(selection.y1 + (selection.height - handleWidth) / 2) + 'px' });\r
- handles[6].css({ left: viewX(selection.x1 + (selection.width - handleWidth)\r
- / 2) + 'px', top: viewY(selection.y2 - handleWidth) + 'px' });\r
- handles[7].css({ left: viewX(selection.x2 - handleWidth) + 'px', top:\r
- viewY(selection.y1 + (selection.height - handleWidth) / 2) + 'px' });\r
- }\r
-\r
- for (var i = 0; i < handles.length; i++) {\r
- if (selX(parseInt(handles[i].css('left'))) < 0)\r
- handles[i].css('left', viewX(0) + 'px');\r
- if (selX(parseInt(handles[i].css('left'))) > imgWidth - handleWidth)\r
- handles[i].css('left', viewX(imgWidth - handleWidth) + 'px');\r
- if (selY(parseInt(handles[i].css('top'))) < 0)\r
- handles[i].css('top', viewY(0) + 'px');\r
- if (selY(parseInt(handles[i].css('top'))) > imgHeight - handleWidth)\r
- handles[i].css('top', viewY(imgHeight - handleWidth) + 'px');\r
- }\r
- }\r
-\r
- if (resetKeyPress !== false) {\r
- if (jQuery.imgAreaSelect.keyPress != docKeyPress)\r
- jQuery(document).unbind(jQuery.imgAreaSelect.keyPress,\r
- jQuery.imgAreaSelect.onKeyPress);\r
-\r
- if (options.keys)\r
- jQuery(document).bind(jQuery.imgAreaSelect.keyPress,\r
- jQuery.imgAreaSelect.onKeyPress = docKeyPress);\r
- }\r
- }\r
-\r
- function areaMouseMove(event)\r
- {\r
- if (!adjusted) {\r
- adjust();\r
- adjusted = true;\r
-\r
- $a.one('mouseout', function () { adjusted = false; });\r
- }\r
-\r
- x = selX(evX(event)) - selection.x1;\r
- y = selY(evY(event)) - selection.y1;\r
-\r
- resize = [ ];\r
-\r
- if (options.resizable) {\r
- if (y <= resizeMargin)\r
- resize[V] = 'n';\r
- else if (y >= selection.height - resizeMargin)\r
- resize[V] = 's';\r
- if (x <= resizeMargin)\r
- resize[H] = 'w';\r
- else if (x >= selection.width - resizeMargin)\r
- resize[H] = 'e';\r
- }\r
-\r
- $areaOver.css('cursor', resize.length ? resize.join('') + '-resize' :\r
- options.movable ? 'move' : '');\r
- if ($areaOver2)\r
- $areaOver2.toggle();\r
- }\r
-\r
- function areaMouseDown(event)\r
- {\r
- if (event.which != 1) return false;\r
-\r
- adjust();\r
-\r
- if (options.resizable && resize.length > 0) {\r
- jQuery('body').css('cursor', resize.join('') + '-resize');\r
-\r
- x1 = viewX(selection[resize[H] == 'w' ? 'x2' : 'x1']);\r
- y1 = viewY(selection[resize[V] == 'n' ? 'y2' : 'y1']);\r
-\r
- jQuery(document).mousemove(selectingMouseMove);\r
- $areaOver.unbind('mousemove', areaMouseMove);\r
-\r
- jQuery(document).one('mouseup', function () {\r
- resize = [ ];\r
-\r
- jQuery('body').css('cursor', '');\r
-\r
- if (options.autoHide || selection.width == 0 || selection.height == 0)\r
- $a.add($o).add($handles).hide();\r
-\r
- options.onSelectEnd(img, selection);\r
-\r
- jQuery(document).unbind('mousemove', selectingMouseMove);\r
- $areaOver.mousemove(areaMouseMove);\r
- });\r
- }\r
- else if (options.movable) {\r
- moveX = selection.x1 + left;\r
- moveY = selection.y1 + top;\r
- startX = evX(event);\r
- startY = evY(event);\r
-\r
- $areaOver.unbind('mousemove', areaMouseMove);\r
-\r
- jQuery(document).mousemove(movingMouseMove)\r
- .one('mouseup', function () {\r
- options.onSelectEnd(img, selection);\r
-\r
- jQuery(document).unbind('mousemove', movingMouseMove);\r
- $areaOver.mousemove(areaMouseMove);\r
- });\r
- }\r
- else\r
- $img.mousedown(event);\r
-\r
- return false;\r
- }\r
-\r
- function aspectRatioXY()\r
- {\r
- x2 = Math.max(left, Math.min(left + imgWidth,\r
- x1 + Math.abs(y2 - y1) * aspectRatio * (x2 >= x1 ? 1 : -1)));\r
- y2 = Math.round(Math.max(top, Math.min(top + imgHeight,\r
- y1 + Math.abs(x2 - x1) / aspectRatio * (y2 >= y1 ? 1 : -1))));\r
- x2 = Math.round(x2);\r
- }\r
-\r
- function aspectRatioYX()\r
- {\r
- y2 = Math.max(top, Math.min(top + imgHeight,\r
- y1 + Math.abs(x2 - x1) / aspectRatio * (y2 >= y1 ? 1 : -1)));\r
- x2 = Math.round(Math.max(left, Math.min(left + imgWidth,\r
- x1 + Math.abs(y2 - y1) * aspectRatio * (x2 >= x1 ? 1 : -1))));\r
- y2 = Math.round(y2);\r
- }\r
-\r
- function doResize(newX2, newY2)\r
- {\r
- x2 = newX2;\r
- y2 = newY2;\r
-\r
- if (options.minWidth && Math.abs(x2 - x1) < options.minWidth) {\r
- x2 = x1 - options.minWidth * (x2 < x1 ? 1 : -1);\r
-\r
- if (x2 < left)\r
- x1 = left + options.minWidth;\r
- else if (x2 > left + imgWidth)\r
- x1 = left + imgWidth - options.minWidth;\r
- }\r
-\r
- if (options.minHeight && Math.abs(y2 - y1) < options.minHeight) {\r
- y2 = y1 - options.minHeight * (y2 < y1 ? 1 : -1);\r
-\r
- if (y2 < top)\r
- y1 = top + options.minHeight;\r
- else if (y2 > top + imgHeight)\r
- y1 = top + imgHeight - options.minHeight;\r
- }\r
-\r
- x2 = Math.max(left, Math.min(x2, left + imgWidth));\r
- y2 = Math.max(top, Math.min(y2, top + imgHeight));\r
-\r
- if (aspectRatio)\r
- if (Math.abs(x2 - x1) / aspectRatio > Math.abs(y2 - y1))\r
- aspectRatioYX();\r
- else\r
- aspectRatioXY();\r
-\r
- if (options.maxWidth && Math.abs(x2 - x1) > options.maxWidth) {\r
- x2 = x1 - options.maxWidth * (x2 < x1 ? 1 : -1);\r
- if (aspectRatio) aspectRatioYX();\r
- }\r
-\r
- if (options.maxHeight && Math.abs(y2 - y1) > options.maxHeight) {\r
- y2 = y1 - options.maxHeight * (y2 < y1 ? 1 : -1);\r
- if (aspectRatio) aspectRatioXY();\r
- }\r
-\r
- selection = { x1: selX(Math.min(x1, x2)), x2: selX(Math.max(x1, x2)),\r
- y1: selY(Math.min(y1, y2)), y2: selY(Math.max(y1, y2)),\r
- width: Math.abs(x2 - x1), height: Math.abs(y2 - y1) };\r
-\r
- update();\r
-\r
- options.onSelectChange(img, selection);\r
- }\r
-\r
- function selectingMouseMove(event)\r
- {\r
- x2 = !resize.length || resize[H] || aspectRatio ? evX(event) : viewX(selection.x2);\r
- y2 = !resize.length || resize[V] || aspectRatio ? evY(event) : viewY(selection.y2);\r
-\r
- doResize(x2, y2);\r
-\r
- return false; \r
- }\r
-\r
- function doMove(newX1, newY1)\r
- {\r
- x2 = (x1 = newX1) + selection.width;\r
- y2 = (y1 = newY1) + selection.height;\r
-\r
- selection.x1 = selX(x1);\r
- selection.y1 = selY(y1);\r
- selection.x2 = selX(x2);\r
- selection.y2 = selY(y2);\r
-\r
- update();\r
-\r
- options.onSelectChange(img, selection);\r
- }\r
-\r
- function movingMouseMove(event)\r
- {\r
- var newX1 = Math.max(left, Math.min(moveX + evX(event) - startX,\r
- left + imgWidth - selection.width));\r
- var newY1 = Math.max(top, Math.min(moveY + evY(event) - startY,\r
- top + imgHeight - selection.height));\r
-\r
- doMove(newX1, newY1);\r
-\r
- event.preventDefault(); \r
- return false;\r
- }\r
-\r
- function startSelection(event)\r
- {\r
- adjust();\r
-\r
- selection = { x1: selX(x1), y1: selY(y1) }; \r
- doResize(x1, y1);\r
-\r
- resize = [ ];\r
-\r
- $a.add($o).add($handles).show();\r
-\r
- jQuery(document).unbind('mouseup', cancelSelection)\r
- .mousemove(selectingMouseMove);\r
- $areaOver.unbind('mousemove', areaMouseMove);\r
-\r
- options.onSelectStart(img, selection);\r
-\r
- jQuery(document).one('mouseup', function () {\r
- if (options.autoHide || (selection.width * selection.height == 0))\r
- $a.add($o).add($handles).hide();\r
-\r
- options.onSelectEnd(img, selection);\r
-\r
- jQuery(document).unbind('mousemove', selectingMouseMove);\r
- $areaOver.mousemove(areaMouseMove);\r
- });\r
- }\r
-\r
- function cancelSelection()\r
- {\r
- jQuery(document).unbind('mousemove', startSelection);\r
- $a.add($o).add($handles).hide();\r
-\r
- selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 };\r
-\r
- options.onSelectChange(img, selection);\r
- options.onSelectEnd(img, selection);\r
- }\r
-\r
- function imgMouseDown(event)\r
- {\r
- if (event.which != 1) return false;\r
-\r
- startX = x1 = evX(event);\r
- startY = y1 = evY(event);\r
-\r
- jQuery(document).one('mousemove', startSelection)\r
- .one('mouseup', cancelSelection);\r
-\r
- return false;\r
- }\r
-\r
- function windowResize()\r
- {\r
- adjust();\r
- update(false);\r
- x1 = viewX(selection.x1);\r
- y1 = viewY(selection.y1);\r
- x2 = viewX(selection.x2);\r
- y2 = viewY(selection.y2);\r
- }\r
-\r
- var docKeyPress = function(event) {\r
- var k = options.keys, d = 10, t,\r
- key = event.keyCode || event.which;\r
-\r
- if (!isNaN(k.arrows)) d = k.arrows;\r
- if (!isNaN(k.shift) && event.shiftKey) d = k.shift;\r
- if (!isNaN(k.ctrl) && event.ctrlKey) d = k.ctrl;\r
- if (!isNaN(k.alt) && (event.altKey || event.originalEvent.altKey)) d = k.alt;\r
-\r
- if (k.arrows == 'resize' || (k.shift == 'resize' && event.shiftKey) ||\r
- (k.ctrl == 'resize' && event.ctrlKey) ||\r
- (k.alt == 'resize' && (event.altKey || event.originalEvent.altKey)))\r
- {\r
- switch (key) {\r
- case 37:\r
- d = -d;\r
- case 39:\r
- t = Math.max(x1, x2);\r
- x1 = Math.min(x1, x2);\r
- x2 = Math.max(t + d, x1);\r
- if (aspectRatio) aspectRatioYX();\r
- break;\r
- case 38:\r
- d = -d;\r
- case 40:\r
- t = Math.max(y1, y2);\r
- y1 = Math.min(y1, y2);\r
- y2 = Math.max(t + d, y1);\r
- if (aspectRatio) aspectRatioXY();\r
- break;\r
- default:\r
- return;\r
- }\r
-\r
- doResize(x2, y2);\r
- }\r
- else {\r
- x1 = Math.min(x1, x2);\r
- y1 = Math.min(y1, y2);\r
-\r
- switch (key) {\r
- case 37:\r
- doMove(Math.max(x1 - d, left), y1);\r
- break;\r
- case 38:\r
- doMove(x1, Math.max(y1 - d, top));\r
- break;\r
- case 39:\r
- doMove(x1 + Math.min(d, imgWidth - selX(x2)), y1);\r
- break;\r
- case 40:\r
- doMove(x1, y1 + Math.min(d, imgHeight - selY(y2)));\r
- break;\r
- default:\r
- return;\r
- }\r
- }\r
-\r
- return false;\r
- };\r
-\r
- this.setOptions = function(newOptions)\r
- {\r
- options = jQuery.extend(options, newOptions);\r
-\r
- if (newOptions.x1 != null) {\r
- selection = { x1: newOptions.x1, y1: newOptions.y1,\r
- x2: newOptions.x2, y2: newOptions.y2 };\r
- newOptions.show = true;\r
- }\r
-\r
- if (newOptions.keys)\r
- options.keys = jQuery.extend({ shift: 1, ctrl: 'resize' },\r
- newOptions.keys === true ? { } : newOptions.keys);\r
-\r
- parent = jQuery(options.parent).get(0);\r
-\r
- adjust();\r
-\r
- getZIndex();\r
-\r
- x1 = viewX(selection.x1);\r
- y1 = viewY(selection.y1);\r
- x2 = viewX(selection.x2);\r
- y2 = viewY(selection.y2);\r
- selection.width = x2 - x1;\r
- selection.height = y2 - y1;\r
-\r
- if ($handles) {\r
- $handles.remove();\r
- $handles = null;\r
- handles = [ ];\r
- }\r
-\r
- if (options.handles) {\r
- for (var i = 0; i < (options.handles == 'corners' ? 4 : 8); i++)\r
- $handles = $handles ? $handles.add(handles[i] = jQuery('<div />')) :\r
- handles[i] = jQuery('<div />');\r
-\r
- handleWidth = 4 + options.borderWidth;\r
-\r
- $handles.css({ position: position, borderWidth: options.borderWidth,\r
- borderStyle: 'solid', borderColor: options.borderColor1, \r
- backgroundColor: options.borderColor2, display: $area.css('display'),\r
- width: handleWidth + 'px', height: handleWidth + 'px',\r
- fontSize: '0px', zIndex: zIndex > 0 ? zIndex + 1 : '1' });\r
- $handles.addClass(options.classPrefix + '-handle');\r
-\r
- handleWidth += options.borderWidth * 2;\r
- }\r
-\r
- $o.addClass(options.classPrefix + '-outer');\r
- $area.addClass(options.classPrefix + '-selection');\r
- $border1.addClass(options.classPrefix + '-border1');\r
- $border2.addClass(options.classPrefix + '-border2');\r
-\r
- $a.css({ borderWidth: options.borderWidth + 'px' });\r
- $area.css({ backgroundColor: options.selectionColor, opacity: options.selectionOpacity }); \r
- $border1.css({ borderStyle: 'solid', borderColor: options.borderColor1 });\r
- $border2.css({ borderStyle: 'dashed', borderColor: options.borderColor2 });\r
- $o.css({ opacity: options.outerOpacity, backgroundColor: options.outerColor });\r
-\r
- jQuery(options.parent).append($o.add($a).add($handles));\r
-\r
- update();\r
-\r
- if (newOptions.hide)\r
- $a.add($o).add($handles).hide();\r
- else if (newOptions.show)\r
- $a.add($o).add($handles).show();\r
-\r
- aspectRatio = options.aspectRatio && (d = options.aspectRatio.split(/:/)) ?\r
- d[0] / d[1] : null;\r
-\r
- if (aspectRatio)\r
- if (options.minWidth)\r
- options.minHeight = parseInt(options.minWidth / aspectRatio);\r
- else if (options.minHeight)\r
- options.minWidth = parseInt(options.minHeight * aspectRatio);\r
-\r
- if (options.disable || options.enable === false) {\r
- $areaOver.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown);\r
- $img.add($o).unbind('mousedown', imgMouseDown);\r
- jQuery(window).unbind('resize', windowResize);\r
- }\r
- else if (options.enable || options.disable === false) {\r
- if (options.resizable || options.movable)\r
- $areaOver.mousemove(areaMouseMove).mousedown(areaMouseDown);\r
-\r
- if (!options.persistent)\r
- $img.add($o).mousedown(imgMouseDown);\r
- jQuery(window).resize(windowResize);\r
- }\r
-\r
- options.enable = options.disable = undefined;\r
- };\r
-\r
- if (jQuery.browser.msie) \r
- $img.attr('unselectable', 'on');\r
-\r
- jQuery.imgAreaSelect.keyPress = jQuery.browser.msie ||\r
- jQuery.browser.safari ? 'keydown' : 'keypress';\r
-\r
- if (jQuery.browser.opera)\r
- $areaOver.append($areaOver2 = jQuery('<div style="width: 100%; height: 100%;" />'));\r
-\r
- getZIndex();\r
-\r
- $a.add($o).css({ display: 'none', position: position,\r
- overflow: 'hidden', zIndex: zIndex > 0 ? zIndex : '0' });\r
- $areaOver.css({ zIndex: zIndex > 0 ? zIndex + 2 : '2' });\r
- $area.css({ borderStyle: 'solid' });\r
-\r
- this.setOptions(options = jQuery.extend({\r
- borderColor1: '#000',\r
- borderColor2: '#fff',\r
- borderWidth: 1,\r
- classPrefix: 'imgareaselect',\r
- movable: true,\r
- resizable: true,\r
- selectionColor: '#fff',\r
- selectionOpacity: 0.2,\r
- outerColor: '#000',\r
- outerOpacity: 0.2,\r
- parent: 'body',\r
- onSelectStart: function () {},\r
- onSelectChange: function () {},\r
- onSelectEnd: function () {}\r
- }, options));\r
-};\r
-\r
-jQuery.fn.imgAreaSelect = function (options) {\r
- options = options || {};\r
-\r
- this.each(function () {\r
- if (jQuery(this).data('imgAreaSelect'))\r
- jQuery(this).data('imgAreaSelect').setOptions(options);\r
- else {\r
- if (options.enable === undefined && options.disable === undefined)\r
- options.enable = true;\r
-\r
- jQuery(this).data('imgAreaSelect', new jQuery.imgAreaSelect.init(this, options));\r
- }\r
- });\r
-\r
- return this;\r
-};\r
+++ /dev/null
-//***********************************************************************************************************************************/\r
-// LyteBox v3.22\r
-//\r
-// Author: Markus F. Hay\r
-// Website: http://www.dolem.com/lytebox\r
-// Date: October 2, 2007\r
-// License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)\r
-// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):\r
-// * Firefox: 2.0.0.7, 1.5.0.12\r
-// * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2\r
-// * Opera: 9.23\r
-//\r
-// Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62\r
-// * v3.22 (10/02/07)\r
-// * v3.21 (09/30/07)\r
-// * v3.20 (07/12/07)\r
-// * v3.10 (05/28/07)\r
-// * v3.00 (05/15/07)\r
-// * v2.02 (11/13/06)\r
-//\r
-// Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more\r
-// information please visit http://huddletogether.com/projects/lightbox2/\r
-//***********************************************************************************************************************************/\r
-Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }\r
-Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }\r
-String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }\r
-\r
-function LyteBox() {\r
- /*** Start Global Configuration ***/\r
- this.theme = 'grey'; // themes: grey (default), red, green, blue, gold\r
- this.hideFlash = true; // controls whether or not Flash objects should be hidden\r
- this.outerBorder = true; // controls whether to show the outer grey (or theme) border\r
- this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)\r
- this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay\r
- this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number\r
- this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions\r
- this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.\r
- \r
- this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...\r
- /*** End Global Configuration ***/\r
- \r
- /*** Configure Slideshow Options ***/\r
- this.slideInterval = 4000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)\r
- this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide\r
- this.showClose = true; // true to display the Close button, false to hide\r
- this.showDetails = true; // true to display image details (caption, count), false to hide\r
- this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide\r
- this.autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open\r
- this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked\r
- this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked\r
- /*** End Slideshow Configuration ***/\r
- \r
- if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }\r
- if(this.resizeSpeed < 1) { resizeSpeed = 1; }\r
- this.resizeDuration = (11 - this.resizeSpeed) * 0.15;\r
- this.resizeWTimerArray = new Array();\r
- this.resizeWTimerCount = 0;\r
- this.resizeHTimerArray = new Array();\r
- this.resizeHTimerCount = 0;\r
- this.showContentTimerArray = new Array();\r
- this.showContentTimerCount = 0;\r
- this.overlayTimerArray = new Array();\r
- this.overlayTimerCount = 0;\r
- this.imageTimerArray = new Array();\r
- this.imageTimerCount = 0;\r
- this.timerIDArray = new Array();\r
- this.timerIDCount = 0;\r
- this.slideshowIDArray = new Array();\r
- this.slideshowIDCount = 0;\r
- this.imageArray = new Array();\r
- this.activeImage = null;\r
- this.slideArray = new Array();\r
- this.activeSlide = null;\r
- this.frameArray = new Array();\r
- this.activeFrame = null;\r
- this.checkFrame();\r
- this.isSlideshow = false;\r
- this.isLyteframe = false;\r
- /*@cc_on\r
- /*@if (@_jscript)\r
- this.ie = (document.all && !window.opera) ? true : false;\r
- /*@else @*/\r
- this.ie = false;\r
- /*@end\r
- @*/\r
- this.ie7 = (this.ie && window.XMLHttpRequest); \r
- this.initialize();\r
-}\r
-LyteBox.prototype.initialize = function() {\r
- this.updateLyteboxItems();\r
- var objBody = this.doc.getElementsByTagName("body").item(0); \r
- if (this.doc.getElementById('lbOverlay')) {\r
- objBody.removeChild(this.doc.getElementById("lbOverlay"));\r
- objBody.removeChild(this.doc.getElementById("lbMain"));\r
- }\r
- var objOverlay = this.doc.createElement("div");\r
- objOverlay.setAttribute('id','lbOverlay');\r
- objOverlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- if ((this.ie && !this.ie7) || (this.ie7 && this.doc.compatMode == 'BackCompat')) {\r
- objOverlay.style.position = 'absolute';\r
- }\r
- objOverlay.style.display = 'none';\r
- objBody.appendChild(objOverlay);\r
- var objLytebox = this.doc.createElement("div");\r
- objLytebox.setAttribute('id','lbMain');\r
- objLytebox.style.display = 'none';\r
- objBody.appendChild(objLytebox);\r
- var objOuterContainer = this.doc.createElement("div");\r
- objOuterContainer.setAttribute('id','lbOuterContainer');\r
- objOuterContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objLytebox.appendChild(objOuterContainer);\r
- var objIframeContainer = this.doc.createElement("div");\r
- objIframeContainer.setAttribute('id','lbIframeContainer');\r
- objIframeContainer.style.display = 'none';\r
- objOuterContainer.appendChild(objIframeContainer);\r
- var objIframe = this.doc.createElement("iframe");\r
- objIframe.setAttribute('id','lbIframe');\r
- objIframe.setAttribute('name','lbIframe');\r
- objIframe.style.display = 'none';\r
- objIframeContainer.appendChild(objIframe);\r
- var objImageContainer = this.doc.createElement("div");\r
- objImageContainer.setAttribute('id','lbImageContainer');\r
- objOuterContainer.appendChild(objImageContainer);\r
- var objLyteboxImage = this.doc.createElement("img");\r
- objLyteboxImage.setAttribute('id','lbImage');\r
- objImageContainer.appendChild(objLyteboxImage);\r
- var objLoading = this.doc.createElement("div");\r
- objLoading.setAttribute('id','lbLoading');\r
- objOuterContainer.appendChild(objLoading);\r
- var objDetailsContainer = this.doc.createElement("div");\r
- objDetailsContainer.setAttribute('id','lbDetailsContainer');\r
- objDetailsContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objLytebox.appendChild(objDetailsContainer);\r
- var objDetailsData =this.doc.createElement("div");\r
- objDetailsData.setAttribute('id','lbDetailsData');\r
- objDetailsData.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objDetailsContainer.appendChild(objDetailsData);\r
- var objDetails = this.doc.createElement("div");\r
- objDetails.setAttribute('id','lbDetails');\r
- objDetailsData.appendChild(objDetails);\r
- var objCaption = this.doc.createElement("span");\r
- objCaption.setAttribute('id','lbCaption');\r
- objDetails.appendChild(objCaption);\r
- var objHoverNav = this.doc.createElement("div");\r
- objHoverNav.setAttribute('id','lbHoverNav');\r
- objImageContainer.appendChild(objHoverNav);\r
- var objBottomNav = this.doc.createElement("div");\r
- objBottomNav.setAttribute('id','lbBottomNav');\r
- objDetailsData.appendChild(objBottomNav);\r
- var objPrev = this.doc.createElement("a");\r
- objPrev.setAttribute('id','lbPrev');\r
- objPrev.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objPrev.setAttribute('href','#');\r
- objHoverNav.appendChild(objPrev);\r
- var objNext = this.doc.createElement("a");\r
- objNext.setAttribute('id','lbNext');\r
- objNext.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objNext.setAttribute('href','#');\r
- objHoverNav.appendChild(objNext);\r
- var objNumberDisplay = this.doc.createElement("span");\r
- objNumberDisplay.setAttribute('id','lbNumberDisplay');\r
- objDetails.appendChild(objNumberDisplay);\r
- var objNavDisplay = this.doc.createElement("span");\r
- objNavDisplay.setAttribute('id','lbNavDisplay');\r
- objNavDisplay.style.display = 'none';\r
- objDetails.appendChild(objNavDisplay);\r
- var objClose = this.doc.createElement("a");\r
- objClose.setAttribute('id','lbClose');\r
- objClose.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objClose.setAttribute('href','#');\r
- objBottomNav.appendChild(objClose);\r
- var objPause = this.doc.createElement("a");\r
- objPause.setAttribute('id','lbPause');\r
- objPause.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objPause.setAttribute('href','#');\r
- objPause.style.display = 'none';\r
- objBottomNav.appendChild(objPause);\r
- var objPlay = this.doc.createElement("a");\r
- objPlay.setAttribute('id','lbPlay');\r
- objPlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- objPlay.setAttribute('href','#');\r
- objPlay.style.display = 'none';\r
- objBottomNav.appendChild(objPlay);\r
-};\r
-LyteBox.prototype.updateLyteboxItems = function() { \r
- var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');\r
- for (var i = 0; i < anchors.length; i++) {\r
- var anchor = anchors[i];\r
- var relAttribute = String(anchor.getAttribute('rel'));\r
- if (anchor.getAttribute('href')) {\r
- if (relAttribute.toLowerCase().match('lytebox')) {\r
- anchor.onclick = function () { myLytebox.start(this, false, false); return false; }\r
- } else if (relAttribute.toLowerCase().match('lyteshow')) {\r
- anchor.onclick = function () { myLytebox.start(this, true, false); return false; }\r
- } else if (relAttribute.toLowerCase().match('lyteframe')) {\r
- anchor.onclick = function () { myLytebox.start(this, false, true); return false; }\r
- }\r
- }\r
- }\r
-};\r
-LyteBox.prototype.start = function(imageLink, doSlide, doFrame) {\r
- if (this.ie && !this.ie7) { this.toggleSelects('hide'); }\r
- if (this.hideFlash) { this.toggleFlash('hide'); }\r
- this.isLyteframe = (doFrame ? true : false);\r
- var pageSize = this.getPageSize();\r
- var objOverlay = this.doc.getElementById('lbOverlay');\r
- var objBody = this.doc.getElementsByTagName("body").item(0);\r
- objOverlay.style.height = pageSize[1] + "px";\r
- objOverlay.style.display = '';\r
- this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity));\r
- var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');\r
- if (this.isLyteframe) {\r
- this.frameArray = [];\r
- this.frameNum = 0;\r
- if ((imageLink.getAttribute('rel') == 'lyteframe')) {\r
- var rev = imageLink.getAttribute('rev');\r
- this.frameArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));\r
- } else {\r
- if (imageLink.getAttribute('rel').indexOf('lyteframe') != -1) {\r
- for (var i = 0; i < anchors.length; i++) {\r
- var anchor = anchors[i];\r
- if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {\r
- var rev = anchor.getAttribute('rev');\r
- this.frameArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));\r
- }\r
- }\r
- this.frameArray.removeDuplicates();\r
- while(this.frameArray[this.frameNum][0] != imageLink.getAttribute('href')) { this.frameNum++; }\r
- }\r
- }\r
- } else {\r
- this.imageArray = [];\r
- this.imageNum = 0;\r
- this.slideArray = [];\r
- this.slideNum = 0;\r
- if ((imageLink.getAttribute('rel') == 'lytebox')) {\r
- this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));\r
- } else {\r
- if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) {\r
- for (var i = 0; i < anchors.length; i++) {\r
- var anchor = anchors[i];\r
- if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {\r
- this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));\r
- }\r
- }\r
- this.imageArray.removeDuplicates();\r
- while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; }\r
- }\r
- if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) {\r
- for (var i = 0; i < anchors.length; i++) {\r
- var anchor = anchors[i];\r
- if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {\r
- this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));\r
- }\r
- }\r
- this.slideArray.removeDuplicates();\r
- while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; }\r
- }\r
- }\r
- }\r
- var object = this.doc.getElementById('lbMain');\r
- object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";\r
- object.style.display = '';\r
- if (!this.outerBorder) {\r
- this.doc.getElementById('lbOuterContainer').style.border = 'none';\r
- this.doc.getElementById('lbDetailsContainer').style.border = 'none';\r
- } else {\r
- this.doc.getElementById('lbOuterContainer').style.borderBottom = '';\r
- this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- }\r
- this.doc.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; }\r
- this.doc.getElementById('lbMain').onclick = function(e) {\r
- var e = e;\r
- if (!e) {\r
- if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {\r
- e = window.parent.window.event;\r
- } else {\r
- e = window.event;\r
- }\r
- }\r
- var id = (e.target ? e.target.id : e.srcElement.id);\r
- if (id == 'lbMain') { myLytebox.end(); return false; }\r
- }\r
- this.doc.getElementById('lbClose').onclick = function() { myLytebox.end(); return false; }\r
- this.doc.getElementById('lbPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }\r
- this.doc.getElementById('lbPlay').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; } \r
- this.isSlideshow = doSlide;\r
- this.isPaused = (this.slideNum != 0 ? true : false);\r
- if (this.isSlideshow && this.showPlayPause && this.isPaused) {\r
- this.doc.getElementById('lbPlay').style.display = '';\r
- this.doc.getElementById('lbPause').style.display = 'none';\r
- }\r
- if (this.isLyteframe) {\r
- this.changeContent(this.frameNum);\r
- } else {\r
- if (this.isSlideshow) {\r
- this.changeContent(this.slideNum);\r
- } else {\r
- this.changeContent(this.imageNum);\r
- }\r
- }\r
-};\r
-LyteBox.prototype.changeContent = function(imageNum) {\r
- if (this.isSlideshow) {\r
- for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }\r
- }\r
- this.activeImage = this.activeSlide = this.activeFrame = imageNum;\r
- if (!this.outerBorder) {\r
- this.doc.getElementById('lbOuterContainer').style.border = 'none';\r
- this.doc.getElementById('lbDetailsContainer').style.border = 'none';\r
- } else {\r
- this.doc.getElementById('lbOuterContainer').style.borderBottom = '';\r
- this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);\r
- }\r
- this.doc.getElementById('lbLoading').style.display = '';\r
- this.doc.getElementById('lbImage').style.display = 'none';\r
- this.doc.getElementById('lbIframe').style.display = 'none';\r
- this.doc.getElementById('lbPrev').style.display = 'none';\r
- this.doc.getElementById('lbNext').style.display = 'none';\r
- this.doc.getElementById('lbIframeContainer').style.display = 'none';\r
- this.doc.getElementById('lbDetailsContainer').style.display = 'none';\r
- this.doc.getElementById('lbNumberDisplay').style.display = 'none';\r
- if (this.navType == 2 || this.isLyteframe) {\r
- object = this.doc.getElementById('lbNavDisplay');\r
- object.innerHTML = ' <span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">« prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">« prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next »</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next »</a>';\r
- object.style.display = 'none';\r
- }\r
- if (this.isLyteframe) {\r
- var iframe = myLytebox.doc.getElementById('lbIframe');\r
- var styles = this.frameArray[this.activeFrame][2];\r
- var aStyles = styles.split(';');\r
- for (var i = 0; i < aStyles.length; i++) {\r
- if (aStyles[i].indexOf('width:') >= 0) {\r
- var w = aStyles[i].replace('width:', '');\r
- iframe.width = w.trim();\r
- } else if (aStyles[i].indexOf('height:') >= 0) {\r
- var h = aStyles[i].replace('height:', '');\r
- iframe.height = h.trim();\r
- } else if (aStyles[i].indexOf('scrolling:') >= 0) {\r
- var s = aStyles[i].replace('scrolling:', '');\r
- iframe.scrolling = s.trim();\r
- } else if (aStyles[i].indexOf('border:') >= 0) {\r
- // Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)\r
- //var b = aStyles[i].replace('border:', '');\r
- //iframe.style.border = b.trim();\r
- }\r
- }\r
- this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));\r
- } else {\r
- imgPreloader = new Image();\r
- imgPreloader.onload = function() {\r
- var imageWidth = imgPreloader.width;\r
- var imageHeight = imgPreloader.height;\r
- if (myLytebox.autoResize) {\r
- var pagesize = myLytebox.getPageSize();\r
- var x = pagesize[2] - 150;\r
- var y = pagesize[3] - 150;\r
- if (imageWidth > x) {\r
- imageHeight = Math.round(imageHeight * (x / imageWidth));\r
- imageWidth = x; \r
- if (imageHeight > y) { \r
- imageWidth = Math.round(imageWidth * (y / imageHeight));\r
- imageHeight = y; \r
- }\r
- } else if (imageHeight > y) { \r
- imageWidth = Math.round(imageWidth * (y / imageHeight));\r
- imageHeight = y; \r
- if (imageWidth > x) {\r
- imageHeight = Math.round(imageHeight * (x / imageWidth));\r
- imageWidth = x;\r
- }\r
- }\r
- }\r
- var lbImage = myLytebox.doc.getElementById('lbImage')\r
- lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);\r
- lbImage.width = imageWidth;\r
- lbImage.height = imageHeight;\r
- myLytebox.resizeContainer(imageWidth, imageHeight);\r
- imgPreloader.onload = function() {};\r
- }\r
- imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);\r
- }\r
-};\r
-LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {\r
- this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth;\r
- this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight;\r
- this.xScale = ((imgWidth + (this.borderSize * 2)) / this.wCur) * 100;\r
- this.yScale = ((imgHeight + (this.borderSize * 2)) / this.hCur) * 100;\r
- var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;\r
- var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;\r
- if (!(hDiff == 0)) {\r
- this.hDone = false;\r
- this.resizeH('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));\r
- } else {\r
- this.hDone = true;\r
- }\r
- if (!(wDiff == 0)) {\r
- this.wDone = false;\r
- this.resizeW('lbOuterContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));\r
- } else {\r
- this.wDone = true;\r
- }\r
- if ((hDiff == 0) && (wDiff == 0)) {\r
- if (this.ie){ this.pause(250); } else { this.pause(100); } \r
- }\r
- this.doc.getElementById('lbPrev').style.height = imgHeight + "px";\r
- this.doc.getElementById('lbNext').style.height = imgHeight + "px";\r
- this.doc.getElementById('lbDetailsContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";\r
- this.showContent();\r
-};\r
-LyteBox.prototype.showContent = function() {\r
- if (this.wDone && this.hDone) {\r
- for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }\r
- if (this.outerBorder) {\r
- this.doc.getElementById('lbOuterContainer').style.borderBottom = 'none';\r
- }\r
- this.doc.getElementById('lbLoading').style.display = 'none';\r
- if (this.isLyteframe) {\r
- this.doc.getElementById('lbIframe').style.display = '';\r
- this.appear('lbIframe', (this.doAnimations ? 0 : 100));\r
- } else {\r
- this.doc.getElementById('lbImage').style.display = '';\r
- this.appear('lbImage', (this.doAnimations ? 0 : 100));\r
- this.preloadNeighborImages();\r
- }\r
- if (this.isSlideshow) {\r
- if(this.activeSlide == (this.slideArray.length - 1)) {\r
- if (this.autoEnd) {\r
- this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);\r
- }\r
- } else {\r
- if (!this.isPaused) {\r
- this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);\r
- }\r
- }\r
- this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navType == 1 ? '' : 'none');\r
- this.doc.getElementById('lbClose').style.display = (this.showClose ? '' : 'none');\r
- this.doc.getElementById('lbDetails').style.display = (this.showDetails ? '' : 'none');\r
- this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.isPaused ? '' : 'none');\r
- this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.isPaused ? 'none' : '');\r
- this.doc.getElementById('lbNavDisplay').style.display = (this.showNavigation && this.navType == 2 ? '' : 'none');\r
- } else {\r
- this.doc.getElementById('lbHoverNav').style.display = (this.navType == 1 && !this.isLyteframe ? '' : 'none');\r
- if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {\r
- this.doc.getElementById('lbNavDisplay').style.display = '';\r
- } else {\r
- this.doc.getElementById('lbNavDisplay').style.display = 'none';\r
- }\r
- this.doc.getElementById('lbClose').style.display = '';\r
- this.doc.getElementById('lbDetails').style.display = '';\r
- this.doc.getElementById('lbPause').style.display = 'none';\r
- this.doc.getElementById('lbPlay').style.display = 'none';\r
- }\r
- this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');\r
- this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');\r
- try {\r
- this.doc.getElementById('lbIframe').src = this.frameArray[this.activeFrame][0];\r
- } catch(e) { }\r
- } else {\r
- this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200);\r
- }\r
-};\r
-LyteBox.prototype.updateDetails = function() {\r
- var object = this.doc.getElementById('lbCaption');\r
- var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));\r
- object.style.display = '';\r
- object.innerHTML = (sTitle == null ? '' : sTitle);\r
- this.updateNav();\r
- this.doc.getElementById('lbDetailsContainer').style.display = '';\r
- object = this.doc.getElementById('lbNumberDisplay');\r
- if (this.isSlideshow && this.slideArray.length > 1) {\r
- object.style.display = '';\r
- object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;\r
- this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none');\r
- } else if (this.imageArray.length > 1 && !this.isLyteframe) {\r
- object.style.display = '';\r
- object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;\r
- this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 ? '' : 'none');\r
- } else if (this.frameArray.length > 1 && this.isLyteframe) {\r
- object.style.display = '';\r
- object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;\r
- this.doc.getElementById('lbNavDisplay').style.display = '';\r
- } else {\r
- this.doc.getElementById('lbNavDisplay').style.display = 'none';\r
- }\r
- this.appear('lbDetailsContainer', (this.doAnimations ? 0 : 100));\r
-};\r
-LyteBox.prototype.updateNav = function() {\r
- if (this.isSlideshow) {\r
- if (this.activeSlide != 0) {\r
- var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));\r
- object.style.display = '';\r
- object.onclick = function() {\r
- if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }\r
- myLytebox.changeContent(myLytebox.activeSlide - 1); return false;\r
- }\r
- } else {\r
- if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }\r
- }\r
- if (this.activeSlide != (this.slideArray.length - 1)) {\r
- var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));\r
- object.style.display = '';\r
- object.onclick = function() {\r
- if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }\r
- myLytebox.changeContent(myLytebox.activeSlide + 1); return false;\r
- }\r
- } else {\r
- if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }\r
- }\r
- } else if (this.isLyteframe) {\r
- if(this.activeFrame != 0) {\r
- var object = this.doc.getElementById('lbPrev2');\r
- object.style.display = '';\r
- object.onclick = function() {\r
- myLytebox.changeContent(myLytebox.activeFrame - 1); return false;\r
- }\r
- } else {\r
- this.doc.getElementById('lbPrev2_Off').style.display = '';\r
- }\r
- if(this.activeFrame != (this.frameArray.length - 1)) {\r
- var object = this.doc.getElementById('lbNext2');\r
- object.style.display = '';\r
- object.onclick = function() {\r
- myLytebox.changeContent(myLytebox.activeFrame + 1); return false;\r
- }\r
- } else {\r
- this.doc.getElementById('lbNext2_Off').style.display = '';\r
- } \r
- } else {\r
- if(this.activeImage != 0) {\r
- var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));\r
- object.style.display = '';\r
- object.onclick = function() {\r
- myLytebox.changeContent(myLytebox.activeImage - 1); return false;\r
- }\r
- } else {\r
- if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }\r
- }\r
- if(this.activeImage != (this.imageArray.length - 1)) {\r
- var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));\r
- object.style.display = '';\r
- object.onclick = function() {\r
- myLytebox.changeContent(myLytebox.activeImage + 1); return false;\r
- }\r
- } else {\r
- if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }\r
- }\r
- }\r
- this.enableKeyboardNav();\r
-};\r
-LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };\r
-LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };\r
-LyteBox.prototype.keyboardAction = function(e) {\r
- var keycode = key = escape = null;\r
- keycode = (e == null) ? event.keyCode : e.which;\r
- key = String.fromCharCode(keycode).toLowerCase();\r
- escape = (e == null) ? 27 : e.DOM_VK_ESCAPE;\r
- if ((key == 'x') || (key == 'c') || (keycode == escape)) {\r
- myLytebox.end();\r
- } else if ((key == 'p') || (keycode == 37)) {\r
- if (myLytebox.isSlideshow) {\r
- if(myLytebox.activeSlide != 0) {\r
- myLytebox.disableKeyboardNav();\r
- myLytebox.changeContent(myLytebox.activeSlide - 1);\r
- }\r
- } else if (myLytebox.isLyteframe) {\r
- if(myLytebox.activeFrame != 0) {\r
- myLytebox.disableKeyboardNav();\r
- myLytebox.changeContent(myLytebox.activeFrame - 1);\r
- }\r
- } else {\r
- if(myLytebox.activeImage != 0) {\r
- myLytebox.disableKeyboardNav();\r
- myLytebox.changeContent(myLytebox.activeImage - 1);\r
- }\r
- }\r
- } else if ((key == 'n') || (keycode == 39)) {\r
- if (myLytebox.isSlideshow) {\r
- if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) {\r
- myLytebox.disableKeyboardNav();\r
- myLytebox.changeContent(myLytebox.activeSlide + 1);\r
- }\r
- } else if (myLytebox.isLyteframe) {\r
- if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) {\r
- myLytebox.disableKeyboardNav();\r
- myLytebox.changeContent(myLytebox.activeFrame + 1);\r
- }\r
- } else {\r
- if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) {\r
- myLytebox.disableKeyboardNav();\r
- myLytebox.changeContent(myLytebox.activeImage + 1);\r
- }\r
- }\r
- }\r
-};\r
-LyteBox.prototype.preloadNeighborImages = function() {\r
- if (this.isSlideshow) {\r
- if ((this.slideArray.length - 1) > this.activeSlide) {\r
- preloadNextImage = new Image();\r
- preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];\r
- }\r
- if(this.activeSlide > 0) {\r
- preloadPrevImage = new Image();\r
- preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];\r
- }\r
- } else {\r
- if ((this.imageArray.length - 1) > this.activeImage) {\r
- preloadNextImage = new Image();\r
- preloadNextImage.src = this.imageArray[this.activeImage + 1][0];\r
- }\r
- if(this.activeImage > 0) {\r
- preloadPrevImage = new Image();\r
- preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];\r
- }\r
- }\r
-};\r
-LyteBox.prototype.togglePlayPause = function(hideID, showID) {\r
- if (this.isSlideshow && hideID == "lbPause") {\r
- for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }\r
- }\r
- this.doc.getElementById(hideID).style.display = 'none';\r
- this.doc.getElementById(showID).style.display = '';\r
- if (hideID == "lbPlay") {\r
- this.isPaused = false;\r
- if (this.activeSlide == (this.slideArray.length - 1)) {\r
- this.end();\r
- } else {\r
- this.changeContent(this.activeSlide + 1);\r
- }\r
- } else {\r
- this.isPaused = true;\r
- }\r
-};\r
-LyteBox.prototype.end = function(caller) {\r
- var closeClick = (caller == 'slideshow' ? false : true);\r
- if (this.isSlideshow && this.isPaused && !closeClick) { return; }\r
- this.disableKeyboardNav();\r
- this.doc.getElementById('lbMain').style.display = 'none';\r
- this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0));\r
- this.toggleSelects('visible');\r
- if (this.hideFlash) { this.toggleFlash('visible'); }\r
- if (this.isSlideshow) {\r
- for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }\r
- }\r
- if (this.isLyteframe) {\r
- this.initialize();\r
- }\r
-};\r
-LyteBox.prototype.checkFrame = function() {\r
- if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {\r
- this.isFrame = true;\r
- this.lytebox = "window.parent." + window.name + ".myLytebox";\r
- this.doc = parent.document;\r
- } else {\r
- this.isFrame = false;\r
- this.lytebox = "myLytebox";\r
- this.doc = document;\r
- }\r
-};\r
-LyteBox.prototype.getPixelRate = function(cur, img) {\r
- var diff = (img > cur) ? img - cur : cur - img;\r
- if (diff >= 0 && diff <= 100) { return 10; }\r
- if (diff > 100 && diff <= 200) { return 15; }\r
- if (diff > 200 && diff <= 300) { return 20; }\r
- if (diff > 300 && diff <= 400) { return 25; }\r
- if (diff > 400 && diff <= 500) { return 30; }\r
- if (diff > 500 && diff <= 600) { return 35; }\r
- if (diff > 600 && diff <= 700) { return 40; }\r
- if (diff > 700) { return 45; }\r
-};\r
-LyteBox.prototype.appear = function(id, opacity) {\r
- var object = this.doc.getElementById(id).style;\r
- object.opacity = (opacity / 100);\r
- object.MozOpacity = (opacity / 100);\r
- object.KhtmlOpacity = (opacity / 100);\r
- object.filter = "alpha(opacity=" + (opacity + 10) + ")";\r
- if (opacity == 100 && (id == 'lbImage' || id == 'lbIframe')) {\r
- try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */\r
- this.updateDetails();\r
- } else if (opacity >= this.maxOpacity && id == 'lbOverlay') {\r
- for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }\r
- return;\r
- } else if (opacity >= 100 && id == 'lbDetailsContainer') {\r
- try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */\r
- for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }\r
- this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";\r
- } else {\r
- if (id == 'lbOverlay') {\r
- this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1);\r
- } else {\r
- this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1);\r
- }\r
- }\r
-};\r
-LyteBox.prototype.fade = function(id, opacity) {\r
- var object = this.doc.getElementById(id).style;\r
- object.opacity = (opacity / 100);\r
- object.MozOpacity = (opacity / 100);\r
- object.KhtmlOpacity = (opacity / 100);\r
- object.filter = "alpha(opacity=" + opacity + ")";\r
- if (opacity <= 0) {\r
- try {\r
- object.display = 'none';\r
- } catch(err) { }\r
- } else if (id == 'lbOverlay') {\r
- this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1);\r
- } else {\r
- this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1);\r
- }\r
-};\r
-LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) {\r
- if (!this.hDone) {\r
- this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100);\r
- return;\r
- }\r
- var object = this.doc.getElementById(id);\r
- var timer = speed ? speed : (this.resizeDuration/2);\r
- var newW = (this.doAnimations ? curW : maxW);\r
- object.style.width = (newW) + "px";\r
- if (newW < maxW) {\r
- newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;\r
- } else if (newW > maxW) {\r
- newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;\r
- }\r
- this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);\r
- if (parseInt(object.style.width) == maxW) {\r
- this.wDone = true;\r
- for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }\r
- }\r
-};\r
-LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {\r
- var timer = speed ? speed : (this.resizeDuration/2);\r
- var object = this.doc.getElementById(id);\r
- var newH = (this.doAnimations ? curH : maxH);\r
- object.style.height = (newH) + "px";\r
- if (newH < maxH) {\r
- newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;\r
- } else if (newH > maxH) {\r
- newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;\r
- }\r
- this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);\r
- if (parseInt(object.style.height) == maxH) {\r
- this.hDone = true;\r
- for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }\r
- }\r
-};\r
-LyteBox.prototype.getPageScroll = function() {\r
- if (self.pageYOffset) {\r
- return this.isFrame ? parent.pageYOffset : self.pageYOffset;\r
- } else if (this.doc.documentElement && this.doc.documentElement.scrollTop){\r
- return this.doc.documentElement.scrollTop;\r
- } else if (document.body) {\r
- return this.doc.body.scrollTop;\r
- }\r
-};\r
-LyteBox.prototype.getPageSize = function() { \r
- var xScroll, yScroll, windowWidth, windowHeight;\r
- if (window.innerHeight && window.scrollMaxY) {\r
- xScroll = this.doc.scrollWidth;\r
- yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);\r
- } else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){\r
- xScroll = this.doc.body.scrollWidth;\r
- yScroll = this.doc.body.scrollHeight;\r
- } else {\r
- xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;\r
- yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;\r
- xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;\r
- yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;\r
- }\r
- if (self.innerHeight) {\r
- windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;\r
- windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;\r
- } else if (document.documentElement && document.documentElement.clientHeight) {\r
- windowWidth = this.doc.documentElement.clientWidth;\r
- windowHeight = this.doc.documentElement.clientHeight;\r
- } else if (document.body) {\r
- windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;\r
- windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;\r
- windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;\r
- windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;\r
- }\r
- var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;\r
- var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;\r
- return new Array(pageWidth, pageHeight, windowWidth, windowHeight);\r
-};\r
-LyteBox.prototype.toggleFlash = function(state) {\r
- var objects = this.doc.getElementsByTagName("object");\r
- for (var i = 0; i < objects.length; i++) {\r
- objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';\r
- }\r
- var embeds = this.doc.getElementsByTagName("embed");\r
- for (var i = 0; i < embeds.length; i++) {\r
- embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';\r
- }\r
- if (this.isFrame) {\r
- for (var i = 0; i < parent.frames.length; i++) {\r
- try {\r
- objects = parent.frames[i].window.document.getElementsByTagName("object");\r
- for (var j = 0; j < objects.length; j++) {\r
- objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';\r
- }\r
- } catch(e) { }\r
- try {\r
- embeds = parent.frames[i].window.document.getElementsByTagName("embed");\r
- for (var j = 0; j < embeds.length; j++) {\r
- embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';\r
- }\r
- } catch(e) { }\r
- }\r
- }\r
-};\r
-LyteBox.prototype.toggleSelects = function(state) {\r
- var selects = this.doc.getElementsByTagName("select");\r
- for (var i = 0; i < selects.length; i++ ) {\r
- selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';\r
- }\r
- if (this.isFrame) {\r
- for (var i = 0; i < parent.frames.length; i++) {\r
- try {\r
- selects = parent.frames[i].window.document.getElementsByTagName("select");\r
- for (var j = 0; j < selects.length; j++) {\r
- selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';\r
- }\r
- } catch(e) { }\r
- }\r
- }\r
-};\r
-LyteBox.prototype.pause = function(numberMillis) {\r
- var now = new Date();\r
- var exitTime = now.getTime() + numberMillis;\r
- while (true) {\r
- now = new Date();\r
- if (now.getTime() > exitTime) { return; }\r
- }\r
-};\r
-if (window.addEventListener) {\r
- window.addEventListener("load",initLytebox,false);\r
-} else if (window.attachEvent) {\r
- window.attachEvent("onload",initLytebox);\r
-} else {\r
- window.onload = function() {initLytebox();}\r
-}\r
-function initLytebox() { myLytebox = new LyteBox(); }
\ No newline at end of file
projects / lorea / elgg.git / commitdiff
