LYTEBOX

[KINYO]

Hi,

Und wenn Du die Anfrage unter einem vollkommen falschen Themenbereich stellst, ist die Wahrscheinlichkeit, daß Dir jemand hilft, ganz entschieden reduziert.

Sorry, hast Recht - war mir nicht ganz sicher.

Wenn die Frames Probleme machen, wäre es das sinnvollste, die Frames zu eliminieren ...

Das ist der HTML-Text zu der Aktion:
im head: <script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

im body: <a href="catalog1.htm" rel="lyteframe[catalog]" rev="width: 400px; height: 300px; scrolling: no; title="Summer Catalog">Summer Catalog</a>
<a href="catalog2.htm" rel="lyteframe[catalog]" rev="width: 400px; height: 300px; scrolling: no; title="Summer Catalog">Summer Catalog B</a>

und das der J-Script (ich wollte eigentlich den langen Script hier nicht reinstellen, aber denke, es geht nicht anders). Das Problem müsste doch in dem Bereich "this.ie = ....." ff stecken, oder?

Gruß
KINYO

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 = false; // 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 = 60; // 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 = (document.all && !window.opera) ? true : 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);
if ((this.ie && !this.ie7) || (this.ie7 && this.doc.compatMode == 'BackCompat')) {
objOverlay.style.position = 'absolute';
}
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; } .............(der Script geht noch weiter!)