[jQuery]Internet Explorer laat carousel niet repeaten

[BryanD]

Goedemiddag tweakers.
Ik heb een klein probleempje m.b.t een eigen gebouwde carousel.

Ik heb een eigen carousel gebouwd.
het principe is heel simpel:

- Laad het alle eerste plaatje in (via IMG tag) zodra de webpagina word gerenderd.
- Vervolgens een x aantal tellen wachten voordat het img tag word uitgefade.(animation)
- Daarna een nieuwe image inladen vanuit een array.
- Vervolgens de img tag weer infaden.

Dat doet hij voor alle foto's in een array. Daarna zegt mijn script dat er weer bij foto 0 beginnen moet worden.

Dit is het stukje wat kijkt welke foto we krijgen:

code:

$("#rotateImage").animate({opacity: 0},defaults.fadeTimer, function(){
    
        var currentImage    = $("#rotateImage").attr("src");
        var arrayId             =  jQuery.inArray(currentImage, defaults.rotateImages);
        var arrayLength     = defaults.rotateImages.length-1;
        
        // Check what image to load
        if(arrayId == arrayLength){
        
            // Start over at 0
            $("#rotateImage").attr("src",defaults.rotateImages[0]);

        }else{
        
            // add one up
            var i = arrayId +1;

            $("#rotateImage").attr("src",defaults.rotateImages[i]);
            
        }

    });

Dit is de code die de image uit-fade en vervolgens kijkt welk image geladen moet worden.

Indien men zich dat afvraagt:
defaults. is een stukje wat er boven staat
het is ene plugin die met options werkt en die word gemerged met defaults.
dan krijg je dus defaults.optie

Indien er toch nog wat onduidelijk is hoor ik dit graag.
M.v.g,
Bryan

P.S.
het gaat er dus om dat IE keurig netjes de array afwerkt. maar dan niet weer opnieuw begint.
..nu ik er zo over na denk zou hij wel opnieuw kunnen beginnen maar dan laat hij de foto niet weer infaden. (Dit gebeurt nog iet wat...ouderwets (in de img tag een onload met een animatie)).
Indien dit zo is hoor ik ook graag hoe ik dit zou kunnen oplossen.
B.v.d

[R4gnax]

Als de code sample representatief is voor het geheel, dan is het beste advies wat ik je kan geven alles weg te gooien en niet meer opnieuw te beginnen totdat je wat meer kaas gegeten hebt van het software engineering vak in het algemeen en javascript (en DOM) in het bijzonder.

Te zien aan het simpele "add one up" commentaar en de over-simplistische, inefficiente aanpak van het probleem ben je een complete novice. Ga dan niet zoiets moeilijks als een image carousel zelf maken, want dat is nou juist één v/d moeilijkere dingen om echt goed te doen zonder ergens in een valkuil te stappen.

Begin simpel. En probeer zoiets als dit pas veel later, want op het moment zal het zich alleen ontaarden in een gedrocht wat met de beste wil van de wereld niet meer maintainable te maken zal zijn. Beter om op het moment een voorgemaakt script te pakken. Die zijn er (voor jQuery) genoeg.

[ Voor 9% gewijzigd door R4gnax op 23-11-2010 00:37 ]

[Rekcor]

JavaScript:

var arrayId                =  jQuery.inArray(currentImage, defaults.rotateImages);
        var arrayLength        = defaults.rotateImages.length-1;
        
        // Check what image to load
        if(arrayId == arrayLength){

Dit stukje begrijp ik niet: waarom zou arrayId ooit gelijk worden aan arrayLength? Of is in je array rotateImages de waarde van de key gelijk aan de value?

Wat krijg je te zien als je dit doet?

JavaScript:

var arrayId                =  jQuery.inArray(currentImage, defaults.rotateImages);
        var arrayLength        = defaults.rotateImages.length-1;
        
alert('ArrayId = '+arrayId+' / arrayLength = '+arrayLength );

        // Check what image to load
        if(arrayId == arrayLength){

[BryanD]

arrayLength is het totaal aantal foto's in de array ( in dit geval 6)
arrayId is welke ID de huidige foto binnen de array heeft (met ID bedoel ik key)

Verder @r4gnax.

Ik bouw er zelf 1 omdat ik geen goeie plugin kan vinden die goed doet wat hij moet doen. Het gaat namelijk om foto's die met aspect ratio op 100% gescaled worden. en ik ben nog geen enkele plugin tegen gekomen die dit kan. En ik ben niet helemaal een nooby meer .

@Rekcor dit krijg ik terug als ik je alert er in zet:

zodra foto 1 uitfade -> id: 1 / length 6
zodra foto 2 geladen is -> id: 2 / length 6

etc. etc.


EDIT: Slotje,
Is al klaar, bleek dat in mijn array ik een extra komma had staan....ik ben er 2 dagen mee bezig geweest

[ Voor 9% gewijzigd door BryanD op 23-11-2010 13:00 ]

[R4gnax]

BryanD schreef op dinsdag 23 november 2010 @ 09:56:
Ik bouw er zelf 1 omdat ik geen goeie plugin kan vinden die goed doet wat hij moet doen. Het gaat namelijk om foto's die met aspect ratio op 100% gescaled worden.

Fixed width op je image tag opgeven en height op auto zetten (of omgekeerd). Maar eigenlijk kun je plaatjes beter serverside al passend maken, want clientside rescalen ziet er niet overal goed uit. Verder zijn er zover ik weet genoeg rotators die met standaard image tags werken waarop je de width & height in kunt stellen (ook die overweg kunnen met een 'auto' waarde).

BryanD schreef op dinsdag 23 november 2010 @ 09:56:
En ik ben niet helemaal een nooby meer .

<<snip>>

Is al klaar, bleek dat in mijn array ik een extra komma had staan....ik ben er 2 dagen mee bezig geweest

Dat probleem is toch vrij triviaal om te achterhalen. Wanneer je in de IE development tools kijkt, zie je meteen een kenmerkende syntax error die op dit probleem duidt. Vandaar af duurt het even een paar minuten om te vinden waar die komma zit. (Mits je code een beetje goed gestructureerd en leesbaar is, uiteraard.) Kennelijk ben je dus nog nooby genoeg om daar niet vanaf te weten, heb je geen goede ontwikkel methode met betrekking tot testen/debuggen, of heb je code gemaakt die zo slecht in elkaar steekt dat het je simpelweg echt 2 dagen zou kosten om te vinden waar het fout gaat, zelfs met de implementatie nog vers in het geheugen. (Kun je nagaan als je dit over een maand of 2 had moeten uitzoeken.)

Je vindt het misschien niet zo leuk om te horen, maar het is de kille waarheid. Accepteer dit soort kritiek dan ook en doe er wat mee, zou ik zeggen. Ik zei niet voor niets dat je het beste eerst wat meer achtergrondkennis op kon doen, want er zijn wel degelijk zaken echt mis in enkel het stukje broncode wat je hier hebt laten zien.

Wees nou eens eerlijk: wat heb ik er nou aan te winnen om iemand's code zomaar af te branden? Bragging rights? Alsjeblieft zeg...

[RobIII]

BryanD schreef op dinsdag 23 november 2010 @ 09:56:
EDIT: Slotje,
Is al klaar, bleek dat in mijn array ik een extra komma had staan....ik ben er 2 dagen mee bezig geweest

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.

R4gnax schreef op woensdag 24 november 2010 @ 01:17:
Wees nou eens eerlijk: wat heb ik er nou aan te winnen om iemand's code zomaar af te branden? Bragging rights? Alsjeblieft zeg...

Wees eens eerlijk: Je hebt (opbouwende) kritiek en je hebt minder handig geformuleerde kritiek en jouw eerste post neigt naar het tweede type

[ Voor 31% gewijzigd door RobIII op 24-11-2010 01:47 ]