pictureViewer

Status
Niet open voor verdere reacties.
B

bram2

Gebruiker
Lid geworden
23 nov 2006
Berichten
80
Ik ben in javascript een programmatje aan het maken dat toelaat om een fotogallerij te bekijken.

je kan naar de volgende of de vorige gaan, of een diashow laten starten.

ik heb nu volgende code:
Code: 
function pictureViewer() 
{
	var numberOfImages = 10;
	var clicksOnPlay = 0;
	function next(forward)
	{
		var i = 0;
		i = document.getElementById("myImage").name;
		if (forward == 1)
		{
			if (i == numberOfImages)
				i = 1;
			else 
				i++;
		}
		else
		{
			if (i == 1)
				i = numberOfImages;
			else 
				i--;
		}
			document.getElementById("myImage").src = "image/"+i +".jpg";
			document.getElementById("myImage").name=i;
			document.getElementById("imageName").innerHTML = "<p>" +document.getElementById("myImage").name  +"</p>";
	}
	this.next = next
	function play()
	{
		if (clicksOnPlay  ==0) //start setInterval only if no other one is running
			{
				setInterval('next(1)',document.myform.mylist.value);
				clicksOnPlay ++;
			}
	}	
	this.play = play;
}

het probleem is dat binnen play() de functie next(1) niet gekend is. Hoe moet ik dit aanpakken?

Voor de volledigheid het deel van de html code waarin dit script gebruikt wordt
Code: 
<img id="myImage" name="1" src="image/1.jpg" width="300" />
<p id="imageName">1</p>
<script language="javascript" type="text/javascript">
var myViewer = new pictureViewer();
</script>
<input type="button"  onclick="myViewer.next(-1)" value="previous" />			<input type="button"  onclick="myViewer.next(1)" value="next" />			
<input type="button"  onclick="myViewer.play()" value="play" />
			<form name="myform">
				<select name="mylist">
					<option value="2000">2 sec</option>
					<option value="5000">5 sec</option>
					<option value="10000">10 sec</option>
					<option value="20000">20 sec</option>
				</select>
			</form>
 
Je functie heeft een wrap. Dan moet je het via de wrap aanroepen.
"next" is nl. alleen bekend binnen de functie "pictureViewer", deze heb je gedeclareerd als "myViewer", dus dat is wat je moet gebruiken.

setInterval('myViewer.next(1)',document.myform.mylist.value);
 
aelatik zei:
Je functie heeft een wrap. Dan moet je het via de wrap aanroepen.
"next" is nl. alleen bekend binnen de functie "pictureViewer", deze heb je gedeclareerd als "myViewer", dus dat is wat je moet gebruiken.

setInterval('myViewer.next(1)',document.myform.mylist.value);
Klik om te vergroten...


Dat werkt inderdaad, maar is er geen beter oplossing? Nu moet ik binnen de methode play() weten dat het object van klasse pictureViewer myViewer heet.
 
kan ook gewoon zo aanroepen denk ik, zonder de quotes ( dan is het binnen scope )

setInterval(next(1),document.myform.mylist.value);
 
aelatik zei:
kan ook gewoon zo aanroepen denk ik, zonder de quotes ( dan is het binnen scope )

setInterval(next(1),document.myform.mylist.value);
Klik om te vergroten...

Werkt toch niet echt.

In firefox wordt next(1) 1 maal uitgevoerd als ik op play druk
Opera voert eenmalig next(1) uit en reageert daarna niet meer
internet explorer 8 doet het helemaal niet, maar dat lijkt een ander probleem
 
Ik heb het eff anders inelkaar gezet. Deze werkt wel zover ik het heb kunnen testen.
Werkt echter niet met de gok op 10 images. Maar met een daadwerkelijke array van images.

Code: 
<html>
<head>
<script>


	function pViewer(pArray,lIndex,pContainer,cName) {
		intval = '';
		pContainer = document.getElementById(pContainer);
		pContainer.src = pArray[lIndex];
		this.Play = function Play(sender) {
			if (sender.value=='Stop') {
				sender.value='Play';
				clearInterval(intval);
			}
			else {
				sender.value='Stop';
				intval = setInterval (cName + '.Previous()',1000);
			}
		}
		this.Next = function Next() {
			lIndex ++;
			if (lIndex >= pArray.length) {lIndex = 0;};
			pContainer.src = pArray[lIndex];
		}
		this.Previous = function Previous() {
			lIndex --;
			if (lIndex == -1) {lIndex = pArray.length-1;};
			pContainer.src = pArray[lIndex];
		}
	}
	
</script>
</head>
<body>

<img id="myImage" name="1" src="" width="300" />
<input type="button" id="previous" name="previous" value="Previous" onclick="myViewer.Previous();"/>
<input type="button" id="next" name="next" value="Next" onclick="myViewer.Next();"/>
<input type="button" id="play" name="play" value="Play" onclick="myViewer.Play(this);"/>
<script language="javascript" type="text/javascript">
	var myPics = new Array("image/1.jpg","image/2.jpg","image/3.jpg"); 
	var myIndex = 0;
	var myViewer = new pViewer(myPics,myIndex,'myImage','myViewer');
</script>
</body>
</html>
 
aelatik zei:
Ik heb het eff anders inelkaar gezet. Deze werkt wel zover ik het heb kunnen testen.
Werkt echter niet met de gok op 10 images. Maar met een daadwerkelijke array van images.
Klik om te vergroten...

Dit werkt, en is op het eerste zicht makkelijker te hergebruiken als mijn code.

Ik ga nu proberen deze code zo goed mogelijk te begrijpen en hopelijk nog wat dingen bijleren.

Bedankt!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan