在JS中獲取多個圖像的寬度

Question

我正在使用帶有5個幻燈片的JS滑塊，每個幻燈片都帶有一個圖像和一個標題。我只想在寬度> 2xheight的圖像中添加一個類。以下是我的JS代碼：

$(".slides img").each(function() { 

    var w = $("img.gallery").width(); 
    var h = $("img.gallery").height() * 2; 

    if (w > h) { 
     $(this).addClass("auto"); 
    };      
}); 

請幫我解決這個問題。在此先感謝， Chirag。

下面是我的HTML代碼：

<div class="flex-container"> 
       <div class="flexslider"> 
        <ul class="slides"> 
         <li> 
          <span data-picture data-alt="WK Credentials"> 
           <span data-src="images/large/slide1.jpg" data-media="(min-width: 1601px)"></span> 

          </span> 
          <img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" /> 
          <p class="flex-caption">Captions and cupcakes. Winning combination.</p> 
         </li> 
         <li> 
          <center> 
           <div class="intro"> 
            <h1 class="head">Incredible India | Tiffin</h1> 
            <p class="text">Use what you know about your users to determine whether the words 
            and phrases you plan to use are appropriate.</p> 
           </div> 
          </center> 
         </li> 
         <li> 
          <span data-picture data-alt="WK Credentials"> 
           <span data-src="images/large/slide2.jpg" data-media="(min-width: 1601px)"></span> 

          </span> 
          <img src="images/slide2.jpg" id="myImg" alt="" title="" class="gallery" /> 
          <p class="flex-caption">This image is wrapped in a link!</p> 
         </li> 
         <li> 
          <span data-picture data-alt="WK Credentials"> 
           <span data-src="images/large/slide3.jpg" data-media="(min-width: 1601px)"></span> 

          </span> 
          <img src="images/slide3.jpg" id="myImg" alt="" title="" class="gallery" /> 
          <p class="flex-caption">Captions and cupcakes. Winning combination.</p> 
         </li> 
         <li> 
          <span data-picture data-alt="WK Credentials"> 
           <span data-src="images/large/slide4.jpg" data-media="(min-width: 1601px)"></span> 

          </span> 
          <img src="images/slide4.jpg" id="myImg" alt="" title="" class="gallery" /> 
          <p class="flex-caption">Captions and cupcakes. Winning combination.</p> 
         </li> 
         <li> 
          <span data-picture data-alt="WK Credentials"> 
           <span data-src="images/slide5.jpg" data-media="(min-width: 1601px)"></span> 
          </span> 
          <img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" /> 
          <p class="flex-caption">Extra Wide Image</p> 
         </li> 
        </ul> 
       </div> 

       <ul class="flex-direction-nav"> 
        <li><a class="prev" href="#"><img src="images/themes.png" alt="" title="" /></a></li> 
        <li><a class="next" href="#"><img src="images/themes.png" alt="" title="" /></a></li> 
       </ul> 

      </div> 

Answer 1

試試這個：

$(document).ready(function(){ 
    $(".slides img").each(function(){ 
    $(this).load(function(){ 
     var w = $(this).width(); 
     var h = $(this).height() *2; 

     if(w > h){ 
      $(this).addClass("auto"); 
     }; 
    }); 
    }); 
}); 

Answer 2

如果類「畫廊」其實是顯著這裏這可能幫助，否則其他的答案會工作。

$(window).load(function(){ 
    $(".slides img.gallery").each(function(){ 
     if($(this).width() > ($(this).height()*2)) { 
      $(this).addClass("auto"); 
     }; 
    }); 
});