获取jQuery图像宽度并添加类

我无法获取通过PHP加载的一系列图像的尺寸。获取jQuery图像宽度并添加类

<? 
    $Ldir="imgs/liveGallery/"; // Directory where files are stored 

    if ($Lhandle = opendir($Ldir)) { 
     while (false !== ($Lfile = readdir($Lhandle))) { 
      if ($Lfile != "." && $Lfile != "..") $Lthefiles[] = $Lfile; 
     } 
     closedir($Lhandle); 
    } 

    sort($Lthefiles); 

    for ($Li=0;$Li<count($Lthefiles);$Li++) { ?> 
      <a href="<?php echo $Ldir.$Lthefiles[$Li]; ?>" class="ilightbox"> 
       <div class="adj"> 
        <img src="<?php echo $Ldir.$Lthefiles[$Li]; ?>" class="percent"> 
       </div> 
      </a> 
    <?php } 
?>

在上面的代码中，PHP正在执行加载所有附近目录中的图像的工作。 .adj类将<div>格式化为正方形，并将它们全部向左移动，以便平铺屏幕。它也隐藏了溢出，所以无论你看到的是什么尺寸都是方形的。

我试图读取正在加载到<div>中的图像的宽度和高度时出现问题。我希望将图像放在100％的宽度或高度上，具体取决于填充正方形的比例。这是我认为应该工作的jQuery代码。

$(window).load(function() { 
    $(".adj").each(function() { 
     var $this = $(this); 
     var imageWidth = $this.children("img").attr("width"); 
     var imageHeight = $this.children("img").attr("height"); 

     if (imageWidth < imageHeight){ 
      $this.addClass("aW"); 
     } else if (imageWidth > imageHeight) { 
      $this.addClass("aH"); 
     } 
    }); 
});

我似乎没有捕获图像的宽度或高度，根据我上面写的。

我正在使用fullpage.js和ilightbox.js这可能会弄乱我的代码，但我怀疑它。我也试着在PHP for循环（不包含jquery每个函数）中加入这段代码的修改版本，但这也不起作用。帮帮我！

Here's a link for you.

来源

2014-01-22 jonacrow

您已设置在CSS样式中的宽度和高度，而不是内联为attributes，所以属性width and height是空

$this.children("img").attr("width"); // .attr would not work

应该

$this.children("img").css("width"); // .css is the method

而且

$(window).load(function() { 

    $(".adj").each(function() { 
     var $this = $(this); 
     // when your referring same img multiple times, grab it in a variable 
     var image = $this.children("img"); 
     var imgWidth = image.width(); // or image.css("width") 
     var imageHeight = image.height(); // or image.css("height") 
     if (imageWidth < imageHeight){ 
      $this.addClass("aW"); 
     } else if (imageWidth > imageHeight) { 
      $this.addClass("aH"); 
     } 
    }); 
});

注.css()给出了px”。

示例100px即使您在pt or em etc中设置了值。看到你的代码，因为你比较值我建议.width() and .height()因为他们返回整数值后容易比较

jQuery文档

注意.width()总是返回的内容宽度，无论价值CSS box-sizing属性。从jQuery 1.8开始，这可能需要检索CSS宽度加上框大小属性，然后在元素具有box-sizing: border-box时减去每个元素上的任何潜在边框和填充。为了避免这种惩罚，使用.css("width")而不是.width()

来源

2014-01-22 18:00:07 niko

感谢niko！我还有一个问题。还有两个图像库最初是隐藏的。一旦我使用jquery .fadeIn（）;取消隐藏它们我不确定如何对这些画廊中的图像做同样的事情。该$（窗口）.load不会在这种情况下帮助，我试图创建功能似乎并没有等到图像加载。 – jonacrow

我会考虑使用fullpage.js而不是使用'$（窗口）.load'的'afterRender'回调。 – Alvaro

谢谢阿尔瓦罗。你是对的，但由于文件准备就绪，我隐藏了图像画廊，所以我还有其他一些问题。现在我正在写下它，这是有道理的，但是当时我没有意识到图像高度和宽度的计算将不起作用，除非画廊可见的时间足够长，以便加载所有图像。我给自己头痛。感谢你们的提示。 – jonacrow

你可以尝试somethig像

$(window).load(function() { 
    $(".adj").each(function() { 
     var $this = $(this); 
     var img = new Image(); 

     //Set Image source 
     img.src = $this.children("img").attr("src"); 

     //Wait for image to be loaded. 
     //Event will fire when image is loaded 
     img.onload = function() { 
      //Get Height and width 
      var imageWidth = img.width; 
      var imageHeight = img.height; 
      if (imageWidth < imageHeight) { 
       $this.addClass("aW"); 
      } else if (imageWidth > imageHeight) { 
       $this.addClass("aH"); 
      } 
     }; 
    }); 
});

注：我不知道，这是一个最好的做法

来源

2014-01-22 18:00:00 Satpal

我会添加一个关于加载事件的解释 - 因为一些浏览器，如webkit等到图像加载设置尺寸 – cyberwombat

获取jQuery图像宽度并添加类

回答

相关问题