4 Replies Latest reply on Sep 14, 2013 5:30 AM by Zaxist

    how to get the width and height of a loaded image ?

    AMULI Level 4

      Hi everybody,

       

      Clicking on any of the 26 letters of the alphabet, I display the 15 logos starting with the first brand whose initial is the clicked letter.

       

      Logos have different dimensions, but I fail recovering them, so that they are displayed stretched or squeezed, retaining the width and height of the first 15 logos put on stage in the Edge source.

       

      Both of the two console.log in the following code produce w= 0 h = 0 :

      - just after assigning the src attribute ;

      - in the callback function of the load.

       

      $('.letter').on('click', function()

      {

        // swap the 15 logo images

        for( var i = 0; i < 15; ++i)

        {

          var theLogo = sym.$( "logo" +(i +1));

          var iBrand = // compute the good index

          var radical = brands[ iBrand].logo;

          var filePath = 'images/' +radical +'.gif';

          var imLogo = new Image();

          imLogo.src = filePath;

          console.log( i +' ' +radical +' BEFORE w = ' +imLogo.width +'   h = ' +imLogo.height);

          theLogo

            .attr('src', filePath)

            .hide()

            .load(function()

            {

              console.log( i +' ' +radical +' AFTER w = ' +imLogo.width +'   h = ' +imLogo.height);

              $(this)

                .attr('width', imLogo.width)

                .attr('height', imLogo.height)

                .fadeIn();

            });

        }

      });

       

      Any idea ? Thanks

       

      Gil

        • 1. Re: how to get the width and height of a loaded image ?
          resdesign Adobe Community Professional & MVP

          Have you tried:

           

           

          var rect = sym.$('Rectangle');

          alert(rect.height());

           

          same with width()

           

          with width() and height() you get an integer.

          • 2. Re: how to get the width and height of a loaded image ?
            Zaxist Level 4

            Dear Gil

             

            you are doing it in wrong way, you dont need all of this mess !!

             

            See my Sample : http://www.mediafire.com/download/ptp9xn3rus2y6em/Dynamic_Slide_Show_JSON.rar

             

             

             

            Zaxist

            1 person found this helpful
            • 3. Re: how to get the width and height of a loaded image ?
              AMULI Level 4

              Much better demesstified Thanks, Zaxist.

               

              brands = {};

              byLetter = {'A':0,'B':0,'C':0,'D':0,'E':0,'F':0,'G':0,'H':0,'I':0,'J':0,'K':0,'L':0,'M':0,

                          'N':0,'O':0,'P':0,'Q':0,'R':0,'S':0,'T':0,'U':0,'V':0,'W':0,'X':0,'Y':0,'Z':0};

              //------------------------------------------------------

              $.getJSON( 'brands.json', function(data)

              {

                // the JSON file contains objects sorted by alphabetical order of their brand property

                brands = data;

                // initialize the array of entries by letter

                var key = 'z';

                $.each( data, function( index, entry)

                {

                  var initial = entry.brand.charAt(0);

                  if (initial != key && initial !='É')

                  {

                    byLetter[ initial] = index;

                    key = initial;

                  }

                });

                // fill empty entries

                for (var keyLetter in byLetter)

                {

                  if (byLetter[ keyLetter] == 0 && keyLetter != 'A')

                  {

                    if (keyLetter == 'Z')

                    {

                      byLetter[ 'Z'] = byLetter[ 'Y'];

                    } else {

                      // next entry value

                      byLetter[ keyLetter] = byLetter[ String.fromCharCode( keyLetter.charCodeAt() +1)];

                    }

                  }

                }

                swapLogos( 0);

              });

              //------------------------------------------------------

              function swapLogos( iFirst)

              {

              console.log( iFirst);

                for( var i = 0; i < 15; ++i)

                {

                  var theLogo = sym.getSymbol( "cell_" +(i +1)).$('square');

                  var iBrand =  iFirst +i;

                  if (iBrand < brands.length)

                  {

                    theLogo

                      .css(

                      {

                        "background-image":"url(images/" +brands[ iBrand].logo +".gif)",

                        "background-size":"auto",

                        "background-repeat":"no-repeat",

                        "background-position":"center"

                      })

                      .show();

                  } else {

                    theLogo.hide();   

                  }

                }

              }

              //------------------------------------------------------

              $('.lettre').on('click', function()

              {

                var letter = $( this).attr( 'ID').charAt( 6);  // Stage_A

                swapLogos( byLetter[ letter]);

                // update highlighted letter (color)

                $('.lettre').css( 'color', '#EEE');

                $(this).css( 'color', '#FF3');

              });

              //------------------------------------------------------

               

              Dowloadable here : https://app.box.com/s/c1hlvbfrum4yzypc1mid

               

              Gil

               

              Capture d’écran 2013-09-13 à 00.39.42.png

              • 4. Re: how to get the width and height of a loaded image ?
                Zaxist Level 4

                Great job Dear Gil

                 

                Now it looks Professional

                 

                Zaxist