hulp nodig bij achtergrond cycler

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Danny Kersseboom

Danny Kersseboom

26/04/2015 15:15:08
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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 (js)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    })


Code (css)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


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

PHP hulp

28/03/2024 15:41:48
 
Thomas van den Heuvel

Thomas van den Heuvel

26/04/2015 16:57:00
Quote Anchor link
<script scr="js/jquery-1.11.2.js" type="text/javascript"></script>

?

Maar zo simpel zal het niet zijn?
Gewijzigd op 26/04/2015 16:58:22 door Thomas van den Heuvel
 
Danny Kersseboom

Danny Kersseboom

26/04/2015 21:21:06
Quote Anchor link
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?


Waarom zou het niet zo simpel zijn?? Ik heb al meerdere scripts op deze manier geschreven voor mn website!
 
- Ariën  -
Beheerder

- Ariën -

26/04/2015 21:23:21
Quote Anchor link
'scr' is in iedergeval niet juist.
 
Eddy E

Eddy E

26/04/2015 21:42:30
Quote Anchor link
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

Danny Kersseboom

26/04/2015 22:15:40
Quote Anchor link
Ok ik had dus een typ fout gemaakt. Het script werkt nu gedeeltelijk, maar zonder afbeeldingen weer te geven.
 
Thomas van den Heuvel

Thomas van den Heuvel

27/04/2015 11:58:05
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
// declaratie
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
 
Danny Kersseboom

Danny Kersseboom

02/05/2015 09:53:55
Quote Anchor link
Mijn codes werken prima, als ik 'LIVE CODE'gebruik in dreamweaver. Ik krijg alleen nog steeds geen afbeeldingen zichtbaar.
 
Thomas van den Heuvel

Thomas van den Heuvel

02/05/2015 13:58:27
Quote Anchor link
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

Danny Kersseboom

02/05/2015 14:05:37
Quote Anchor link
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!
Gewijzigd op 02/05/2015 14:07:30 door Danny Kersseboom
 
Thomas van den Heuvel

Thomas van den Heuvel

02/05/2015 15:11:04
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<script type="text/javascript" src="js/bgcycler.js"></script>

Pas je HTML aan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

Pas je functie aan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    });
}


GL HF.
 
Danny Kersseboom

Danny Kersseboom

04/05/2015 21:33:50
Quote Anchor link
Ik heb nu alles werkend, alleen heb ik de afbeeldingen nog onder elkaar staan. En die moeten nu nog achter elkaar.

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

Eddy E

05/05/2015 07:56:42
Quote Anchor link
Ziet er prima uit. Ook de verhoudingen en volledig vullen ziet er prima uit.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.