Slideshow

Door Martin Roelofs op 13-09-2019 19:52 gewijzigd op 13-09-2019 20:15

2.244 views

Hallo allemaal,
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:


$(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>

Thomas van den Heuvel

13-09-2019 20:05

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.

Frank Nietbelangrijk

13-09-2019 20:54 gewijzigd op 13-09-2019 20:57

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.

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.

M Martin Roelofs

14-09-2019 13:14

Allereerst natuurlijk hartelijk dank voor jullie reactie!
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.

A Adoptive Solution

14-09-2019 13:50

Vervang regels 18-22 door :

if ( ++nr > nrimg )
{
	nr = 1;
}

M Martin Roelofs

14-09-2019 16:19 gewijzigd op 15-09-2019 13:09

bedankt, maar werkt nog steeds niet. (nog steeds in willekeurige volgorde en veel dezelfde foto's achter elkaar.) 1,11,8,2,5,9,11,2,11

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



<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>

[size=xsmall]Toevoeging op 14/09/2019 16:22:49:[/size]

Weet niet hoe het komt, maar wordt nu wel beetje raar weergegeven.
Hopelijk kan je er wat mee. ander stuur ik het even opnieuw.

[size=xsmall]Toevoeging op 14/09/2019 16:47:10:[/size]

slideshow staat op www.dutchflyva.nl onderaan de homepage

- Ariën -

14-09-2019 16:57

Gelukkig hebben we ook code-tags. Zie ook de edit-text in je vorige bericht.

A Adoptive Solution

14-09-2019 18:02

Ik heb dit ervan gemaakt :

<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>

M Martin Roelofs

14-09-2019 23:12

Bedankt, ik ga het morgen even proberen en laat het nog even weten of het gelukt is.

[size=xsmall]Toevoeging op 15/09/2019 09:48:03:[/size]

- 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)

s sylvester vader

15-09-2019 11:16

ik vroeg mij af he, staan deze fotos alleen in een map of staan ze ook bv in een database?

Frank Nietbelangrijk

15-09-2019 12:34 gewijzigd op 15-09-2019 12:36

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

Reageren

Inloggen om te reageren