2 Replies Latest reply: Jun 17, 2013 4:09 AM by AMULI RSS

    image swapping with correct dimensions

    AMULI Community Member
    AMULI Jun 13, 2013 2:37 AM

      Hi all,

       

      Hovering over a row of thumbnails, I swap the full size photo following this code :

       

        var photo = new Image();

        photo.src = 'images/'+fileName; // parameter of the function

        console.log(fileName+' L= '+photo.width+' H= '+photo.height);

        sym.$('toile').attr({

            width: photo.width,

            height: photo.height,

            src: photo.src

        });

       

      The full size photo swaps, but retaining the dimensions of the first one (initially on the Edge stage).

       

      Even more puzzling, as you can see in the following screen capture, sometimes I can get the correct photo.width and photo.height (even if it isn't correctly assigned to the 'toile' element), and sometimes those values are zero ! And I feel so lost that this seems random. Surely it is not and someone has an idea. Thank you.

       

      Gil

       

      PS : An idea just springing while writing. May be it has to do with loading delay, asking the width and height information before it is available ? Should I necessarily preload the images ?

       

      FireBug.gif

        • 1. Re: image swapping with correct dimensions
          AMULI Community Member
          AMULI Jun 15, 2013 10:17 AM (in response to AMULI)

          So, preloading is part of the solution.

           

          An associative array is used to store the twelve full size photos susceptible to be displayed when their thumbnail is hovered over :

           

          var twelvePhotos = new Object();

           

          Inside the loop that fills the row of thumbnails, each corresponding picture is also preloaded and pushed into the associative array :

           

          var photo = new Image();

          photo.src = 'images/'+series+index+'.jpg';

          twelvePhotos[index] = photo;

           

          Now the width and height are available and always traced by console.log() :

           

          var photo = twelvePhotos[index];

          console.log(fileName+' L= '+photo.width+' H= '+photo.height);

           

          The image swap, but width and height still remain the same. I tried in vain :

           

          sym.$('toile').attr({

                'width': photo.width,

                'height': photo.height,

                'src': photo.src

           

          sym.$('toile').attr('width', photo.width);

          sym.$('toile').attr('height', photo.height);

          sym.$('toile').attr('src', photo.src);

           

          sym.$('toile').attr('width', parseInt(photo.width));

          sym.$('toile').attr('height', parseInt(photo.height));

          sym.$('toile').attr('src', photo.src);

           

          Clearly, I miss the good syntax. Anyone sees my mistake ?

           

          Gil

          • 2. Re: image swapping with correct dimensions
            AMULI Community Member
            AMULI Jun 17, 2013 4:09 AM (in response to AMULI)

            The correct syntax is

             

            sym.$('toile').width(photo.width);

            sym.$('toile').height(photo.height);

             

            Gil