[ERLEDIGT] Java Script Gallerie: onclick

[luke1995]

N'abend zusammen

ich bräuchte n bisschen Hilfe.
Ich bin des Java script nicht wirklich mächtig, habe verstanden wie ich es in Html einbaue und die Grundlegenden Funktionen, mehr aber auch nicht
Ich habe auch vor mich mit Javascript mal etwas intensiver zu beschäftigen.

So jetzt zum eigentlichen Problem:
Ich bin mir gerade meine Website am Aufbauen, und habe auch schon einige simple scripts für die Gallerie gefunden. Eins davon wird wohl am leichtesten umzubauen sein.
Wie ich die Dauer der angezeigten Bilder bestimme, die größe usw. dürfte ich alleine herausfinden.
Was jetz mein Problem ist... ich versuche schon länger das Script dazu zu bringen, dass wenn man darauf klickt, dass dann das nächste Bild angezeigt wird.
Ich habs bisher mit onclick versucht, wiegesagt, leichter gesagt als getan.
vielleicht kann mir ja einer von euch helfen:razz:

Hier das Script:

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');
	css.setAttribute('href','slideshow2.css');
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

	imgs = d.getElementById('rotator').getElementsByTagName('img');
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = 'block';
	imgs[0].xOpacity = .99;

	setTimeout(so_xfade,3000);
}

function so_xfade()
{
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	imgs[nIndex].style.display = 'block';
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;

	setOpacity(imgs[current]);
	setOpacity(imgs[nIndex]);

	if(cOpacity<=0)
	{
		imgs[current].style.display = 'none';
		current = nIndex;
		setTimeout(so_xfade,3000);
	}
	else
	{
		setTimeout(so_xfade,50);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

 

[mermshaus]

Das ist zu wenig Code, um selbst testen zu können, befürchte ich. Poste ein testbares Beispiel (am besten als gepackte Datei mit Bildern oder zumindest alle benötigten Quellcode-Dateien hier im Forum -- HTML, CSS, JS usw. -- Bilder hat man im Zweifel ja noch da ;-)).

Wie ist denn dein Ansatz mit onclick und wo lagen die Schwierigkeiten?

 

[Chigurh]

setTimeout(so_xfade,3000);

Ja, es wäre ja mal interessant zu sehen, wie du das denn nun probiert hast.

Wir können natürlich auch raten! Ist dein Name vielleicht....Rumpelstilzchen!?

Im Ernst: Code posten, sonst wird das nix.

Möglicherweise musst du über den onclick nur "setTimeout(so_xfade,3000);" aufrufen.

 

[luke1995]

Bisher habe ich probiert die Funktion so_xfade nochmal mit onclick aufzurufen, ging aber irgendwie in die hose
Wiegesagt, bin der Kunst des Javascrips nicht wirklich mächtig...

Wenn mir da jemand helfen würde, wär ich natürlich auch gerne bereit, den Namen/Website o.ä. auf meiner Website zu erwähnen.

Lg Lukas

 

[mermshaus]

Probier mal so:

/*
	Image Cross Fade Redux
	Version 1.0
	Last revision: 02.15.2006
	[email protected]

	Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*/

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

var to1 = null;
var to2 = null;

function so_init()
{
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');
	css.setAttribute('href','slideshow2.css');
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

	imgs = d.getElementById('rotator').getElementsByTagName('img');
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = 'block';
	imgs[0].xOpacity = .99;


    document.getElementById('rotator').onclick = function() {
        window.clearTimeout(to1);
        window.clearTimeout(to2);
        so_xfade();
    }

	to1 = setTimeout(so_xfade,3000);    
}


function so_xfade()
{
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	imgs[nIndex].style.display = 'block';
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;

	setOpacity(imgs[current]);
	setOpacity(imgs[nIndex]);

	if(cOpacity<=0)
	{
		imgs[current].style.display = 'none';
		current = nIndex;
		to1 = setTimeout(so_xfade,3000);
	}
	else
	{
		to2 = setTimeout(so_xfade,50);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

 

[luke1995]

WOW:-)
Danke
Wenn du willst kann ich deine Website mal im Impressum nennen, oder so .... kannst mir ja ne PM schreiben;-)