Javascript voor wisselende afbeeldingen 2

myna · 16 aug 2010

De vraag is ontstaan uit een eerder verzoek die terug te vinden is op:

http://www.helpmij.nl/forum/showthread.php/266537-Javascript-voor-wisselende-afbeeldingen

Dit is ook bijna wat ik zoek, maar dus nog net niet helemaal.

Ik heb zo'n 50 foto's om te laten zien, maar als iemand bijv. na foto 20 de pagina ververst of naar een andere pagina gaat (en weer terug komt) dan begint de 'slideshow' weer vooraan.
Foto 1 wordt dus vaker getoond dan foto 50.
Is het mogelijk om 'random' te beginnen aan de slideshow?
Dus de ene keer of foto 10, de ander keer bij foto 45.

Egel · 18 aug 2010

[js]var currentAd1 = 1;
// vervangen door
var currentAd1 = Math.floor(Math.random() * imgs1.length);[/js]

Math.floor() rond naar beneden af
Math.random() geeft een willekeurig getal van 0 tot 1 (dus t/m 0.999...)
imgs1.length is de lengte van de gebruikte array

Zo begint het elke keer bij een willekeurige foto.

myna · 18 aug 2010

Geweldig Egel.

Enorm bedankt voor je reactie!!

MaxiBlue · 22 aug 2010

Een misschien nog beter oplossing is om je array met foto's te shuffelen. Zo heb je niet alleen elke keer een andere beginfoto, maar ook een andere fotovolgorde.

myna · 22 aug 2010

Maxiblue: Zou je me de javascript code kunnen geven hoe ik de arry met foto's kan laten shuffelen, want dat lijkt me toch ook wel erg mooi!

jmeulink · 22 aug 2010

ik gebruik hier altijd PHP voor
met de rand() functie

bijvoorbeeld
[JS]<?php
$foto = rand(1,10);
if($foto == 1){
echo '<img src="PLAATJEHIER" border=0>'; //bij PLAATJEHIER moet je de naam van de 1ste plaatje border=0 betekend border uit
}
elseif($foto == 2){
echo '<img src="PLAATJEHIER" border=0>'; //bij PLAATJEHIER moet je de naam van de 2de plaatje border=0 betekend border uit
}
elseif($foto == 3){
echo '<img src="PLAATJEHIER" border=0>'; //bij PLAATJEHIER moet je de naam van de 3de plaatje border=0 betekend border uit
}
?>
[/JS]
enz

om het wat makkelijker te maken heb ik een voorbeeldje gemaakt met 3 plaatjes
zie bijlage

MaxiBlue · 23 aug 2010

Je moet het niet met php doen, maar gewoon met javascript. Bovenaan je javascript file geef je de Array class een nieuwe functie: shuffle.

PHP:

Array.prototype.shuffle = function()
 {
		var s = [];
		while (this.length) s.push(this.splice(Math.random() * this.length, 1));
		while (s.length) this.push(s.pop());
		return this;
}

Dan roep je simpelweg de functie shuffle() aan op je array, dus:

PHP:

var array = new Array("1.jpg", "2.jpg","3.jpg"); 
array.shuffle();

That's it!

Succes

!

jmeulink · 23 aug 2010

klopt, maar ben niet echt goed in javascript xD nooit echt voor gezeten

ik doe alles met PHP xD

myna · 8 sep 2010

Sorry, even op vakantie geweest, nu pas kunnen testen, maar ik kom er niet goed uit wat Maxi blue bedoeld.
In ieder geval niet goed waar precies ik het moet toevoegen.
Hieronder zie je wat ik momenteel heb, en zou graag willen weten waar ik dus de (laatste) reactie van Maxiblue moet aanpassen. Wie kan me helpen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

var prefix1 = "http://users.skynet.be/vedekaatjes/afbeeldingen/";
var imgs1 = new Array("http://www.rksvboerdonk.nl/e107_images/banners/asb.jpg","http://www.rksvboerdonk.n/e107_images/banners/kim.jpg","http://www.rksvboerdonk.nl/e107_images/banners/relou.jpg","http://www.rksvboerdonk.nl/e107_images/banners/Sbnet.jpg","http://www.rksvboerdonk.nl/e107_images/banners/vloerenmakers.jpg");
var alt1 = new Array("asb security","Plaza de Kim","Relou","Sbnetworking","De Vloerenmakers");

var currentAd1 = Math.floor(Math.random() * imgs1.length);
function cycle1() {
if (currentAd1 >= imgs1.length) currentAd1 = 0;
var banner1 = document.getElementById('adBanner1');
//var link1 = document.getElementById('adLink1');
banner1.src = prefix1 + imgs1[currentAd1];
banner1.title = alt1[currentAd1];
currentAd1++;
};
window.setInterval("cycle1()",4000)
</script>
</head>

<body>
<img id="adBanner1" src="http://www.rksvboerdonk.nl/asb.jpg" width="383" height="131" border="0" align="absmiddle" title="ASB">
</body>
</html>

MaxiBlue · 8 sep 2010

Het komt er zo uit te zien:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

Array.prototype.shuffle = function()
 {
        var s = [];
        while (this.length) s.push(this.splice(Math.random() * this.length, 1));
        while (s.length) this.push(s.pop());
        return this;
}

var prefix1 = "http://users.skynet.be/vedekaatjes/afbeeldingen/";
var imgs1 = new Array("http://www.rksvboerdonk.nl/e107_images/banners/asb.jpg","http://www.rksvboerdonk.n/e107_images/banners/kim.jpg","http://www.rksvboerdonk.nl/e107_images/banners/relou.jpg","http://www.rksvboerdonk.nl/e107_images/banners/Sbnet.jpg","http://www.rksvboerdonk.nl/e107_images/banners/vloerenmakers.jpg");
imgs1.shuffle();
var alt1 = new Array("asb security","Plaza de Kim","Relou","Sbnetworking","De Vloerenmakers");

var currentAd1 = Math.floor(Math.random() * imgs1.length);
function cycle1() {
if (currentAd1 >= imgs1.length) currentAd1 = 0;
var banner1 = document.getElementById('adBanner1');
//var link1 = document.getElementById('adLink1');
banner1.src = prefix1 + imgs1[currentAd1];
banner1.title = alt1[currentAd1];
currentAd1++;
};
window.setInterval("cycle1()",4000)
</script>
</head>

<body>
<img id="adBanner1" src="http://www.rksvboerdonk.nl/asb.jpg" width="383" height="131" border="0" align="absmiddle" title="ASB">
</body>
</html>

Succes

ErikBooy007 · 8 sep 2010

jmeulink zei:
ik gebruik hier altijd PHP voor
met de rand() functie

bijvoorbeeld
[JS]<?php
$foto = rand(1,10);
if($foto == 1){
echo '<img src="PLAATJEHIER" border=0>'; //bij PLAATJEHIER moet je de naam van de 1ste plaatje border=0 betekend border uit
}
elseif($foto == 2){
echo '<img src="PLAATJEHIER" border=0>'; //bij PLAATJEHIER moet je de naam van de 2de plaatje border=0 betekend border uit
}
elseif($foto == 3){
echo '<img src="PLAATJEHIER" border=0>'; //bij PLAATJEHIER moet je de naam van de 3de plaatje border=0 betekend border uit
}
?>
[/JS]
enz

om het wat makkelijker te maken heb ik een voorbeeldje gemaakt met 3 plaatjes
zie bijlage

jmeulink zei:
klopt, maar ben niet echt goed in javascript xD nooit echt voor gezeten

ik doe alles met PHP xD

Als je al je code schrijft zoals het voorbeeld hierboven... dan wil ik niet weten hoe je applicatiecode eruit ziet... Nooit gehoord van een switch / of een array?

myna · 8 sep 2010

Bedankt Maxiblue! Ik heb het nu inderdaad draaiende en bij elke keer verversen van de pagina heeft de 'diavoorstelling' een andere volgorde
De volgorde wordt overigens niet gewijzigd, zolang de pagina niet opnieuw ververst wordt. Maar dat is geen probleem!
Echter als ik nu de pagina open/ververs begint de afbeelding steeds met een lege foto.
Als je wilt weten wat ik bedoel kijk op www.rksvboerdonk.nl (log in met gebruikersnaam: myna en wachtwoord: myna+)
In het midden van de pagina bovenaan staan de wisselende afbeeldingen.

Mijn vraag is dus waar zit dit kleine probleempje in??
Voor deze (e107) website heb ik het script in een menu gegoten die er zo uit ziet:

<script type="text/javascript">
Array.prototype.shuffle = function()
{
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1));
while (s.length) this.push(s.pop());
return this;
}

var imgs1 = new Array("http://www.rksvboerdonk.nl/e107_images/banners/asb.jpg","http://www.rksvboerdonk.nl/e107_images/banners/relou.jpg","http://www.rksvboerdonk.nl/e107_images/banners/Sbnet.jpg","http://www.rksvboerdonk.nl/e107_images/banners/vloerenmakers.jpg");
imgs1.shuffle();
var lnks1 = new Array("","","","");
var alt1 = new Array("asb security","Relou","Sbnetworking","De Vloerenmakers");
var currentAd1 = Math.floor(Math.random() * imgs1.length);
var imgCt1 = 4;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",3000);
</script>
<a href=""http://www.asb.nl"" id="adLink1" target="_blank">
<img src="http://www.rksvboerdonk.nl/asb.jpg" id="adBanner1" border="0" width="383" height="131"></a>

That Guy · 9 sep 2010

Dat komt omdat je eerst 3 seconde wacht volgens je code! :

[JS]window.setInterval("cycle1()",3000);[/JS]

Als je deze regel nou vervangt met dit:
[JS]window.setInterval(cycle1, 3000);
cycle1();[/JS]dan werkt ie wel meteen. :thumb:

ps. het is niet super-practisch om je username/wachtwoord zomaar publiek te stellen op een forum, iedereen kan deze nu misbruiken!

[edit]Het kan overgens ook zo, en dan heb je die array-shuffle niet nodig:
[js]function doTheShuffle()
{
var banners = [
['asb.jpg', 'asb security', 'http://asb.nl'],
['relou.jpg', 'Relou', 'http://relou.nl']
];
// voeg meer banners toe door meer regels te maken; vergeet niet de komma na elk item (behalve bij de laatste)

var bannerHandle = document.getElementById('adBanner1');
var linkHandle = document.getElementById('adLink1');

var rnd = Math.floor(Math.random() * banners.length);

bannerHandle.src = banners[rnd][0];
bannerHandle.alt = banners[rnd][1];
linkHandle.href = banners[rnd][2];

setTimeout(doTheShuffle, 3000); // zet een self-timer
}

if(window.addEventHandler)
{
window.addEventHandler('load', doTheShuffle, false);
}else{
window.attachEvent('onload', doTheShuffle);
}[/js][/edit]

myna · 9 sep 2010

Hoi That Guy,

Ik heb de aanpassing aangemaakt, maar het blijft toch hetzelfde.

Overigens heb ik ook als hoofdbeheerder van de website toegang, en kan desgewenst op elk moment de gebruikersnaam en wachtwoord aanpassen e/o verwijderen. Het e-mail adres e.d. wat er staat klopt verder ook niet.
Maar wel bedankt voor je opmerking!

Je andere antwoord heb ik nog niet zo snel kunnen testen, maar ga dat wel z.s.m. doen!

Frats · 9 sep 2010

Mocht je er wat aan hebben, ik heb ooit deze gemaakt:

http://www.ruigekonijnen.nl/temp/slideshow.zip

Die werkt met een klein stukje AJAX en onthoudt waar je was in de slideshow, dus als je op foto 10 was en je gaat naar een andere pagina, gaat ie gewoon met foto 10 daar verder

Op die manier lijkt de slideshow gewoon door te gaan terwijl je de website bekijkt.

myna · 14 sep 2010

Wat Frats voorstelt is te lastig voor me.
Ik ben (nog) niet zo goed thuis in het javascript e.d.
Het 2e gedeelte wat That Guy voorstelt, geldt waarschijnlijk hetzelfde voor omdat ik dat ook niet goed werkend krijg.
Maar het neemt niet weg dat ik met de aanpassing van That Guy (1e gedeelte van zijn reactie) nog steeds hetzelfde probleempje blijf houden.
Mijn code is nog steeds hetzelfde als ik op 08 september schreef, of evt. dus aangepast naar het 1e gedeelte dat That Guy voorstelt.
Kan iemand me helpen met dit kleine foutje ergens in mijn script?

Javascript voor wisselende afbeeldingen 2

myna

Gebruiker

Egel

Terugkerende gebruiker

myna

Gebruiker

MaxiBlue

Gebruiker

myna

Gebruiker

jmeulink

Gebruiker

Bijlagen

MaxiBlue

Gebruiker

jmeulink

Gebruiker

myna

Gebruiker

MaxiBlue

Gebruiker

ErikBooy007

Terugkerende gebruiker

myna

Gebruiker

That Guy

Meubilair

myna

Gebruiker

Frats

Terugkerende gebruiker

myna

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy