LYTEBOX

[KINYO]

Hi Folks,
da bin ich wieder zum Thema "LYTEBOX". Kennt sich jemand damit einigermaßen gut aus? Ich habe da bei IE einige Probleme:

1. die Animation läuft zu langsam

2. die Bilder werden mit Schrollbalken dargestellt (im FF ohne), obwohl die die jeweiligen rev-attribute gleich der Bildgrößen sind. Wenn ich sie ca. 10px größer eingebe, dann passt's. Dafür gibt aber der FF die Bilder rechts und unten mit 'nem weißen Blitzer wieder.

3. im Slide-Show macht der IE ganz was wahnwitziges und zeigt Lytebox in Lytebox: in dem Frame wird das nächste Bild mit einem neuen Lytebox-Effekt dargestellt, anstatt das Bild bzw. die HTML-Seite auszutauschen (ohne Problem beim FF).

Und: sowohl der FF als auch IE zeigen im Slide-Show oben die Vor und Zurück-Buttons nicht, sondern bauen unten im Fußbalken einfache Steuerelemente für vor und zurück ein (häßlich!).

Was tun? Hilfe ist angebracht und erwünscht!
Danke
KINYO

[KINYO]

Hier ist noch der Link zu "dolem". Dort der ist der js-Script zu finden. Mit meinen recht bescheidenen js-Kenntnissen bin ich da nicht weiter gekommen.

http://www.dolem.com/lytebox/

Danke
KINYO

[MudGuard]

Hi,

Hier ist noch der Link zu "dolem". Dort der ist der js-Script zu finden. Mit meinen recht bescheidenen js-Kenntnissen bin ich da nicht weiter gekommen.

Und wenn Du die Anfrage unter einem vollkommen falschen Themenbereich stellst, ist die Wahrscheinlichkeit, daß Dir jemand hilft, ganz entschieden reduziert.
Wenn die Frames Probleme machen, wäre es das sinnvollste, die Frames zu eliminieren ...

Ansonsten: suchen, wo auf's falsche Fenster referenziert wird.

cu,
Andreas

[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!)

[KINYO]

noch die folgenden Bemerkungen zu meinen Problemen mit IE und Lytebox:

1. die Animation läuft zu langsam (tritt sowohl lokal als auch global auf)

2. die Bilder werden mit Schrollbalken dargestellt (im FF ohne), obwohl die die jeweiligen rev-attribute gleich der Bildgrößen sind. Wenn ich sie ca. 10px größer eingebe, dann passt's. Dafür gibt aber der FF die Bilder rechts und unten mit 'nem weißen Blitzer wieder. (tritt sowohl lokal als auch global auf)

3. im Slide-Show macht der IE ganz was wahnwitziges und zeigt Lytebox in Lytebox: in dem Frame wird das nächste Bild mit einem neuen Lytebox-Effekt dargestellt, anstatt das Bild bzw. die HTML-Seite auszutauschen (ohne Problem beim FF). (tritt nur global auf. Lokal auf meinem Rechner kein Problem)

Und: sowohl der FF als auch IE zeigen im Slide-Show oben die Vor und Zurück-Buttons nicht, sondern bauen unten im Fußbalken einfache Steuerelemente für vor und zurück ein (häßlich!). (tritt sowohl lokal als auch global auf)

Für eine eventuelle Hilfe wäre ich wirklich sehr dankbar!!!
KINYO