hulp nodig bij achtergrond cycler
Nu wil ik de achtergrond met 5 afbeeldingen laten in/out faden als een soort cycler.
Ik heb een css, een html en een javascript geschreven maar krijg het hele spul niet aan de praat. Dus enige hulp geboden.
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
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
<!doctype html>
<html>
<head>
<title>Background Cycler</title>
<script scr="js/jquery-1.11.2.js" type="text/javascript"></script>
<script scr="js/bgcycler.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bgcycler.css">
</head>
<body>
<div id="bgcycler" >
<script type="text/javascript">
$('#bgcycler').hide();//hide the background while the images load, ready to fade in later
</script>
<img class="active" src="/images/bgimages/b1.jpg" alt=""/>
<img src="/images/bgimages/b2.jpg" alt="" />
<img src="/images/bgimages/b3.jpg" alt="" />
<img src="/images/bgimages/b4.jpg" alt="" />
<img src="/images/bgimages/b5.jpg" alt="" />
</div>
</body>
</html>
<html>
<head>
<title>Background Cycler</title>
<script scr="js/jquery-1.11.2.js" type="text/javascript"></script>
<script scr="js/bgcycler.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bgcycler.css">
</head>
<body>
<div id="bgcycler" >
<script type="text/javascript">
$('#bgcycler').hide();//hide the background while the images load, ready to fade in later
</script>
<img class="active" src="/images/bgimages/b1.jpg" alt=""/>
<img src="/images/bgimages/b2.jpg" alt="" />
<img src="/images/bgimages/b3.jpg" alt="" />
<img src="/images/bgimages/b4.jpg" alt="" />
<img src="/images/bgimages/b5.jpg" alt="" />
</div>
</body>
</html>
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function cycleImages(){
var $active = $('#bgcycler .active');
var $next = ($('#bgcycler .active').next().length > 0) ? $('#bgcycler .active').next() : $('#bgcycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(2000,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(window).load(function(){
$('#bgcycler').fadeIn(2000);//fade the background back in once all the images are loaded
// run every 10s
setInterval('cycleImages()', 10000);
})
var $active = $('#bgcycler .active');
var $next = ($('#bgcycler .active').next().length > 0) ? $('#bgcycler .active').next() : $('#bgcycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(2000,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(window).load(function(){
$('#bgcycler').fadeIn(2000);//fade the background back in once all the images are loaded
// run every 10s
setInterval('cycleImages()', 10000);
})
Code (css)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#bgcycler{
padding:0;
margin:0;
width:100%;
position:fixed;
top:0;
left:center;
z-index:-1;
}
#bgcycler img{
position:fixed;
left:center;
top:0;
width:100%;
z-index:1;
}
#bgcycler img.active{
z-index:3;
}
padding:0;
margin:0;
width:100%;
position:fixed;
top:0;
left:center;
z-index:-1;
}
#bgcycler img{
position:fixed;
left:center;
top:0;
width:100%;
z-index:1;
}
#bgcycler img.active{
z-index:3;
}
Dit is wat ik op het moment heb, ben al een week bezig met oplossingen zoeken.
Maar kan de fout niet vinden.
Code tussen [code]-tags geplaatst om de leesbaarheid te verbeteren. In de toekomst kun je deze tags gebruiken om code op dit forum te gebruiken. Alvast bedankt![/modedit]
Toevoeging op 26/04/2015 16:30:14:
ok bedankt!
Gewijzigd op 26/04/2015 21:19:37 door Danny Kersseboom
?
Maar zo simpel zal het niet zijn?
Gewijzigd op 26/04/2015 16:58:22 door Thomas van den Heuvel
Thomas van den Heuvel op 26/04/2015 16:57:00:
<script scr="js/jquery-1.11.2.js" type="text/javascript"></script>
?
Maar zo simpel zal het niet zijn?
?
Maar zo simpel zal het niet zijn?
Waarom zou het niet zo simpel zijn?? Ik heb al meerdere scripts op deze manier geschreven voor mn website!
SRC = SouRCe
SCR = SCReen
Maar SRC is goed, SCR niet... Dit geeft de HTML-validator toch ook wel aan?
De algemene opzet van een functie die zichzelf aanroept is als volgt:
- in de function zelf zet je een timeout met een aanroep naar zichzelf
- in de setTimeout functie gebruik je de anonieme functie waarbinnen je de functie zelf aanroept, dus niet in de vorm zoals je nu doet waarbij je je functie als een string voorstelt...
- daarna roep je de functie initieel aan
Zoiets dus:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// declaratie
function mijnFunctie() {
// do stuff
// ...
setTimeout(function() {
mijnFunctie();
}, 10000);
}
// ... en de initiele aanroep
mijnfunctie();
function mijnFunctie() {
// do stuff
// ...
setTimeout(function() {
mijnFunctie();
}, 10000);
}
// ... en de initiele aanroep
mijnfunctie();
Wat jij doet is de functie eenmalig aanroepen met vertraging...
Gewijzigd op 27/04/2015 11:58:58 door Thomas van den Heuvel
Ben je nog steeds op zoek naar een oplossing? Waar kunnen we eventuele code in actie zien?
Thomas van den Heuvel op 02/05/2015 13:58:27:
Uhm. Ik zie op je website dat je inmiddels een andere oplossing hebt gekozen? Wellicht wil je je vraag hier dan ook even afmelden zodat mensen niet voor niets in je probleem duiken.
Ben je nog steeds op zoek naar een oplossing? Waar kunnen we eventuele code in actie zien?
Ben je nog steeds op zoek naar een oplossing? Waar kunnen we eventuele code in actie zien?
Mijn vraag om hulp staat nog steeds en ik heb geen andere oplossing op mijn website, alleen een andere achtergrond!
Gewijzigd op 02/05/2015 14:07:30 door Danny Kersseboom
Fix de verwijzing naar het .js bestand:
Code (php)
1
<script type="text/javascript" src="js/bgcycler.js"></script>
Pas je HTML aan:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="bgcycler">
<img class="active" src="/images/bgimages/b1.jpg" alt="" />
<img src="/images/bgimages/b2.jpg" alt="" />
<img src="/images/bgimages/b3.jpg" alt="" />
<img src="/images/bgimages/b4.jpg" alt="" />
<img src="/images/bgimages/b5.jpg" alt="" />
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#bgcycler').hide();
});
$(window).load(function() {
$('#bgcycler').fadeIn(1000);
// initiele aanroep...
cycleImages();
});
//]]>
</script>
<img class="active" src="/images/bgimages/b1.jpg" alt="" />
<img src="/images/bgimages/b2.jpg" alt="" />
<img src="/images/bgimages/b3.jpg" alt="" />
<img src="/images/bgimages/b4.jpg" alt="" />
<img src="/images/bgimages/b5.jpg" alt="" />
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#bgcycler').hide();
});
$(window).load(function() {
$('#bgcycler').fadeIn(1000);
// initiele aanroep...
cycleImages();
});
//]]>
</script>
Pas je functie aan:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
function cycleImages(){
var $active = $('#bgcycler .active');
var $next = ($('#bgcycler .active').next().length > 0) ? $('#bgcycler .active').next() : $('#bgcycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(2000,function() {//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
// aanroep naar zichzelf...
setTimeout(function() {
cycleImages();
}, 2000);
});
}
var $active = $('#bgcycler .active');
var $next = ($('#bgcycler .active').next().length > 0) ? $('#bgcycler .active').next() : $('#bgcycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(2000,function() {//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
// aanroep naar zichzelf...
setTimeout(function() {
cycleImages();
}, 2000);
});
}
GL HF.
De fout zat hem in het javascript gedeelte, ik heb een css, html en javascript validator gebruikt. De css en de html hadden geen fouten, het javascript wel.
Toevoeging op 04/05/2015 23:32:31:
Het is helemaal goed nu, alles werkt.
Ik wil iedereen bedanken voor zijn hulp.
Kijk de background cycler in actie===>>> http://dch-wp.r4u.nl