Madankollu Aktar jQuery–Resize Image 1 Eżempju

I wiret parti minn bejjiegħ web qodma klijent u hija għandha problema daqs immaġini.  L-immaġini għandha tkun ta '60×50 iżda għal xi raġuni fard, il-bejjiegħ oriġinali sfurzat tagħhom fiċ 42×42, hekk huma jfittxu squashed:

 

Image Tajba

Bad Image

Hawn il-markup (kemmxejn simplifikata):

<tabella klassi = "estiż-prospetti">
  <thead>
    <tr>
      <th  wisa '= '100′>3 It-Tlieta</th>
    </tr>
  </thead>

  <tbody>
    <tr klassi = "previżjoni">
      <wisa td = '100′>
        <st>
          <Li klassi = "għolja">Għolja: 72&inti;F</LI>
          <Li klassi = "baxxa">Baxxa: 44&inti;F</LI>
          <Li klassi = "kundizzjoni">Sunny
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ wisa '= '42’ għoli = '42’ alt =” />
          </LI>
        </st>
      </td>
    </tr>

  </tbody>

</tabella>

Int ser ikollok tinnota li għalkemm il- passaġġ għall-immaġni innifsu turi d-dimensjoni xierqa (60×50) il-bejjiegħ oriġinali sfurzata fil 42×42.  Għaliex?  Crazy.

Xorta waħda, Jien ridt soluzzjoni malajr u faċli biex din il-kwistjoni u I daru lejn jQuery.  Il-trick kien li jillokalizza kollha tal-każ <img> tags.  I ma riedx li muck dwar ma 'xi tags img oħra (li minnhom hemm ħafna).  Din id-daqsxejn ta 'jQuery għamlet il-trick:

<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></iskrittura>

<script type="text/javascript">
     $(dokument).lest(funzjoni () {

         $(‘li.condition > img ").kull(funzjoni (indiċi, partita)
           
{
             $(partita).css("width", "60"); 
             $(partita).css("height", "50");
            });
     }); // fuq it-tagħbija dokument
</iskrittura>

Li ftit tal-kodiċi ssib il-ġbir <LI> tags li klassi hija "kundizzjoni" u <img> tfal.  Imbagħad ttenni kollha permezz ta 'dak.  Maħduma bħal CHARM.

I probabilment setgħu simplifikata, imma jien qatt ma kien it-tip ta 'Unix Guy li solvuti π li 18 numri preċiżjoni jużaw il zat u awk u jien ma dak it-tip jekk Guy jQuery jew Tbissem.

</aħħar>

Abbona għall-blog tiegħi.

Follow lili Twitter fi http://www.twitter.com/pagalvin

Ħalli Irrispondi

Your email address mhux se jkun ippubblikat. Meħtieġa oqsma huma mmarkati *