Slideshow
Mijn naam is Martin en heb mij net geregistreerd op dit Forum.
Sinds kort ben ik de website van onze Virtual Airline aan het aanpassen, maar weet nog niets van PHP.
Ik heb al wel veel aangepast wat wel duidelijk was, maar heb veel moeten zoeken.
Hopelijk kan ik er hier meer van leren.
Een van de probleempjes waar ik nu even tegenaan loop is dat de slideshow op de website op random staat en pakt veel dezelfde foto's. Ik zou willen dat de foto's op volgorde worden getoond. Graag zou ik willen weten wat ik in onderstaand script zou moeten veranderen.
Alvast heel hartelijk dank.
Hier het stukje 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
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
$(document).ready(function() {
$("#mainContent").css("min-height", ($("#sidebar2").height() + 30) + "px");
$(".menu li:has(li.active)").addClass("active");
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for (i=0;i<nrimg;i++) {
var nr = i + 1;
var url = mainUrl + "dbr/slide" + nr + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
var nr = prevnr;
while (nr == prevnr) {
nr = Math.floor(Math.random() * nrimg) + 1;
}
prevnr = nr;
var url = "url("+mainUrl+"dbr/slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout("SlideShow();", timeout);
}
</script>
$("#mainContent").css("min-height", ($("#sidebar2").height() + 30) + "px");
$(".menu li:has(li.active)").addClass("active");
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for (i=0;i<nrimg;i++) {
var nr = i + 1;
var url = mainUrl + "dbr/slide" + nr + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
var nr = prevnr;
while (nr == prevnr) {
nr = Math.floor(Math.random() * nrimg) + 1;
}
prevnr = nr;
var url = "url("+mainUrl+"dbr/slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout("SlideShow();", timeout);
}
</script>
Edit:
Code tags toegevoegd, zie ook de opmaakcodes in de Veelgestelde Vragen
Gewijzigd op 13/09/2019 20:15:50 door - Ariën -
Dit wordt natuurlijk mede bepaald door hoeveel verschillende foto's je daadwerkelijk hebt.
Thomas van den Heuvel op 13/09/2019 20:05:47:
Misschien is het handiger om de (alle) bestaande foto's in een random volgorde te zetten in plaats van elke volgende foto random te maken waarbij "random" niet meer is dan "verschilt van de vorige foto", want dat is volgens mij wat er in de bovenstaande code gebeurt.
Dit wordt natuurlijk mede bepaald door hoeveel verschillende foto's je daadwerkelijk hebt.
Dit wordt natuurlijk mede bepaald door hoeveel verschillende foto's je daadwerkelijk hebt.
Precies. Direct een leuke oefening..
Maak met PHP een array van foto URL's en gebruik shuffle() om deze door elkaar te gooien. Gebruik het resultaat van deze array in je javascript.
Gewijzigd op 13/09/2019 20:57:02 door Frank Nietbelangrijk
Maar dit is nl. wat ik bedoel dat ik nog nooit met PHP heb gewerkt en dus ook jullie advies (nog) niet begrijp.
Ik had gehoopt dat het met een kleine aanpassing gedaan kon worden.
Bijvoorbeeld door het woordje RANDOM te vervangen in ORDER. (wat ik ook heb gedaan, maar toen was de slideshow verdwenen) dus er snel weer random van gemaakt.
Frank: Jij schrijft: Dit wordt natuurlijk mede bepaald door hoeveel verschillende foto's je daadwerkelijk hebt.
Nou, dat zijn er 11 (slide1, slide2 enz.
Code (php)
1
2
3
4
2
3
4
if ( ++nr > nrimg )
{
nr = 1;
}
{
nr = 1;
}
Ik vermoed ook dat sommige dingen er dubbel in staan, klopt dat of hoort dat zo?
Hier onder staat alles van de slideshow.
De eerste regel is regelnummer 55
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<script type="text/javascript">
var nrimg = 10;
var mainUrl = "<?php echo $mainurl ?>";
var prevnr = 0;
var fadeinTimeout = 1000;
var timeout = 5000;
$(document).ready(function() {
$("#mainContent").css("min-height", ($("#sidebar2").height() + 30) + "px");
$(".menu li:has(li.active)").addClass("active");
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for (i=0;i<nrimg;i++) {
var nr = i + 1;
var url = mainUrl + "dbr/slide" + nr + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
if (++nr > nring )
{
nr = 1;
}
prevnr = nr;
var url = "url("+mainUrl+"dbr/slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout("SlideShow();", timeout);
}
</script>
<?php
}
else {
?>
<script type="text/javascript">
var nrimg = 11;
var mainUrl = "<?php echo $mainurl ?>";
var prevnr = 0;
var fadeinTimeout = 1000;
var timeout = 8000;
$(document).ready(function() {
$("#mainContent").css("min-height", ($("#sidebar2").height() + 30) + "px");
$(".menu li:has(li.active)").addClass("active");
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for (i=0;i<nrimg;i++) {
var nr = i + 1;
var url = mainUrl + "slide" + nr + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
var nr = prevnr;
while (nr == prevnr) {
nr = Math.floor(Math.random() * nrimg) + 1;
}
prevnr = nr;
var url = "url("+mainUrl+"slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout("SlideShow();", timeout);
}
</script>
var nrimg = 10;
var mainUrl = "<?php echo $mainurl ?>";
var prevnr = 0;
var fadeinTimeout = 1000;
var timeout = 5000;
$(document).ready(function() {
$("#mainContent").css("min-height", ($("#sidebar2").height() + 30) + "px");
$(".menu li:has(li.active)").addClass("active");
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for (i=0;i<nrimg;i++) {
var nr = i + 1;
var url = mainUrl + "dbr/slide" + nr + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
if (++nr > nring )
{
nr = 1;
}
prevnr = nr;
var url = "url("+mainUrl+"dbr/slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout("SlideShow();", timeout);
}
</script>
<?php
}
else {
?>
<script type="text/javascript">
var nrimg = 11;
var mainUrl = "<?php echo $mainurl ?>";
var prevnr = 0;
var fadeinTimeout = 1000;
var timeout = 8000;
$(document).ready(function() {
$("#mainContent").css("min-height", ($("#sidebar2").height() + 30) + "px");
$(".menu li:has(li.active)").addClass("active");
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for (i=0;i<nrimg;i++) {
var nr = i + 1;
var url = mainUrl + "slide" + nr + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
var nr = prevnr;
while (nr == prevnr) {
nr = Math.floor(Math.random() * nrimg) + 1;
}
prevnr = nr;
var url = "url("+mainUrl+"slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout("SlideShow();", timeout);
}
</script>
Toevoeging op 14/09/2019 16:22:49:
Weet niet hoe het komt, maar wordt nu wel beetje raar weergegeven.
Hopelijk kan je er wat mee. ander stuur ik het even opnieuw.
Toevoeging op 14/09/2019 16:47:10:
slideshow staat op www.dutchflyva.nl onderaan de homepage
Gewijzigd op 15/09/2019 13:09:17 door - Ariën -
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
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
<script type="text/javascript">
var nrimg = 11;
var nr = 1;
var mainUrl = "https://www.dutchflyva.nl/";
var fadeinTimeout = 1000;
var timeout = 8000;
$(document).ready(function() {
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for ( i = 1; i <= nrimg; i++ ) {
var url = mainUrl + "slide" + i + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
if ( ++nr > nrimg )
{
nr = 1;
}
var url = "url("+mainUrl+"slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout( SlideShow , timeout);
}
</script>
var nrimg = 11;
var nr = 1;
var mainUrl = "https://www.dutchflyva.nl/";
var fadeinTimeout = 1000;
var timeout = 8000;
$(document).ready(function() {
var top = nrimg * 156 + 3000;
$("#preload").css("top", "-"+top+"px");
for ( i = 1; i <= nrimg; i++ ) {
var url = mainUrl + "slide" + i + ".jpg";
var imghtml = "<img src='"+url+"' /><br />";
$("#preload").append(imghtml);
}
$("#headerbg2").fadeTo(0, 0);
SlideShow();
});
function SlideShow() {
var bgimg = $("#headerbg2").css("background-image");
if ( ++nr > nrimg )
{
nr = 1;
}
var url = "url("+mainUrl+"slide"+nr+".jpg)";
$("#headerbg2").css("background-image", url);
$("#headerbg2").fadeTo(fadeinTimeout, 1, function() {
$("#headerbg1").css("background-image", $("#headerbg2").css("background-image"));
$("#headerbg2").css("background-image", "");
$("#headerbg2").fadeTo(0, 0);
});
setTimeout( SlideShow , timeout);
}
</script>
Toevoeging op 15/09/2019 09:48:03:
- Ariën - op 14/09/2019 16:57:28:
Gelukkig hebben we ook code-tags. Zie ook de edit-text in je vorige bericht.
Die tekst heb gewoon in het bericht geplakt en nu lukt dat niet meer. Hoe kan ik nu tekst in mijn bericht plakken met regelnummers? (code-tags)
Martin Roelofs op 14/09/2019 23:12:22:
Die tekst heb gewoon in het bericht geplakt en nu lukt dat niet meer. Hoe kan ik nu tekst in mijn bericht plakken met regelnummers? (code-tags)
Je vindt dat bij de veel gestelde vragen --> bbcodes
Gewijzigd op 15/09/2019 12:36:38 door Frank Nietbelangrijk
Ik kopieer de tekst en plak het hier.
Sommige regels hebben wel regelnummers maar de meeste niet.
Geen idee waarom dat bij de eerste keer wel zo was. Ook dat is gewoon gekopieerd en geplakt.
Gewijzigd op 15/09/2019 16:00:35 door Martin Roelofs
Code (php)
1
if (++nr > nring )
In plaats van
Code (php)
1
if (++nr > nrimg )
Blijkbaar is bij het knippen en plakken een letter verschoven.
Ik plak de tekst hier in maar krijg er geen regelnummers bij.
Zo is het voor jullie ook moeilijk om het goed te krijgen.
Ik wil graag de hele code even aan jullie tonen
En in de code staat het goed, dus wel met nrimg i.p.v. nring.
Dan nog worden de foto's niet in volgorde weergegeven.
Gewijzigd op 15/09/2019 23:30:02 door - Ariën -