JavaScript DHTML/GUI Components/Dialog LightBox
Содержание
Create light box with lytebox
<html>
<head>
<script type="text/javascript" language="javascript">
//***********************************************************************************************************************************/
// LyteBox v3.20
//
// Author: Markus F. Hay
// Website: http://www.dolem.ru/lytebox
// Date: July 12, 2007
// License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE, Strict DOCTYPE, and Transitional DOCTYPE):
// * Firefox: 2.0.0.4, 1.5.0.12
// * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2
// * Opera: 9.21
//
// Releases: For up-to-date and complete release information, visit http://www.dolem.ru/forum/showthread.php?tid=62
// * v3.20 (07/11/07)
// * v3.10 (05/28/07)
// * v3.00 (05/15/07)
// * v2.02 (11/13/06)
//
// Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more
// information please visit http://huddletogether.ru/projects/lightbox2/
//***********************************************************************************************************************************/
Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }
Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ""); }
function LyteBox() {
/*** Start Global Configuration ***/
this.theme = "grey"; // themes: grey (default), red, green, blue, gold
this.hideFlash = true; // controls whether or not Flash objects should be hidden
this.outerBorder = true; // controls whether to show the outer grey (or theme) border
this.resizeSpeed = 8; // controls the speed of the image resizing (1=slowest and 10=fastest)
this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay
this.navType = 1; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions
this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
/*** End Global Configuration ***/
/*** Configure Slideshow Options ***/
this.slideInterval = 4000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide
this.showClose = true; // true to display the Close button, false to hide
this.showDetails = true; // true to display image details (caption, count), false to hide
this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide
this.autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open
this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked
this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked
/*** End Slideshow Configuration ***/
if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
if(this.resizeSpeed < 1) { resizeSpeed = 1; }
this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
this.resizeWTimerArray = new Array();
this.resizeWTimerCount = 0;
this.resizeHTimerArray = new Array();
this.resizeHTimerCount = 0;
this.showContentTimerArray = new Array();
this.showContentTimerCount = 0;
this.overlayTimerArray = new Array();
this.overlayTimerCount = 0;
this.imageTimerArray = new Array();
this.imageTimerCount = 0;
this.timerIDArray = new Array();
this.timerIDCount = 0;
this.slideshowIDArray = new Array();
this.slideshowIDCount = 0;
this.imageArray = new Array();
this.activeImage = null;
this.slideArray = new Array();
this.activeSlide = null;
this.frameArray = new Array();
this.activeFrame = null;
this.checkFrame();
this.isSlideshow = false;
this.isLyteframe = false;
/*@cc_on
/*@if (@_jscript)
this.ie = (document.all && !window.opera) ? true : false;
/*@else @*/
this.ie = false;
/*@end
@*/
this.ie7 = (this.ie && window.XMLHttpRequest);
this.initialize();
}
LyteBox.prototype.initialize = function() {
this.updateLyteboxItems();
var objBody = this.doc.getElementsByTagName("body").item(0);
if (this.doc.getElementById("lbOverlay")) {
objBody.removeChild(this.doc.getElementById("lbOverlay"));
objBody.removeChild(this.doc.getElementById("lbMain"));
}
var objOverlay = this.doc.createElement("div");
objOverlay.setAttribute("id","lbOverlay");
objOverlay.setAttribute((this.ie ? "className" : "class"), this.theme);
objOverlay.style.display = "none";
objBody.appendChild(objOverlay);
var objLytebox = this.doc.createElement("div");
objLytebox.setAttribute("id","lbMain");
objLytebox.style.display = "none";
objBody.appendChild(objLytebox);
var objOuterContainer = this.doc.createElement("div");
objOuterContainer.setAttribute("id","lbOuterContainer");
objOuterContainer.setAttribute((this.ie ? "className" : "class"), this.theme);
objLytebox.appendChild(objOuterContainer);
var objIframeContainer = this.doc.createElement("div");
objIframeContainer.setAttribute("id","lbIframeContainer");
objIframeContainer.style.display = "none";
objOuterContainer.appendChild(objIframeContainer);
var objIframe = this.doc.createElement("iframe");
objIframe.setAttribute("id","lbIframe");
objIframe.setAttribute("name","lbIframe");
objIframe.style.display = "none";
objIframeContainer.appendChild(objIframe);
var objImageContainer = this.doc.createElement("div");
objImageContainer.setAttribute("id","lbImageContainer");
objOuterContainer.appendChild(objImageContainer);
var objLyteboxImage = this.doc.createElement("img");
objLyteboxImage.setAttribute("id","lbImage");
objImageContainer.appendChild(objLyteboxImage);
var objLoading = this.doc.createElement("div");
objLoading.setAttribute("id","lbLoading");
objOuterContainer.appendChild(objLoading);
var objDetailsContainer = this.doc.createElement("div");
objDetailsContainer.setAttribute("id","lbDetailsContainer");
objDetailsContainer.setAttribute((this.ie ? "className" : "class"), this.theme);
objLytebox.appendChild(objDetailsContainer);
var objDetailsData =this.doc.createElement("div");
objDetailsData.setAttribute("id","lbDetailsData");
objDetailsData.setAttribute((this.ie ? "className" : "class"), this.theme);
objDetailsContainer.appendChild(objDetailsData);
var objDetails = this.doc.createElement("div");
objDetails.setAttribute("id","lbDetails");
objDetailsData.appendChild(objDetails);
var objCaption = this.doc.createElement("span");
objCaption.setAttribute("id","lbCaption");
objDetails.appendChild(objCaption);
var objHoverNav = this.doc.createElement("div");
objHoverNav.setAttribute("id","lbHoverNav");
objImageContainer.appendChild(objHoverNav);
var objBottomNav = this.doc.createElement("div");
objBottomNav.setAttribute("id","lbBottomNav");
objDetailsData.appendChild(objBottomNav);
var objPrev = this.doc.createElement("a");
objPrev.setAttribute("id","lbPrev");
objPrev.setAttribute((this.ie ? "className" : "class"), this.theme);
objPrev.setAttribute("href","#");
objHoverNav.appendChild(objPrev);
var objNext = this.doc.createElement("a");
objNext.setAttribute("id","lbNext");
objNext.setAttribute((this.ie ? "className" : "class"), this.theme);
objNext.setAttribute("href","#");
objHoverNav.appendChild(objNext);
var objNumberDisplay = this.doc.createElement("span");
objNumberDisplay.setAttribute("id","lbNumberDisplay");
objDetails.appendChild(objNumberDisplay);
var objNavDisplay = this.doc.createElement("span");
objNavDisplay.setAttribute("id","lbNavDisplay");
objNavDisplay.style.display = "none";
objDetails.appendChild(objNavDisplay);
var objClose = this.doc.createElement("a");
objClose.setAttribute("id","lbClose");
objClose.setAttribute((this.ie ? "className" : "class"), this.theme);
objClose.setAttribute("href","#");
objBottomNav.appendChild(objClose);
var objPause = this.doc.createElement("a");
objPause.setAttribute("id","lbPause");
objPause.setAttribute((this.ie ? "className" : "class"), this.theme);
objPause.setAttribute("href","#");
objPause.style.display = "none";
objBottomNav.appendChild(objPause);
var objPlay = this.doc.createElement("a");
objPlay.setAttribute("id","lbPlay");
objPlay.setAttribute((this.ie ? "className" : "class"), this.theme);
objPlay.setAttribute("href","#");
objPlay.style.display = "none";
objBottomNav.appendChild(objPlay);
};
LyteBox.prototype.updateLyteboxItems = function() {
var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName("a") : document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
var relAttribute = String(anchor.getAttribute("rel"));
if (anchor.getAttribute("href")) {
if (relAttribute.toLowerCase().match("lytebox")) {
anchor.onclick = function () { myLytebox.start(this, false, false); return false; }
} else if (relAttribute.toLowerCase().match("lyteshow")) {
anchor.onclick = function () { myLytebox.start(this, true, false); return false; }
} else if (relAttribute.toLowerCase().match("lyteframe")) {
anchor.onclick = function () { myLytebox.start(this, false, true); return false; }
}
}
}
};
LyteBox.prototype.start = function(imageLink, doSlide, doFrame) {
if (this.ie && !this.ie7) { this.toggleSelects("hide"); }
if (this.hideFlash) { this.toggleFlash("hide"); }
this.isLyteframe = (doFrame ? true : false);
var pageSize = this.getPageSize();
var objOverlay = this.doc.getElementById("lbOverlay");
var objBody = this.doc.getElementsByTagName("body").item(0);
objOverlay.style.height = pageSize[1] + "px";
objOverlay.style.display = "";
this.appear("lbOverlay", (this.doAnimations ? 0 : this.maxOpacity));
var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName("a") : document.getElementsByTagName("a");
if (this.isLyteframe) {
this.frameArray = [];
this.frameNum = 0;
if ((imageLink.getAttribute("rel") == "lyteframe")) {
var rev = imageLink.getAttribute("rev");
this.frameArray.push(new Array(imageLink.getAttribute("href"), imageLink.getAttribute("title"), (rev == null || rev == "" ? "width: 400px; height: 400px; scrolling: auto;" : rev)));
} else {
if (imageLink.getAttribute("rel").indexOf("lyteframe") != -1) {
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == imageLink.getAttribute("rel"))) {
var rev = anchor.getAttribute("rev");
this.frameArray.push(new Array(anchor.getAttribute("href"), anchor.getAttribute("title"), (rev == null || rev == "" ? "width: 400px; height: 400px; scrolling: auto;" : rev)));
}
}
this.frameArray.removeDuplicates();
while(this.frameArray[this.frameNum][0] != imageLink.getAttribute("href")) { this.frameNum++; }
}
}
} else {
this.imageArray = [];
this.imageNum = 0;
this.slideArray = [];
this.slideNum = 0;
if ((imageLink.getAttribute("rel") == "lytebox")) {
this.imageArray.push(new Array(imageLink.getAttribute("href"), imageLink.getAttribute("title")));
} else {
if (imageLink.getAttribute("rel").indexOf("lytebox") != -1) {
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == imageLink.getAttribute("rel"))) {
this.imageArray.push(new Array(anchor.getAttribute("href"), anchor.getAttribute("title")));
}
}
this.imageArray.removeDuplicates();
while(this.imageArray[this.imageNum][0] != imageLink.getAttribute("href")) { this.imageNum++; }
}
if (imageLink.getAttribute("rel").indexOf("lyteshow") != -1) {
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == imageLink.getAttribute("rel"))) {
this.slideArray.push(new Array(anchor.getAttribute("href"), anchor.getAttribute("title")));
}
}
this.slideArray.removeDuplicates();
while(this.slideArray[this.slideNum][0] != imageLink.getAttribute("href")) { this.slideNum++; }
}
}
}
var object = this.doc.getElementById("lbMain");
object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";
object.style.display = "";
if (!this.outerBorder) {
this.doc.getElementById("lbOuterContainer").style.border = "none";
this.doc.getElementById("lbDetailsContainer").style.border = "none";
} else {
this.doc.getElementById("lbOuterContainer").style.borderBottom = "";
this.doc.getElementById("lbOuterContainer").setAttribute((this.ie ? "className" : "class"), this.theme);
}
this.doc.getElementById("lbOverlay").onclick = function() { myLytebox.end(); return false; }
this.doc.getElementById("lbMain").onclick = function(e) {
var e = e;
if (!e) {
if (window.parent.frames[window.name] && (parent.document.getElementsByTagName("frameset").length <= 0)) {
e = window.parent.window.event;
} else {
e = window.event;
}
}
var id = (e.target ? e.target.id : e.srcElement.id);
if (id == "lbMain") { myLytebox.end(); return false; }
}
this.doc.getElementById("lbClose").onclick = function() { myLytebox.end(); return false; }
this.doc.getElementById("lbPause").onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }
this.doc.getElementById("lbPlay").onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }
this.isSlideshow = doSlide;
this.isPaused = (this.slideNum != 0 ? true : false);
if (this.isSlideshow && this.showPlayPause && this.isPaused) {
this.doc.getElementById("lbPlay").style.display = "";
this.doc.getElementById("lbPause").style.display = "none";
}
if (this.isLyteframe) {
this.changeContent(this.frameNum);
} else {
if (this.isSlideshow) {
this.changeContent(this.slideNum);
} else {
this.changeContent(this.imageNum);
}
}
};
LyteBox.prototype.changeContent = function(imageNum) {
if (this.isSlideshow) {
for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
}
this.activeImage = this.activeSlide = this.activeFrame = imageNum;
if (!this.outerBorder) {
this.doc.getElementById("lbOuterContainer").style.border = "none";
this.doc.getElementById("lbDetailsContainer").style.border = "none";
} else {
this.doc.getElementById("lbOuterContainer").style.borderBottom = "";
this.doc.getElementById("lbOuterContainer").setAttribute((this.ie ? "className" : "class"), this.theme);
}
this.doc.getElementById("lbLoading").style.display = "";
this.doc.getElementById("lbImage").style.display = "none";
this.doc.getElementById("lbIframe").style.display = "none";
this.doc.getElementById("lbPrev").style.display = "none";
this.doc.getElementById("lbNext").style.display = "none";
this.doc.getElementById("lbIframeContainer").style.display = "none";
this.doc.getElementById("lbDetailsContainer").style.display = "none";
this.doc.getElementById("lbNumberDisplay").style.display = "none";
if (this.navType == 2 || this.isLyteframe) {
object = this.doc.getElementById("lbNavDisplay");
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>";
object.style.display = "none";
}
if (this.isLyteframe) {
var iframe = myLytebox.doc.getElementById("lbIframe");
var styles = this.frameArray[this.activeFrame][2];
var aStyles = styles.split(";");
for (var i = 0; i < aStyles.length; i++) {
if (aStyles[i].indexOf("width:") >= 0) {
var w = aStyles[i].replace("width:", "");
iframe.width = w.trim();
} else if (aStyles[i].indexOf("height:") >= 0) {
var h = aStyles[i].replace("height:", "");
iframe.height = h.trim();
} else if (aStyles[i].indexOf("scrolling:") >= 0) {
var s = aStyles[i].replace("scrolling:", "");
iframe.scrolling = s.trim();
} else if (aStyles[i].indexOf("border:") >= 0) {
// Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)
//var b = aStyles[i].replace("border:", "");
//iframe.style.border = b.trim();
}
}
iframe.src = this.frameArray[this.activeFrame][0];
this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));
} else {
imgPreloader = new Image();
imgPreloader.onload = function() {
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (myLytebox.autoResize) {
var pagesize = myLytebox.getPageSize();
var x = pagesize[2] - 150;
var y = pagesize[3] - 150;
if (imageWidth > x) {
imageHeight = Math.round(imageHeight * (x / imageWidth));
imageWidth = x;
if (imageHeight > y) {
imageWidth = Math.round(imageWidth * (y / imageHeight));
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = Math.round(imageWidth * (y / imageHeight));
imageHeight = y;
if (imageWidth > x) {
imageHeight = Math.round(imageHeight * (x / imageWidth));
imageWidth = x;
}
}
}
var lbImage = myLytebox.doc.getElementById("lbImage")
lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);
lbImage.width = imageWidth;
lbImage.height = imageHeight;
myLytebox.resizeContainer(imageWidth, imageHeight);
imgPreloader.onload = function() {};
}
imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
}
};
LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {
this.wCur = this.doc.getElementById("lbOuterContainer").offsetWidth;
this.hCur = this.doc.getElementById("lbOuterContainer").offsetHeight;
this.xScale = ((imgWidth + (this.borderSize * 2)) / this.wCur) * 100;
this.yScale = ((imgHeight + (this.borderSize * 2)) / this.hCur) * 100;
var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;
var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;
if (!(hDiff == 0)) {
this.hDone = false;
this.resizeH("lbOuterContainer", this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));
} else {
this.hDone = true;
}
if (!(wDiff == 0)) {
this.wDone = false;
this.resizeW("lbOuterContainer", this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));
} else {
this.wDone = true;
}
if ((hDiff == 0) && (wDiff == 0)) {
if (this.ie){ this.pause(250); } else { this.pause(100); }
}
this.doc.getElementById("lbPrev").style.height = imgHeight + "px";
this.doc.getElementById("lbNext").style.height = imgHeight + "px";
this.doc.getElementById("lbDetailsContainer").style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.rupatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";
this.showContent();
};
LyteBox.prototype.showContent = function() {
if (this.wDone && this.hDone) {
for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }
if (this.outerBorder) {
this.doc.getElementById("lbOuterContainer").style.borderBottom = "none";
}
this.doc.getElementById("lbLoading").style.display = "none";
if (this.isLyteframe) {
this.doc.getElementById("lbIframe").style.display = "";
this.appear("lbIframe", (this.doAnimations ? 0 : 100));
} else {
this.doc.getElementById("lbImage").style.display = "";
this.appear("lbImage", (this.doAnimations ? 0 : 100));
this.preloadNeighborImages();
}
if (this.isSlideshow) {
if(this.activeSlide == (this.slideArray.length - 1)) {
if (this.autoEnd) {
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end("slideshow")", this.slideInterval);
}
} else {
if (!this.isPaused) {
this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
}
}
this.doc.getElementById("lbHoverNav").style.display = (this.showNavigation && this.navType == 1 ? "" : "none");
this.doc.getElementById("lbClose").style.display = (this.showClose ? "" : "none");
this.doc.getElementById("lbDetails").style.display = (this.showDetails ? "" : "none");
this.doc.getElementById("lbPause").style.display = (this.showPlayPause && !this.isPaused ? "" : "none");
this.doc.getElementById("lbPlay").style.display = (this.showPlayPause && !this.isPaused ? "none" : "");
this.doc.getElementById("lbNavDisplay").style.display = (this.showNavigation && this.navType == 2 ? "" : "none");
} else {
this.doc.getElementById("lbHoverNav").style.display = (this.navType == 1 && !this.isLyteframe ? "" : "none");
if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {
this.doc.getElementById("lbNavDisplay").style.display = "";
} else {
this.doc.getElementById("lbNavDisplay").style.display = "none";
}
this.doc.getElementById("lbClose").style.display = "";
this.doc.getElementById("lbDetails").style.display = "";
this.doc.getElementById("lbPause").style.display = "none";
this.doc.getElementById("lbPlay").style.display = "none";
}
this.doc.getElementById("lbImageContainer").style.display = (this.isLyteframe ? "none" : "");
this.doc.getElementById("lbIframeContainer").style.display = (this.isLyteframe ? "" : "none");
} else {
this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200);
}
};
LyteBox.prototype.updateDetails = function() {
var object = this.doc.getElementById("lbCaption");
var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));
object.style.display = "";
object.innerHTML = (sTitle == null ? "" : sTitle);
this.updateNav();
this.doc.getElementById("lbDetailsContainer").style.display = "";
object = this.doc.getElementById("lbNumberDisplay");
if (this.isSlideshow && this.slideArray.length > 1) {
object.style.display = "";
object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;
this.doc.getElementById("lbNavDisplay").style.display = (this.navType == 2 && this.showNavigation ? "" : "none");
} else if (this.imageArray.length > 1 && !this.isLyteframe) {
object.style.display = "";
object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;
this.doc.getElementById("lbNavDisplay").style.display = (this.navType == 2 ? "" : "none");
} else if (this.frameArray.length > 1 && this.isLyteframe) {
object.style.display = "";
object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;
this.doc.getElementById("lbNavDisplay").style.display = "";
} else {
this.doc.getElementById("lbNavDisplay").style.display = "none";
}
this.appear("lbDetailsContainer", (this.doAnimations ? 0 : 100));
};
LyteBox.prototype.updateNav = function() {
if (this.isSlideshow) {
if (this.activeSlide != 0) {
var object = (this.navType == 2 ? this.doc.getElementById("lbPrev2") : this.doc.getElementById("lbPrev"));
object.style.display = "";
object.onclick = function() {
if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
myLytebox.changeContent(myLytebox.activeSlide - 1); return false;
}
} else {
if (this.navType == 2) { this.doc.getElementById("lbPrev2_Off").style.display = ""; }
}
if (this.activeSlide != (this.slideArray.length - 1)) {
var object = (this.navType == 2 ? this.doc.getElementById("lbNext2") : this.doc.getElementById("lbNext"));
object.style.display = "";
object.onclick = function() {
if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
myLytebox.changeContent(myLytebox.activeSlide + 1); return false;
}
} else {
if (this.navType == 2) { this.doc.getElementById("lbNext2_Off").style.display = ""; }
}
} else if (this.isLyteframe) {
if(this.activeFrame != 0) {
var object = this.doc.getElementById("lbPrev2");
object.style.display = "";
object.onclick = function() {
myLytebox.changeContent(myLytebox.activeFrame - 1); return false;
}
} else {
this.doc.getElementById("lbPrev2_Off").style.display = "";
}
if(this.activeFrame != (this.frameArray.length - 1)) {
var object = this.doc.getElementById("lbNext2");
object.style.display = "";
object.onclick = function() {
myLytebox.changeContent(myLytebox.activeFrame + 1); return false;
}
} else {
this.doc.getElementById("lbNext2_Off").style.display = "";
}
} else {
if(this.activeImage != 0) {
var object = (this.navType == 2 ? this.doc.getElementById("lbPrev2") : this.doc.getElementById("lbPrev"));
object.style.display = "";
object.onclick = function() {
myLytebox.changeContent(myLytebox.activeImage - 1); return false;
}
} else {
if (this.navType == 2) { this.doc.getElementById("lbPrev2_Off").style.display = ""; }
}
if(this.activeImage != (this.imageArray.length - 1)) {
var object = (this.navType == 2 ? this.doc.getElementById("lbNext2") : this.doc.getElementById("lbNext"));
object.style.display = "";
object.onclick = function() {
myLytebox.changeContent(myLytebox.activeImage + 1); return false;
}
} else {
if (this.navType == 2) { this.doc.getElementById("lbNext2_Off").style.display = ""; }
}
}
this.enableKeyboardNav();
};
LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };
LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ""; };
LyteBox.prototype.keyboardAction = function(e) {
var keycode = key = escape = null;
keycode = (e == null) ? event.keyCode : e.which;
key = String.fromCharCode(keycode).toLowerCase();
escape = (e == null) ? 27 : e.DOM_VK_ESCAPE;
if ((key == "x") || (key == "c") || (keycode == escape)) {
myLytebox.end();
} else if ((key == "p") || (keycode == 37)) {
if (myLytebox.isSlideshow) {
if(myLytebox.activeSlide != 0) {
myLytebox.disableKeyboardNav();
myLytebox.changeContent(myLytebox.activeSlide - 1);
}
} else if (myLytebox.isLyteframe) {
if(myLytebox.activeFrame != 0) {
myLytebox.disableKeyboardNav();
myLytebox.changeContent(myLytebox.activeFrame - 1);
}
} else {
if(myLytebox.activeImage != 0) {
myLytebox.disableKeyboardNav();
myLytebox.changeContent(myLytebox.activeImage - 1);
}
}
} else if ((key == "n") || (keycode == 39)) {
if (myLytebox.isSlideshow) {
if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) {
myLytebox.disableKeyboardNav();
myLytebox.changeContent(myLytebox.activeSlide + 1);
}
} else if (myLytebox.isLyteframe) {
if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) {
myLytebox.disableKeyboardNav();
myLytebox.changeContent(myLytebox.activeFrame + 1);
}
} else {
if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) {
myLytebox.disableKeyboardNav();
myLytebox.changeContent(myLytebox.activeImage + 1);
}
}
}
};
LyteBox.prototype.preloadNeighborImages = function() {
if (this.isSlideshow) {
if ((this.slideArray.length - 1) > this.activeSlide) {
preloadNextImage = new Image();
preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];
}
if(this.activeSlide > 0) {
preloadPrevImage = new Image();
preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];
}
} else {
if ((this.imageArray.length - 1) > this.activeImage) {
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if(this.activeImage > 0) {
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}
}
};
LyteBox.prototype.togglePlayPause = function(hideID, showID) {
if (this.isSlideshow && hideID == "lbPause") {
for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
}
this.doc.getElementById(hideID).style.display = "none";
this.doc.getElementById(showID).style.display = "";
if (hideID == "lbPlay") {
this.isPaused = false;
if (this.activeSlide == (this.slideArray.length - 1)) {
this.end();
} else {
this.changeContent(this.activeSlide + 1);
}
} else {
this.isPaused = true;
}
};
LyteBox.prototype.end = function(caller) {
var closeClick = (caller == "slideshow" ? false : true);
if (this.isSlideshow && this.isPaused && !closeClick) { return; }
this.disableKeyboardNav();
this.doc.getElementById("lbMain").style.display = "none";
this.fade("lbOverlay", (this.doAnimations ? this.maxOpacity : 0));
this.toggleSelects("visible");
if (this.hideFlash) { this.toggleFlash("visible"); }
if (this.isSlideshow) {
for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
}
};
LyteBox.prototype.checkFrame = function() {
if (window.parent.frames[window.name] && (parent.document.getElementsByTagName("frameset").length <= 0)) {
this.isFrame = true;
this.lytebox = "window.parent." + window.name + ".myLytebox";
this.doc = parent.document;
} else {
this.isFrame = false;
this.lytebox = "myLytebox";
this.doc = document;
}
};
LyteBox.prototype.getPixelRate = function(cur, img) {
var diff = (img > cur) ? img - cur : cur - img;
if (diff >= 0 && diff <= 100) { return 10; }
if (diff > 100 && diff <= 200) { return 15; }
if (diff > 200 && diff <= 300) { return 20; }
if (diff > 300 && diff <= 400) { return 25; }
if (diff > 400 && diff <= 500) { return 30; }
if (diff > 500 && diff <= 600) { return 35; }
if (diff > 600 && diff <= 700) { return 40; }
if (diff > 700) { return 45; }
};
LyteBox.prototype.appear = function(id, opacity) {
var object = this.doc.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + (opacity + 10) + ")";
if (opacity == 100 && (id == "lbImage" || id == "lbIframe")) {
this.updateDetails();
} else if (opacity >= this.maxOpacity && id == "lbOverlay") {
for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }
return;
} else if (opacity >= 100 && id == "lbDetailsContainer") {
for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }
this.doc.getElementById("lbOverlay").style.height = this.getPageSize()[1] + "px";
} else {
if (id == "lbOverlay") {
this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear("" + id + "", " + (opacity+20) + ")", 1);
} else {
this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear("" + id + "", " + (opacity+10) + ")", 1);
}
}
};
LyteBox.prototype.fade = function(id, opacity) {
var object = this.doc.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
if (opacity <= 0) {
try {
object.display = "none";
} catch(err) { }
} else if (id == "lbOverlay") {
this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade("" + id + "", " + (opacity-20) + ")", 1);
} else {
this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade("" + id + "", " + (opacity-10) + ")", 1);
}
};
LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) {
if (!this.hDone) {
this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW("" + id + "", " + curW + ", " + maxW + ", " + pixelrate + ")", 100);
return;
}
var object = this.doc.getElementById(id);
var timer = speed ? speed : (this.resizeDuration/2);
var newW = (this.doAnimations ? curW : maxW);
object.style.width = (newW) + "px";
if (newW < maxW) {
newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;
} else if (newW > maxW) {
newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;
}
this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW("" + id + "", " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);
if (parseInt(object.style.width) == maxW) {
this.wDone = true;
for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }
}
};
LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {
var timer = speed ? speed : (this.resizeDuration/2);
var object = this.doc.getElementById(id);
var newH = (this.doAnimations ? curH : maxH);
object.style.height = (newH) + "px";
if (newH < maxH) {
newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;
} else if (newH > maxH) {
newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;
}
this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH("" + id + "", " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);
if (parseInt(object.style.height) == maxH) {
this.hDone = true;
for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }
}
};
LyteBox.prototype.getPageScroll = function() {
if (self.pageYOffset) {
return this.isFrame ? parent.pageYOffset : self.pageYOffset;
} else if (this.doc.documentElement && this.doc.documentElement.scrollTop){
return this.doc.documentElement.scrollTop;
} else if (document.body) {
return this.doc.body.scrollTop;
}
};
LyteBox.prototype.getPageSize = function() {
var xScroll, yScroll, windowWidth, windowHeight;
if (window.innerHeight && window.scrollMaxY) {
xScroll = this.doc.scrollWidth;
yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);
} else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){
xScroll = this.doc.body.scrollWidth;
yScroll = this.doc.body.scrollHeight;
} else {
xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;
yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;
xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;
yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;
}
if (self.innerHeight) {
windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;
windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = this.doc.documentElement.clientWidth;
windowHeight = this.doc.documentElement.clientHeight;
} else if (document.body) {
windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;
windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;
windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;
windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;
}
var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;
return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
};
LyteBox.prototype.toggleFlash = function(state) {
var objects = this.doc.getElementsByTagName("object");
for (var i = 0; i < objects.length; i++) {
objects[i].style.visibility = (state == "hide") ? "hidden" : "visible";
}
var embeds = this.doc.getElementsByTagName("embed");
for (var i = 0; i < embeds.length; i++) {
embeds[i].style.visibility = (state == "hide") ? "hidden" : "visible";
}
if (this.isFrame) {
for (var i = 0; i < parent.frames.length; i++) {
try {
objects = parent.frames[i].window.document.getElementsByTagName("object");
for (var j = 0; j < objects.length; j++) {
objects[j].style.visibility = (state == "hide") ? "hidden" : "visible";
}
} catch(e) { }
try {
embeds = parent.frames[i].window.document.getElementsByTagName("embed");
for (var j = 0; j < embeds.length; j++) {
embeds[j].style.visibility = (state == "hide") ? "hidden" : "visible";
}
} catch(e) { }
}
}
};
LyteBox.prototype.toggleSelects = function(state) {
var selects = this.doc.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++ ) {
selects[i].style.visibility = (state == "hide") ? "hidden" : "visible";
}
if (this.isFrame) {
for (var i = 0; i < parent.frames.length; i++) {
try {
selects = parent.frames[i].window.document.getElementsByTagName("select");
for (var j = 0; j < selects.length; j++) {
selects[j].style.visibility = (state == "hide") ? "hidden" : "visible";
}
} catch(e) { }
}
}
};
LyteBox.prototype.pause = function(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime) { return; }
}
};
if (window.addEventListener) {
window.addEventListener("load",initLytebox,false);
} else if (window.attachEvent) {
window.attachEvent("onload",initLytebox);
} else {
window.onload = function() {initLytebox();}
}
function initLytebox() { myLytebox = new LyteBox(); }
</script>
<style type="text/css" media="screen">
#lbOverlay { position: absolute; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
#lbOverlay.grey { background-color: #000000; }
#lbOverlay.red { background-color: #330000; }
#lbOverlay.green { background-color: #003300; }
#lbOverlay.blue { background-color: #011D50; }
#lbOverlay.gold { background-color: #666600; }
#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }
#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
#lbOuterContainer.grey { border: 3px solid #888888; }
#lbOuterContainer.red { border: 3px solid #DD0000; }
#lbOuterContainer.green { border: 3px solid #00B000; }
#lbOuterContainer.blue { border: 3px solid #5F89D8; }
#lbOuterContainer.gold { border: 3px solid #B0B000; }
#lbDetailsContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; overflow: auto; margin: 0 auto; }
#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }
#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }
#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }
#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }
#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }
#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(images/loading.gif) center no-repeat;
}
#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }
#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }
#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(images/prev_red.gif) left 15% no-repeat; }
#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(images/prev_green.gif) left 15% no-repeat; }
#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(images/prev_blue.gif) left 15% no-repeat; }
#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(images/prev_gold.gif) left 15% no-repeat; }
#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }
#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }
#lbNext.red:hover, #lbNext.red:visited:hover { background: url(images/next_red.gif) right 15% no-repeat; }
#lbNext.green:hover, #lbNext.green:visited:hover { background: url(images/next_green.gif) right 15% no-repeat; }
#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(images/next_blue.gif) right 15% no-repeat; }
#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(images/next_gold.gif) right 15% no-repeat; }
#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }
#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }
#lbPrev2.red, #lbNext2.red, #lbSpacer.red { color: #620000; }
#lbPrev2.green, #lbNext2.green, #lbSpacer.green { color: #003300; }
#lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue { color: #01379E; }
#lbPrev2.gold, #lbNext2.gold, #lbSpacer.gold { color: #666600; }
#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }
#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }
#lbPrev2_Off.red, #lbNext2_Off.red { color: #FFCCCC; }
#lbPrev2_Off.green, #lbNext2_Off.green { color: #82FF82; }
#lbPrev2_Off.blue, #lbNext2_Off.blue { color: #B7CAEE; }
#lbPrev2_Off.gold, #lbNext2_Off.gold { color: #E1E100; }
#lbDetailsData { padding: 0 10px; }
#lbDetailsData.grey { color: #333333; }
#lbDetailsData.red { color: #620000; }
#lbDetailsData.green { color: #003300; }
#lbDetailsData.blue { color: #01379E; }
#lbDetailsData.gold { color: #666600; }
#lbDetails { width: 60%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; }
#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }
#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }
#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbClose.grey { background: url(images/close_grey.png) no-repeat; }
#lbClose.red { background: url(images/close_red.png) no-repeat; }
#lbClose.green { background: url(images/close_green.png) no-repeat; }
#lbClose.blue { background: url(images/close_blue.png) no-repeat; }
#lbClose.gold { background: url(images/close_gold.png) no-repeat; }
#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPlay.grey { background: url(images/play_grey.png) no-repeat; }
#lbPlay.red { background: url(images/play_red.png) no-repeat; }
#lbPlay.green { background: url(images/play_green.png) no-repeat; }
#lbPlay.blue { background: url(images/play_blue.png) no-repeat; }
#lbPlay.gold { background: url(images/play_gold.png) no-repeat; }
#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPause.grey { background: url(images/pause_grey.png) no-repeat; }
#lbPause.red { background: url(images/pause_red.png) no-repeat; }
#lbPause.green { background: url(images/pause_green.png) no-repeat; }
#lbPause.blue { background: url(images/pause_blue.png) no-repeat; }
#lbPause.gold { background: url(images/pause_gold.png) no-repeat; }
</style>
</head>
<body>
<a href="http://www.wbex.ru/style/logo.png" rel="lytebox" title="Image Description">Image #1</a>
</body>
</html>
DHTML modal dialog box
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Demo 1: DHTML modal dialog box</title>
<style type="text/css">
/*
General CSS for the demos of DHTMLSuite
*/
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
}
a{
color:red;
text-decoration:underline;
}
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:500px;
margin:0 auto;
margin-top:10px;
border:1px double #000;
padding:5px;
}
/* Alternative layout for the message box - used by one of the messages */
.modalDialog_contentDiv_error{
border:3px solid #FFF;
padding:2px;
z-index:100;/* Always needed */
position:absolute; /* Always needed */
background-color:#F00; /* White background color for the message */
color:#FFF;
}
.modalDialog_contentDiv_error a{
color:#FFF;
}
h1{
margin-top:0px;
}
</style>
<script type="text/javascript">
function verify(ver){
if(ver){
// Confirmed message, i.e. clicked on "Yes"
alert("Message confirmed");
}else{
// Clicked on "No"
alert("Message not confirmed");
}
}
</script>
<style type="text/css">
/************************************************************************************************************
* DHTML modal dialog box (CSS for the DHTMLSuite_modalMessage class)
*
* Created: August, 26th, 2006
* @class Purpose of class: Display a modal dialog box on the screen.
*
* Css files used by this script: modal-message.css
*
* Update log:
*
************************************************************************************************************/
.modalDialog_transparentDivs{
filter:alpha(opacity=40); /* Transparency */
opacity:0.4; /* Transparency */
background-color:#AAA;
z-index:1;
position:absolute; /* Always needed */
}
.modalDialog_contentDiv{
border:3px solid #000;
padding:2px;
z-index:100;/* Always needed */
position:absolute; /* Always needed */
background-color:#FFF; /* White background color for the message */
}
.modalDialog_contentDiv_shadow{
z-index:90;/* Always needed - to make it appear below the message */
position:absolute; /* Always needed */
background-color:#555;
filter:alpha(opacity=30); /* Transparency */
opacity:0.3; /* Transparency */
}
</style>
<script type="text/javascript">
/* Simple AJAX Code-Kit (SACK) v1.6.1 */
/* �2005 Gregory Wild-Smith */
/* www.twilightuniverse.ru */
/* Software licenced under a modified X11 licence,
see documentation or authors website for more details */
function sack(file) {
this.xmlhttp = null;
this.resetData = function() {
this.method = "POST";
this.queryStringSeparator = "?";
this.argumentSeparator = "&";
this.URLString = "";
this.encodeURIString = true;
this.execute = false;
this.element = null;
this.elementObj = null;
this.requestFile = file;
this.vars = new Object();
this.responseStatus = new Array(2);
};
this.resetFunctions = function() {
this.onLoading = function() { };
this.onLoaded = function() { };
this.onInteractive = function() { };
this.onCompletion = function() { };
this.onError = function() { };
this.onFail = function() { };
};
this.reset = function() {
this.resetFunctions();
this.resetData();
};
this.createAJAX = function() {
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
this.xmlhttp = null;
}
}
if (! this.xmlhttp) {
if (typeof XMLHttpRequest != "undefined") {
this.xmlhttp = new XMLHttpRequest();
} else {
this.failed = true;
}
}
};
this.setVar = function(name, value){
this.vars[name] = Array(value, false);
};
this.encVar = function(name, value, returnvars) {
if (true == returnvars) {
return Array(encodeURIComponent(name), encodeURIComponent(value));
} else {
this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
}
}
this.processURLString = function(string, encode) {
encoded = encodeURIComponent(this.argumentSeparator);
regexp = new RegExp(this.argumentSeparator + "|" + encoded);
varArray = string.split(regexp);
for (i = 0; i < varArray.length; i++){
urlVars = varArray[i].split("=");
if (true == encode){
this.encVar(urlVars[0], urlVars[1]);
} else {
this.setVar(urlVars[0], urlVars[1]);
}
}
}
this.createURLString = function(urlstring) {
if (this.encodeURIString && this.URLString.length) {
this.processURLString(this.URLString, true);
}
if (urlstring) {
if (this.URLString.length) {
this.URLString += this.argumentSeparator + urlstring;
} else {
this.URLString = urlstring;
}
}
// prevents caching of URLString
this.setVar("rndval", new Date().getTime());
urlstringtemp = new Array();
for (key in this.vars) {
if (false == this.vars[key][1] && true == this.encodeURIString) {
encoded = this.encVar(key, this.vars[key][0], true);
delete this.vars[key];
this.vars[encoded[0]] = Array(encoded[1], true);
key = encoded[0];
}
urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
}
if (urlstring){
this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
} else {
this.URLString += urlstringtemp.join(this.argumentSeparator);
}
}
this.runResponse = function() {
eval(this.response);
}
this.runAJAX = function(urlstring) {
if (this.failed) {
this.onFail();
} else {
this.createURLString(urlstring);
if (this.element) {
this.elementObj = document.getElementById(this.element);
}
if (this.xmlhttp) {
var self = this;
if (this.method == "GET") {
totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
this.xmlhttp.open(this.method, totalurlstring, true);
} else {
this.xmlhttp.open(this.method, this.requestFile, true);
try {
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
} catch (e) { }
}
this.xmlhttp.onreadystatechange = function() {
switch (self.xmlhttp.readyState) {
case 1:
self.onLoading();
break;
case 2:
self.onLoaded();
break;
case 3:
self.onInteractive();
break;
case 4:
self.response = self.xmlhttp.responseText;
self.responseXML = self.xmlhttp.responseXML;
self.responseStatus[0] = self.xmlhttp.status;
self.responseStatus[1] = self.xmlhttp.statusText;
if (self.execute) {
self.runResponse();
}
if (self.elementObj) {
elemNodeName = self.elementObj.nodeName;
elemNodeName.toLowerCase();
if (elemNodeName == "input"
|| elemNodeName == "select"
|| elemNodeName == "option"
|| elemNodeName == "textarea") {
self.elementObj.value = self.response;
} else {
self.elementObj.innerHTML = self.response;
}
}
if (self.responseStatus[0] == "200") {
self.onCompletion();
} else {
self.onError();
}
self.URLString = "";
break;
}
};
this.xmlhttp.send(this.URLString);
}
}
};
this.reset();
this.createAJAX();
}
</script>
<script type="text/javascript">
/************************************************************************************************************
* DHTML modal dialog box
*
* Created: August, 26th, 2006
* @class Purpose of class: Display a modal dialog box on the screen.
*
* Css files used by this script: modal-message.css
*
* Demos of this class: demo-modal-message-1.html
*
* Update log:
*
************************************************************************************************************/
/**
* @constructor
*/
DHTML_modalMessage = function()
{
var url; // url of modal message
var htmlOfModalMessage; // html of modal message
var divs_transparentDiv; // Transparent div covering page content
var divs_content; // Modal message div.
var iframe; // Iframe used in ie
var layoutCss; // Name of css file;
var width; // Width of message box
var height; // Height of message box
var existingBodyOverFlowStyle; // Existing body overflow css
var dynContentObj; // Reference to dynamic content object
var cssClassOfMessageBox; // Alternative css class of message box - in case you want a different appearance on one of them
var shadowDivVisible; // Shadow div visible ?
var shadowOffset; // X and Y offset of shadow(pixels from content box)
var MSIE;
this.url = ""; // Default url is blank
this.htmlOfModalMessage = ""; // Default message is blank
this.layoutCss = "modal-message.css"; // Default CSS file
this.height = 200; // Default height of modal message
this.width = 400; // Default width of modal message
this.cssClassOfMessageBox = false; // Default alternative css class for the message box
this.shadowDivVisible = true; // Shadow div is visible by default
this.shadowOffset = 5; // Default shadow offset.
this.MSIE = false;
if(navigator.userAgent.indexOf("MSIE")>=0) this.MSIE = true;
}
DHTML_modalMessage.prototype = {
// {{{ setSource(urlOfSource)
/**
* Set source of the modal dialog box
*
*
* @public
*/
setSource : function(urlOfSource)
{
this.url = urlOfSource;
}
// }}}
,
// {{{ setHtmlContent(newHtmlContent)
/**
* Setting static HTML content for the modal dialog box.
*
* @param String newHtmlContent = Static HTML content of box
*
* @public
*/
setHtmlContent : function(newHtmlContent)
{
this.htmlOfModalMessage = newHtmlContent;
}
// }}}
,
// {{{ setSize(width,height)
/**
* Set the size of the modal dialog box
*
* @param int width = width of box
* @param int height = height of box
*
* @public
*/
setSize : function(width,height)
{
if(width)this.width = width;
if(height)this.height = height;
}
// }}}
,
// {{{ setCssClassMessageBox(newCssClass)
/**
* Assign the message box to a new css class.(in case you wants a different appearance on one of them)
*
* @param String newCssClass = Name of new css class (Pass false if you want to change back to default)
*
* @public
*/
setCssClassMessageBox : function(newCssClass)
{
this.cssClassOfMessageBox = newCssClass;
if(this.divs_content){
if(this.cssClassOfMessageBox)
this.divs_content.className=this.cssClassOfMessageBox;
else
this.divs_content.className="modalDialog_contentDiv";
}
}
// }}}
,
// {{{ setShadowOffset(newShadowOffset)
/**
* Specify the size of shadow
*
* @param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
*
* @public
*/
setShadowOffset : function(newShadowOffset)
{
this.shadowOffset = newShadowOffset
}
// }}}
,
// {{{ display()
/**
* Display the modal dialog box
*
*
* @public
*/
display : function()
{
if(!this.divs_transparentDiv){
this.__createDivs();
}
// Redisplaying divs
this.divs_transparentDiv.style.display="block";
this.divs_content.style.display="block";
this.divs_shadow.style.display="block";
if(this.MSIE)this.iframe.style.display="block";
this.__resizeDivs();
/* Call the __resizeDivs method twice in case the css file has changed. The first execution of this method may not catch these changes */
window.refToThisModalBoxObj = this;
setTimeout("window.refToThisModalBoxObj.__resizeDivs()",150);
this.__insertContent(); // Calling method which inserts content into the message div.
}
// }}}
,
// {{{ ()
/**
* Display the modal dialog box
*
*
* @public
*/
setShadowDivVisible : function(visible)
{
this.shadowDivVisible = visible;
}
// }}}
,
// {{{ close()
/**
* Close the modal dialog box
*
*
* @public
*/
close : function()
{
//document.documentElement.style.overflow = ""; // Setting the CSS overflow attribute of the <html> tag back to default.
/* Hiding divs */
this.divs_transparentDiv.style.display="none";
this.divs_content.style.display="none";
this.divs_shadow.style.display="none";
if(this.MSIE)this.iframe.style.display="none";
}
// }}}
,
// {{{ __addEvent()
/**
* Add event
*
*
* @private
*/
addEvent : function(whichObject,eventType,functionName,suffix)
{
if(!suffix)suffix = "";
if(whichObject.attachEvent){
whichObject["e"+eventType+functionName+suffix] = functionName;
whichObject[eventType+functionName+suffix] = function(){whichObject["e"+eventType+functionName+suffix]( window.event );}
whichObject.attachEvent( "on"+eventType, whichObject[eventType+functionName+suffix] );
} else
whichObject.addEventListener(eventType,functionName,false);
}
// }}}
,
// {{{ __createDivs()
/**
* Create the divs for the modal dialog box
*
*
* @private
*/
__createDivs : function()
{
// Creating transparent div
this.divs_transparentDiv = document.createElement("DIV");
this.divs_transparentDiv.className="modalDialog_transparentDivs";
this.divs_transparentDiv.style.left = "0px";
this.divs_transparentDiv.style.top = "0px";
document.body.appendChild(this.divs_transparentDiv);
// Creating content div
this.divs_content = document.createElement("DIV");
this.divs_content.className = "modalDialog_contentDiv";
this.divs_content.id = "DHTMLSuite_modalBox_contentDiv";
this.divs_content.style.zIndex = 100000;
if(this.MSIE){
this.iframe = document.createElement("<IFRAME src="about:blank" frameborder=0>");
this.iframe.style.zIndex = 90000;
this.iframe.style.position = "absolute";
document.body.appendChild(this.iframe);
}
document.body.appendChild(this.divs_content);
// Creating shadow div
this.divs_shadow = document.createElement("DIV");
this.divs_shadow.className = "modalDialog_contentDiv_shadow";
this.divs_shadow.style.zIndex = 95000;
document.body.appendChild(this.divs_shadow);
window.refToModMessage = this;
this.addEvent(window,"scroll",function(e){ window.refToModMessage.__repositionTransparentDiv() });
this.addEvent(window,"resize",function(e){ window.refToModMessage.__repositionTransparentDiv() });
}
// }}}
,
// {{{ __getBrowserSize()
/**
* Get browser size
*
*
* @private
*/
__getBrowserSize : function()
{
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = document.documentElement.clientHeight;
var bodyWidth, bodyHeight;
if (self.innerHeight){ // all except Explorer
bodyWidth = self.innerWidth;
bodyHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
// Explorer 6 Strict Mode
bodyWidth = document.documentElement.clientWidth;
bodyHeight = document.documentElement.clientHeight;
} else if (document.body) {// other Explorers
bodyWidth = document.body.clientWidth;
bodyHeight = document.body.clientHeight;
}
return [bodyWidth,bodyHeight];
}
// }}}
,
// {{{ __resizeDivs()
/**
* Resize the message divs
*
*
* @private
*/
__resizeDivs : function()
{
var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(this.cssClassOfMessageBox)
this.divs_content.className=this.cssClassOfMessageBox;
else
this.divs_content.className="modalDialog_contentDiv";
if(!this.divs_transparentDiv)return;
// Preserve scroll position
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
window.scrollTo(sl,st);
setTimeout("window.scrollTo(" + sl + "," + st + ");",10);
this.__repositionTransparentDiv();
var brSize = this.__getBrowserSize();
var bodyWidth = brSize[0];
var bodyHeight = brSize[1];
// Setting width and height of content div
this.divs_content.style.width = this.width + "px";
this.divs_content.style.height= this.height + "px";
// Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)
var tmpWidth = this.divs_content.offsetWidth;
var tmpHeight = this.divs_content.offsetHeight;
// Setting width and height of left transparent div
this.divs_content.style.left = Math.ceil((bodyWidth - tmpWidth) / 2) + "px";;
this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) + topOffset) + "px";
if(this.MSIE){
this.iframe.style.left = this.divs_content.style.left;
this.iframe.style.top = this.divs_content.style.top;
this.iframe.style.width = this.divs_content.style.width;
this.iframe.style.height = this.divs_content.style.height;
}
this.divs_shadow.style.left = (this.divs_content.style.left.replace("px","")/1 + this.shadowOffset) + "px";
this.divs_shadow.style.top = (this.divs_content.style.top.replace("px","")/1 + this.shadowOffset) + "px";
this.divs_shadow.style.height = tmpHeight + "px";
this.divs_shadow.style.width = tmpWidth + "px";
if(!this.shadowDivVisible)this.divs_shadow.style.display="none"; // Hiding shadow if it has been disabled
}
// }}}
,
// {{{ __insertContent()
/**
* Insert content into the content div
*
*
* @private
*/
__repositionTransparentDiv : function()
{
this.divs_transparentDiv.style.top = Math.max(document.body.scrollTop,document.documentElement.scrollTop) + "px";
this.divs_transparentDiv.style.left = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft) + "px";
var brSize = this.__getBrowserSize();
var bodyWidth = brSize[0];
var bodyHeight = brSize[1];
this.divs_transparentDiv.style.width = bodyWidth + "px";
this.divs_transparentDiv.style.height = bodyHeight + "px";
}
// }}}
,
// {{{ __insertContent()
/**
* Insert content into the content div
*
*
* @private
*/
__insertContent : function()
{
if(this.url){ // url specified - load content dynamically
ajax_loadContent("DHTMLSuite_modalBox_contentDiv",this.url);
}else{ // no url set, put static content inside the message box
this.divs_content.innerHTML = this.htmlOfModalMessage;
}
}
}
</script>
<script type="text/javascript">
/************************************************************************************************************
Ajax dynamic content
Copyright (C) 2006 DTHMLGoodies.ru, Alf Magne Kalleland
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Dhtmlgoodies.ru., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.
Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.ru
************************************************************************************************************/
var enableCache = true;
var jsCache = new Array();
var dynamicContent_ajaxObjects = new Array();
function ajax_showContent(divId,ajaxIndex,url)
{
var targetObj = document.getElementById(divId);
targetObj.innerHTML = dynamicContent_ajaxObjects[ajaxIndex].response;
if(enableCache){
jsCache[url] = dynamicContent_ajaxObjects[ajaxIndex].response;
}
dynamicContent_ajaxObjects[ajaxIndex] = false;
ajax_parseJs(targetObj)
}
function ajax_loadContent(divId,url)
{
if(enableCache && jsCache[url]){
document.getElementById(divId).innerHTML = jsCache[url];
return;
}
var ajaxIndex = dynamicContent_ajaxObjects.length;
document.getElementById(divId).innerHTML = "Loading content - please wait";
dynamicContent_ajaxObjects[ajaxIndex] = new sack();
dynamicContent_ajaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get
dynamicContent_ajaxObjects[ajaxIndex].onCompletion = function(){ ajax_showContent(divId,ajaxIndex,url); }; // Specify function that will be executed after file has been found
dynamicContent_ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function
}
function ajax_parseJs(obj)
{
var scriptTags = obj.getElementsByTagName("SCRIPT");
var string = "";
var jsCode = "";
for(var no=0;no<scriptTags.length;no++){
if(scriptTags[no].src){
var head = document.getElementsByTagName("head")[0];
var scriptObj = document.createElement("script");
scriptObj.setAttribute("type", "text/javascript");
scriptObj.setAttribute("src", scriptTags[no].src);
}else{
if(navigator.userAgent.indexOf("Opera")>=0){
jsCode = jsCode + scriptTags[no].text + "\n";
}
else
jsCode = jsCode + scriptTags[no].innerHTML;
}
}
if(jsCode)ajax_installScript(jsCode);
}
function ajax_installScript(script)
{
if (!script)
return;
if (window.execScript){
window.execScript(script)
}else if(window.jQuery && jQuery.browser.safari){ // safari detection in jQuery
window.setTimeout(script,0);
}else{
window.setTimeout( script, 0 );
}
}
</script>
</head>
<body>
<form>
<div id="mainContainer">
<p>This is a demo of the DHTML_modalMessage class. It displays a message at the center of the screen and disables all other page controls until the message is closed.</p>
<a href="#" onclick="displayMessage("includes/demo-modal-message-1.inc");return false">Message from url (example 1)</a><br>
<a href="#" onclick="displayMessage("includes/demo-modal-message-2.inc");return false">Message from url (example 2)</a><br>
<a href="#" onclick="displayMessage("includes/demo-modal-message-3.inc");return false">Alternative confirm dialog (example 3)</a><br>
<p>The content of the two boxes above are loaded from external files. We have also specified that we want a drop shadow on them</p>
<a href="#" onclick="displayStaticMessage("<h1>Static message</h1><p>This is a static message</p><p><a href=\"#\" onclick=\"closeMessage();return false\">Close</a>",false);return false">Static message (Example 1)</a><br>
<a href="#" onclick="displayStaticMessage("<h1>Error message</h1><p>This is a static message with a different layout(css class)</p><p><a href=\"#\" onclick=\"closeMessage();return false\">Close</a>","modalDialog_contentDiv_error");return false">Static message (Example 2 - different layout)</a>
<p>These last boxes are displaying static HTML. There are no shadows on these boxes. The last message box is assigned to a different CSS class than
the other messages. This gives it a different look.</p>
<div class="clear"></div>
</div>
</form>
<script type="text/javascript">
messageObj = new DHTML_modalMessage(); // We only create one object of this class
messageObj.setShadowOffset(5); // Large shadow
function displayMessage(url)
{
messageObj.setSource(url);
messageObj.setCssClassMessageBox(false);
messageObj.setSize(400,200);
messageObj.setShadowDivVisible(true); // Enable shadow for these boxes
messageObj.display();
}
function displayStaticMessage(messageContent,cssClass)
{
messageObj.setHtmlContent(messageContent);
messageObj.setSize(300,150);
messageObj.setCssClassMessageBox(cssClass);
messageObj.setSource(false); // no html source since we want to use a static message here.
messageObj.setShadowDivVisible(false); // Disable shadow for these boxes
messageObj.display();
}
function closeMessage()
{
messageObj.close();
}
</script>
</body>
</html>
floating window
<A href="http://www.wbex.ru/Code/JavaScriptDownload/floating_window.zip">floating_window.zip( 34 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/Createlightboxwithlytebox.htm">Create light box with lytebox</a> 2. <A href="/Code/JavaScript/GUI-Components/DHTMLmodaldialogbox.htm">DHTML modal dialog box</a> 3. <A href="/Code/JavaScript/GUI-Components/jQuerybasedlightbox.htm">jQuery based lightbox</a> <A href="/Code/JavaScript/GUI-Components/jQuerybasedlightbox.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/lightbox2033.htm">lightbox 2.03.3 </a> <A href="/Code/JavaScript/GUI-Components/lightbox2033.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/mochav095windowssystem.htm">mocha_v.0.9.5 windows system</a> <A href="/Code/JavaScript/GUI-Components/mochav095windowssystem.htm"></a>
jQuery based lightbox
<A href="http://www.wbex.ru/Code/JavaScriptDownload/lightbox.zip">lightbox.zip( 50 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/Createlightboxwithlytebox.htm">Create light box with lytebox</a> 2. <A href="/Code/JavaScript/GUI-Components/DHTMLmodaldialogbox.htm">DHTML modal dialog box</a> 3. <A href="/Code/JavaScript/GUI-Components/floatingwindow.htm">floating window</a> <A href="/Code/JavaScript/GUI-Components/floatingwindow.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/lightbox2033.htm">lightbox 2.03.3 </a> <A href="/Code/JavaScript/GUI-Components/lightbox2033.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/mochav095windowssystem.htm">mocha_v.0.9.5 windows system</a> <A href="/Code/JavaScript/GUI-Components/mochav095windowssystem.htm"></a>
lightbox 2.03.3
<A href="http://www.wbex.ru/Code/JavaScriptDownload/lightbox2.03.3.zip">lightbox2.03.3.zip( 74 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/Createlightboxwithlytebox.htm">Create light box with lytebox</a> 2. <A href="/Code/JavaScript/GUI-Components/DHTMLmodaldialogbox.htm">DHTML modal dialog box</a> 3. <A href="/Code/JavaScript/GUI-Components/floatingwindow.htm">floating window</a> <A href="/Code/JavaScript/GUI-Components/floatingwindow.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/jQuerybasedlightbox.htm">jQuery based lightbox</a> <A href="/Code/JavaScript/GUI-Components/jQuerybasedlightbox.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/mochav095windowssystem.htm">mocha_v.0.9.5 windows system</a> <A href="/Code/JavaScript/GUI-Components/mochav095windowssystem.htm"></a>
mocha_v.0.9.5 windows system
<A href="http://www.wbex.ru/Code/JavaScriptDownload/mocha_v.0.9.5.zip">mocha_v.0.9.5.zip( 186 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/Createlightboxwithlytebox.htm">Create light box with lytebox</a> 2. <A href="/Code/JavaScript/GUI-Components/DHTMLmodaldialogbox.htm">DHTML modal dialog box</a> 3. <A href="/Code/JavaScript/GUI-Components/floatingwindow.htm">floating window</a> <A href="/Code/JavaScript/GUI-Components/floatingwindow.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/jQuerybasedlightbox.htm">jQuery based lightbox</a> <A href="/Code/JavaScript/GUI-Components/jQuerybasedlightbox.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/lightbox2033.htm">lightbox 2.03.3 </a> <A href="/Code/JavaScript/GUI-Components/lightbox2033.htm"></a>
