ClearTimeOut werkt te goed.
hieronder het script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var velden = Array('','voornaam', 'achternaam', 'email', 'inhoud', 'onderwerp', 'ontvanger', 'firma', 'telefoon');
var firma = "";
var picNr = 0;
var maxPic = 0;
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var elem;
var lastElement;
var timeOutID = null;
function getFirma(ele){
lastElement = ele;
window.firma = ele.innerHTML;
picNr = 0;
maxPic = ele.name;
if(maxPic >= 1){
showPic(picNr);
}
return false;
}
function showPic(){
picNr++;
document.getElementById("pic").src = "afbeeldingen/" + firma + "/" + picNr + ".jpg";
if(picNr > maxPic){
picNr = 0;
showPic(0);
}
else{
fadeIn(0);
}
}
function fadeIn(i){
document.getElementById("pic").style.opacity = i/325;
if(i<325) {
timeOutID = setTimeout("fadeIn(" + (i + 1) + ")" ,1);
}
else{
timeOutID = setTimeout("fadeOut(" + 325 + ")" ,1000);
}
}
function fadeOut(i){
document.getElementById("pic").style.opacity = i/325;
if(i>0) {
timeOutID = setTimeout("fadeOut(" + (i - 1) + ")",1);
}
else{
showPic();
}
}
function clear(){
clearTimeout(timeOutID);
}
var firma = "";
var picNr = 0;
var maxPic = 0;
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var elem;
var lastElement;
var timeOutID = null;
function getFirma(ele){
lastElement = ele;
window.firma = ele.innerHTML;
picNr = 0;
maxPic = ele.name;
if(maxPic >= 1){
showPic(picNr);
}
return false;
}
function showPic(){
picNr++;
document.getElementById("pic").src = "afbeeldingen/" + firma + "/" + picNr + ".jpg";
if(picNr > maxPic){
picNr = 0;
showPic(0);
}
else{
fadeIn(0);
}
}
function fadeIn(i){
document.getElementById("pic").style.opacity = i/325;
if(i<325) {
timeOutID = setTimeout("fadeIn(" + (i + 1) + ")" ,1);
}
else{
timeOutID = setTimeout("fadeOut(" + 325 + ")" ,1000);
}
}
function fadeOut(i){
document.getElementById("pic").style.opacity = i/325;
if(i>0) {
timeOutID = setTimeout("fadeOut(" + (i - 1) + ")",1);
}
else{
showPic();
}
}
function clear(){
clearTimeout(timeOutID);
}
het wordt aangeroepen door
Code (php)
1
<a href="portfolio.php" name="'.$iAantalAfbeeldingen.'" onMouseDown="clear();" onMouseUp=" return getFirma(this); ">
bij onMouseDown wordt de functie clear() aangeroepen. Die gebruikt de clearTimeout om de vorige timeout loop te clearen.
bij onMouseUp laadt hij de loop. (en deze werkt wanneer ik onMouseDown weg laat)
op de een of andere manier pakt ie m niet mooi. Als ik snel naar elkaar klik laat ie de loop soms wel zien, andere keer weer niet.
Kan iemand mij vertellen wat ik fout doe?
hier kan je het in action zien:
http://www.songreferences.net/reha/portfolio.php
Gewijzigd op 06/02/2012 22:16:04 door Wouter W
- name hoort uniek te zijn, en niet een integer die meerdere malen voor komt
- waarom het wiel opnieuw uitvinden? wat jij probeert kan je in 2 regels code doen met hulp van jQuery.
ik vind het wiel opnieuw uit omdat ik graag wat meer van javascript wil leren.
als je een jQuery oplossing kan laten zien, dan zou dat fijn zijn. Echter, ik zou ook graag willen weten waarom mijn script niet werkt zoals ik wil dat het werkt.
Toevoeging op 06/02/2012 22:11:01:
Oh, en wat die name betreft, ik gebruik php om het aantal foto's uit de map van de betreffende firma te tellen en zet deze dan in name om het max aantal foto's door te geven aan javascript via html.
Nee, ga niet altijd frameworks gebruiken. Kies wat het beste is en in dit geval is dat gewoon Raw JS. Daarnaast zal je toch zeker zo'n 10 regels moeten gebruiken wil je dit hetzelfde doen.
En daarnaast, name hoort uniek te zijn? Dat is natuurlijk ook fout...
Wouter, zou je alleen <?php tags willen gebruiken met PHP code en voor de rest gewoon [code] tags? Want dit maakt het er niet beter op.
En even voor de duidelijkheid:
Je wilt dat als je op een link klikt de afbeelding eerst out faded en dan de andere in faded? In dat geval zit je een beetje teveel te knoeien. En als het iets anders is dan hoor ik graag een iets betere uitleg.
Gewijzigd op 06/02/2012 22:12:11 door Wouter J
Ik heb de code tags veranderd. Wist niet dat ik ook gewoon de code tags gebruiken kon.
Bedankt voor je uitleg, klopt inderdaad van names Id's moeten identiek zijn..
Ik zal goed proberen uit te leggen wat ik graag wil:
Zoals je misschien op de site hebt gezien zie je verschillende firma's de het portfolio maken.
Elke firma heeft zijn eigen mapje met foto's.
Hoeveel foto's er in zitten bereken ik met php en geef ik mee in de name property.
Door op een van de links te klikken weet javascript over welke naam van de firma het gaat en dus welke map met foto's hij hebben moet.
Hij moet deze uit en infaden en in een loop (soort slideshow dus) laten zien.
Dit had ik allemaal werkend.
Het probleem was dat wanneer ik een link aanklikte en daarna nog een link, dat alle loops door elkaar gingen lopen. Dus heb ik hier een clearTimeout voor gebruikt bij de onmousedown functie.
Maar sinds ik dit geimplementeerd heb laat hij de slideshows niet meer zien.
Ik heb dus geen idee waar dit aan ligt, en zou graag willen weten hoe ik dit zou kunnen oplossen.
als je op de link boven klikt kun je misschien zien wat ik bedoel.
Probeer maar eens een paar keer snel te klikken, dan maakt hij de loop wel rond.
Toevoeging op 07/02/2012 09:45:03:
Oke, ik heb m nu werkend.
Het bleek dat de return false niet opging.
Tevens heb ik bij onmousedown gewoon clearTimeout(TimeOutID) ingezet en dat werkt wel.
Daarbij ook een onclick event er bij gedaan die de return false wel afhandeld.
Gewijzigd op 06/02/2012 22:24:52 door Wouter W