[jQuery] vreemd selector (?) probleem

[Verwijderd]

Hallo allemaal,

ik heb een merkwaardig jQuery (is een javascript library ) probleem.

ik ben bezig met een soort gallery script dat fototjes op een pagina neerzet en wat thumbnails eronder.
Wanneer een thumbnailtje wordt geklikt, verdwijnt de 'grote foto' en wordt de thumbnail zichtbaar.

Er kan echter een oneindig aantal fotos worden weergegeven, en daarom kunnen niet alle thumbnailtjes onder de grote foto komen. Ik probeer daarom een carrousel te maken, te bedienen met een knopje.
Als er op het knopje wordt geklikt, 'schuift dan de volgende foto binnen.'

Op zich werkt het doorschuiven prima, de 'nieuwe' foto komt er keurig bij. Enige is: ik kan er niet op klikken... Nou ja, wel op klikken, maar de functie wordt niet uitgevoerd. En dat terwijl hij toch de juiste class en alles heeft.
Het lijkt erop dat de functie $("#thumbnails > li > .thumbnail").click() niet wordt getriggerd als ik een nieuw element aan de DOM toevoeg. Ik zit er al een paar uur op te puzzelen

(OA append("<li><img class="thumbnail nummer"+aandebeurt+" /> ed al geprobeert - zelfde resultaat: geen )

Iemand enig idee waar mijn denkfoutje zit?

pseudo html

HTML:

<div id="PictureBox">
<img zichtbaar>
<img onzichtbaar>
<img onzichtbaar>
<img onzichtbaar>

<ul id="thumbnails">
<li>controle knop</li>
<li>thumb1 (aan de beurt om uit te faden)</li>
<li>thumb2</li>
<li>thumb3</li>
</ul>

Je kunt deze pagina hier bekijken. (Als de foto niet past moet je ff refreshen, daar wordt nog aan gewerkt )

De functies die de hele zooi aansturen:

JavaScript:

//als er een thumbnail wordt geklikt, moet ie zichtbaar worden in de Box
    $("#thumbnails > li > .thumbnail").click(function(){
        alert("klik");  
    
        //dit is de link
        var source = $(this).attr("src");
        
        //dit is de oude link
        var link = $("#PictureBox > a > img:first").attr("src");

        var pictWidth = $(this).width();
        var pictHeight = $(this).height();
        
        var boxWidth = $("#PictureBox").width();
        var boxHeight = $("#PictureBox").height();
        
        //de hele zut bepalen
        if(pictHeight > pictWidth)  
        {
            var WeNeed = boxHeight - 34;
        }
        
        $("#PictureBox > a > img:first").slideUp(600);
        
        //de animatie even de tijd geven
        setTimeout(function(){
            if(pictHeight > pictWidth)  
            {
                $("#PictureBox > a > img:first").removeAttr("width");
                $("#PictureBox > a > img:first").attr("height",WeNeed);
                
            }
                
            $("#PictureBox > a > img:first").attr("src",source);
            $("#PictureBox > a > img:first").slideDown(600);
        }, 600);
    });
    
    
    //knopje links voor het doorschuiven
    $("#PictureBox .left").click(function(){
        //de thumbnails doorschuiven 
        
        
        var aantalPictures = $("#PictureBox > a > img").length;
        
        $("#thumbnails > li > img:first").fadeOut(600);
        
        //animatie even de tijd geven
        setTimeout(function(){
        
            //de li helemaal uit de DOM halen
            $($("#thumbnails > li:nth-child(2)")).remove();
            
            //nu de nieuwe li maken met de source die 'aan de beurt' is :)
            var nextSlide = parseInt( $("#thumbnails > li > img:first").attr("class").replace("thumbnail nummer_","") );
            //alert(nextSlide);
            
            if( (nextSlide+2) >= aantalPictures) 
            {   
                //welke thumb moet erbij?
                //alert(nextSlide);
                
                if( (nextSlide+2) == aantalPictures) var aandebeurt=0; //harde reset 
                if( (nextSlide+1) == aantalPictures) var aandebeurt=1; //harde reset 
                
            
            
            }
            else var aandebeurt =  nextSlide + 2;
            
            //alert(aandebeurt);
            var source = $("#PictureBox > a > img.nummer_"+aandebeurt).attr("src");
            //alert(source);
            //var li = "\t\t<li><img class=\"thumbnail nummer_"+aandebeurt+"\" src=\""+source+"\" alt=\"afbeelding\" /></li>\n";        
            //alert(li);
            //de nieuwe li er in zetten $(li).insertAfter( $("#thumbnails > li:nth-child(3)") );
            
            //grootte van het plaatje aanpassen
            var pictWidth = $("#PictureBox > a > img.nummer_"+aandebeurt).width();
            var pictHeight = $("#PictureBox > a > img.nummer_"+aandebeurt).height();
            
            if(pictWidth >= pictHeight)
            {
                var afmeting ="width";
                var waarde = 35;
            }
            else
            {
                var afmeting ="height";
                var waarde = 24;
            }
            
            //alert(pictWidth+" & "+pictHeight+" -> "+afmeting+"="+waarde);
            
            obj = $("#thumbnails").createAppend
            (
                'img',
                {
                    'src': source,
                    'alt': 'afbeelding'
                }
            );
            
            //de nieuwe thumb infaden                       $("#thumbnails > li > img.nummer_"+aandebeurt).fadeIn(600);
            
            obj.attr("class","thumbnail nummer_"+aandebeurt).attr(afmeting,waarde);
            //alert(obj.attr(afmeting));
            
            obj = $(obj).wrap('<li></li>');
            obj.fadeIn(600);            
        
        },600);
        
    
    });

[Bosmonster]

Het is een beetje veel code om doorheen te worstelen, maar als je denkt dat je selector met terugwerkende kracht werkt nadat je elementen hebt toegevoegd, dan heb je het mis.

Je zult de events aan je nieuw toegevoegde elementen toe moeten voegen of met event-delegation gaan werken (in jQuery gaat dat middels de live() method).

Je hoeft overigens de niet zichtbare li's natuurlijk ook niet uit de DOM te verwijderen. Je kunt ze ook gewoon onzichtbaar laten (dat is dus optie nr 3)

[ Voor 18% gewijzigd door Bosmonster op 05-06-2009 13:08 ]

[Verwijderd]

Ik heb even geluncht en een paar keer met mijn hoofd op het bureau geslagen. Vervolgens heb ik dit probleem opgelost.

Het is een beetje veel code om doorheen te worstelen, maar als je denkt dat je selector met terugwerkende kracht werkt nadat je elementen hebt toegevoegd, dan heb je het mis.

Inderdaad

Een callback op obj.fadeIn(600); volstaat:

JavaScript:

obj.fadeIn(600, function() {
                //wat moet ie doen als ie wordt geklikt?
                $(this).click(function(){

                    //dit is de link
                    var source = $(this).attr("src");
                    
                    //dit is de oude link
                    var link = $("#PictureBox > a > img:first").attr("src");
            
                    var pictWidth = $(this).width();
                    var pictHeight = $(this).height();
                    
                    var boxWidth = $("#PictureBox").width();
                    var boxHeight = $("#PictureBox").height();
                    
                    //de hele zut bepalen
                    if(pictHeight > pictWidth)  
                    {
                        var WeNeed = boxHeight - 34;
                    }
                    
                    $("#PictureBox > a > img:first").slideUp(600);
                    
                    //de animatie even de tijd geven
                    setTimeout(function(){
                        if(pictHeight > pictWidth)  
                        {
                            $("#PictureBox > a > img:first").removeAttr("width");
                            $("#PictureBox > a > img:first").attr("height",WeNeed);
                            
                        }
                            
                        $("#PictureBox > a > img:first").attr("src",source);
                        $("#PictureBox > a > img:first").slideDown(600);
                    }, 600);
                
                });

Hij werkt nu netjes.
(De li laten staan is geen optie, want als ik de image class opnieuw laat infaden (bij vaker dan 1 keer rond dus), bestaat ie twee keer en faden er twee plaatjes in. Hij moet dus wel weg.

Bedankt voor je hulp Bosmonster!

Topic kan dicht.

[Peetman]

Verwijderd schreef op vrijdag 05 juni 2009 @ 13:15:
(De li laten staan is geen optie, want als ik de image class opnieuw laat infaden (bij vaker dan 1 keer rond dus), bestaat ie twee keer en faden er twee plaatjes in. Hij moet dus wel weg.

Bedankt voor je hulp Bosmonster!

Topic kan dicht.

Je kan natuurlijk kijken of je item al ingeladen is. Dan hoef je ze niet weg te halen, maar alleen weer naar het eind verplaatsen. Dat zou nog wel eens wat performancewinst op kunnen leveren.

[Borizz]

Wellicht dat je ook iets hebt aan de live functie van jquery. Daarmee kunnen vooraf gedefinieerde events aan elementen gekoppeld worden die later via de DOM worden toegevoegd.
Edit: Ik zie dat het al eerder gezegd is door Bosmonster daar had ik dus overheen gelezen .

[ Voor 17% gewijzigd door Borizz op 07-06-2009 21:53 ]