//############################ // Galerie mit Javascript // (c) 2000 Robert Alscher // // Usage im html-File: // // //############################ imgName = new Array(); // Name der Bilder/Links ohne .jpg, .html imgAlt = new Array(); // ALT-Eintraege zu den Bildern img = new Array(); imgAnz = 0; // Anzahl der Bilder xpos = new Array(); timerTempo=40; // Aenderung bringt fast nix. //timer; stepxinit = 5; // Start-Tempo (nicht zu schnell) stepx = -stepxinit; stepxMax = 200; // max. Geschwindigkeit! stepxMin = 1; // min. Geschwindigkeit! imgAbstand = 50; // Abstand zwischen 2 Bildern imgBottom = 400 + 60; // 400=max. Bildhoehe (+ob.Rand) marginleft=0; margintop=0; //marginbottom; //marginright; endMovement=0; // Bilder noch nicht im Endstadium d.Moves loadedOK = 0; // Bilder noch nicht geladen imgFirst = 0; // Erster in der Chain (lt. left-Werten) imgLast = -1; // Letzter in der Chain (lt. left-Werten) imgGesLength=0; // Gesamt-Laenge der Bilder snapPic = 0; // neues Bild in Mitte -> stoppen hasStarted = 0; imgsSet = 0; // schon alle Bilder geadded? // Browser-Ermittlung und ob DHTML dafuer vorgesehen: userAgent = navigator.userAgent.toLowerCase(); n4 = document.layers; ie = (document.all && userAgent.indexOf("mac")<0); w3c = document.documentElement; dhtml = ((n4 || ie || w3c) && userAgent.indexOf("aol")<0); // resize-Problem bei Netscape beheben: - auch bei IE nicht schlecht! onresize = function(){window.location.reload(false);} // Image-Handlung - setzen von aussen // Ende durch Aufruf von allImgsAreSet() kenntlich machen!!!! function addImg(name, alt) { if (!hasStarted) { imgName[imgAnz] = name; imgAlt[imgAnz] = alt; imgLast = imgAnz; img[imgLast] = new Image(); img[imgLast].src = "images/big/"+imgName[imgLast]+".jpg"; imgAnz ++; } } function allImgsAreSet() { // Spans schreiben: for (i=0; i < imgAnz; i++) document.write(""); // Bilder jetzt abgeschlossen: imgsSet = 1; } // warten auf vollstaendiges Laden der Bilder, dann setValues aufrufen // Eintrag in Body-Tag: onload="startMotion()" function startMotion() { if (!dhtml) return; // warten, bis alle Images gesetzt wurden if (!imgsSet) waittimer= setTimeout("startMotion()",10); else { if (testLoaded()) setValues(); else waittimer= setTimeout("startMotion()",10); // warten auf gel.Bilder } } //=========================================== // Zugriff auf Bild-Elemente - Browser-Unabhaengig //=========================================== function getElement(id) { return (n4 ? document.layers[id] : ie ? document.all[id] : document.getElementById(id)); } function getStyle(id) { return (n4 ? document.layers[id] : ie ? document.all[id].style : document.getElementById(id).style); } function setLeft(id,v) { if (n4) getStyle(id).left = v; else getStyle(id).posLeft = v; } function getLeft(id,v) { if (n4) return (getStyle(id).left); return (getStyle(id).posLeft); } function setTop(id,v) { if (n4) getStyle(id).top = v; else getStyle(id).posTop = v; } function setWidth(id,v) { if (n4) getStyle(id).width = v; else getStyle(id).width = v; } function writeHtml(id,txt) { if (!getElement(id)) return; if (n4) { getElement(id).document.write(txt); getElement(id).document.close(); } else getElement(id).innerHTML = txt; } //=========================================== // ENDE Zugriff auf Bild-Elemente //=========================================== // wait-Meldung wegnehmen function removeWaitSpan() { getStyle("wait").visibility = (n4?"hide":"hidden"); // jetzt alle Bilder auf visible stellen! for (i=0; i < imgAnz; i++) getStyle("span"+i).visibility = (n4?"show":""); } function testLoaded() { if (!loadedOK) { for (i=0; i < imgAnz; i++) if (img[i].width < 0) return (loadedOK); // false loadedOK = 1; } return (loadedOK); } // initValues setzen und dann die Animation mittels oneMove starten function setValues() { hasStarted = 1; if (n4) { marginbottom=window.innerHeight - 5; marginright=window.innerWidth - 5; } else { marginbottom=document.body.clientHeight - 5; marginright=document.body.clientWidth - 5; } xposNext = 0; xposFirst = xposNext; for (i=0; i < imgAnz; i++) { xpos[i] = xposNext; setLeft("span"+i, xposNext); xposNext += img[i].width + imgAbstand; setTop("span"+i, imgBottom - img[i].height); if (ie) setWidth("span"+i, img[i].width); // noetig fuer IE !!!! // jetzt erst das Bild setzen, wenn Pos gesetzt wurde writeHtml("span"+i, ""+ ""); } imgGesLength = xposNext - xposFirst; removeWaitSpan(); oneMove(0); } function oneMove(testSnap) { if (endMovement) return; movePics(testSnap); wrapPics(); if (!endMovement) timer=setTimeout("oneMove(1)",timerTempo); } function movePics(testSnap) { // falls Schirmmitte mit einer BildMitte ueberschritten wird // und snapPic true ist -> endMovement !!!! schirmmitte = marginright/2; korrx=0; if (testSnap && snapPic) { // Bild einrasten vorfhlen: for (i=0; i < imgAnz; i++) { mitte = xpos[i] + img[i].width/2; if (((mitte < schirmmitte) && ((mitte+stepx) >= schirmmitte)) || ((mitte > schirmmitte) && ((mitte+stepx) <= schirmmitte))) { stopMovement(); korrx = schirmmitte - (mitte+stepx); break; } } } for (i=0; i < imgAnz; i++) { // Bilder moven: xpos[i] += stepx+korrx; setLeft("span"+i, xpos[i]); } } function wrapPics() { if(stepx < 0) { // nach links -> erstes Bild checken (ueber 2. Bild) i = (imgFirst+1) % imgAnz; if (xpos[i] < 0) { // erstes Bild nach hinten xpos[imgFirst] += imgGesLength; setLeft("span"+imgFirst, xpos[imgFirst]); imgLast = imgFirst; imgFirst = (imgFirst + 1) % imgAnz; } } else { // nach rechts -> letztes checken if (xpos[imgLast] > marginright+10) { // Bild nach vorne xpos[imgLast] -= imgGesLength; setLeft("span"+imgLast, xpos[imgLast]); imgFirst = imgLast; imgLast --; if (imgLast < 0) imgLast = imgAnz-1; } } } // Bedien-Funktionen mit Anzeige-Funktion: function stopMovement() { if (!endMovement) { endMovement = 1; if (timer) clearTimeout(timer); // evt. Anzeigefunktion if (document.images) document.images["startstop"].src = "images/strg/play.gif"; } } function startMovement() { if (endMovement) { endMovement = 0; // evt. Anzeige-Funktion if (document.images) document.images["startstop"].src = "images/strg/stop.gif"; oneMove(0); } } function changeSnap(snap) { if (snap != snapPic) { snapPic = snap; // evt. Anzeige-Funktion } } function changeDirection() { stepx = -stepx; // evt. Anzeige-Funktion if (stepx < 0) nn = "images/strg/dir_li.gif"; else nn = "images/strg/dir_re.gif"; if (document.images) document.images["direction"].src = nn; } // reine Bedien-Funktionen: function startLeft(snap) { changeSnap(snap); if (stepx > 0) changeDirection(); startMovement(); } function startRight(snap) { changeSnap(snap); if (stepx < 0) changeDirection(); startMovement(); } function toggleSnap() { changeSnap(1-snapPic); } function startStop() { if (endMovement) startMovement(); else stopMovement(); } function incrSpeed() { stepx *= 2; if (stepx > stepxMax) stepx = stepxMax; if (stepx < -stepxMax) stepx = -stepxMax; } function decrSpeed() { oldStepx = stepx; stepx /= 2; if ((stepx < 0) && (stepx > -stepxMin)) stepx = -stepxMin; else if ((stepx >= 0) && (stepx < stepxMin)) stepx = stepxMin; } function wrSteuerung() { document.write( '
\n'+ ' \n'+ ' \n'+ ' \n'+ ' \n'+ '
\n'+ ' \n'+ '
\n'+ ' \n'+ ' \n'+ ' \n'+ ' \n'+ ' \n'+ ' \n'+ ' \n'+ ' \n'+ '
\n'+ ' \n'+ ' Bildweise nach links rollen\n'+ ' \n'+ ' \n'+ ' Kontenuierlich nach links rollen\n'+ '   \n'+ ' \n'+ ' Bildlauf starten/stoppen\n'+ '   \n'+ ' \n'+ ' Kontenuierlich nach rechts rollen\n'+ ' \n'+ ' \n'+ ' Bildweise nach rechts rollen\n'+ '
\n'+ '
\n'+ ' \n'+ ' 		  \n'+ ' \n'+ '
\n'+ ' \n'+ ' \n'+ ' \n'+ ' \n'+ '
\n'+ ' \n'+ ' Laufgeschwindigkeit erhöhen \n'+ ' \n'+ ' \n'+ ' Laufrichtung ändern \n'+ ' \n'+ ' \n'+ ' Laufgeschwindigkeit vermindern\n'+ '
\n'+ '
\n'+ ' \n'+ '
\n'+ '
\n'); }