PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

hulp nodig bij achtergrond cycler

Door Danny Kersseboom op 26-04-2015 15:15 gewijzigd op 26-04-2015 21:19
1.785 views
Ik ben al enige tijd bezig om een website voor onze gaming clan te bouwen.
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.


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


[code lang=js]
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);
})[/code]

[code lang=css]
#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;
}[/code]

Dit is wat ik op het moment heb, ben al een week bezig met oplossingen zoeken.
Maar kan de fout niet vinden.



[size=xsmall]Toevoeging op 26/04/2015 16:30:14:[/size]

ok bedankt!
Thomas van den Heuvel
26-04-2015 16:57 gewijzigd op 26-04-2015 16:58
<script [color=#ff0000]scr[/color]="js/jquery-1.11.2.js" type="text/javascript"></script>

?

Maar zo simpel zal het niet zijn?
Danny Kersseboom
26-04-2015 21:21
Thomas van den Heuvel op 26/04/2015 16:57:00

<script [color=#ff0000]scr[/color]="js/jquery-1.11.2.js" type="text/javascript"></script>

?

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!
- Ariën -
26-04-2015 21:23
'scr' is in iedergeval niet juist.
Eddy E
26-04-2015 21:42
Ik gooi ze ook vaak door elkaar.

SRC = SouRCe
SCR = SCReen

Maar SRC is goed, SCR niet... Dit geeft de HTML-validator toch ook wel aan?
Danny Kersseboom
26-04-2015 22:15
Ok ik had dus een typ fout gemaakt. Het script werkt nu gedeeltelijk, maar zonder afbeeldingen weer te geven.
Thomas van den Heuvel
27-04-2015 11:58 gewijzigd op 27-04-2015 11:58
In je huidige opzet wordt cycleImages() eenmalig aangeroepen na ~ 10 seconden, maar daarna niet meer...

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:
// declaratie
function mijnFunctie() {
    // do stuff
    // ...
    setTimeout(function() {
        mijnFunctie();
    }, 10000);
}

// ... en de initiele aanroep
mijnfunctie();


Wat jij doet is de functie eenmalig aanroepen met vertraging...
Danny Kersseboom
02-05-2015 09:53
Mijn codes werken prima, als ik 'LIVE CODE'gebruik in dreamweaver. Ik krijg alleen nog steeds geen afbeeldingen zichtbaar.
Thomas van den Heuvel
02-05-2015 13:58
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?
Danny Kersseboom
02-05-2015 14:05 gewijzigd op 02-05-2015 14:07
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?


Mijn vraag om hulp staat nog steeds en ik heb geen andere oplossing op mijn website, alleen een andere achtergrond!
Thomas van den Heuvel
02-05-2015 15:11
Als je mijn twee aanpassingen had gevolgd dan was je al een heel eind in de goede richting geweest.

Fix de verwijzing naar het .js bestand:
<script type="text/javascript" src="js/bgcycler.js"></script>

Pas je HTML aan:
<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>

Pas je functie aan:
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);
    });
}


GL HF.

Reageren

Inloggen om te reageren