0

so i'm trying to do a image gallery with a li container and an image inside, setting this image width, or height according to the original image size on it, this is how far i got.

<ul>
<li><a><img class='imgGal' src='oneHorizontalImg.jpg'></a></li>
<li><a><img class='imgGal' src='oneVerticalImg.jpg'></a></li>
<li><a><img class='imgGal' src='anotherHorizontalImg.jpg'></a></li>
</ul>

and the javascript part

if ( $('.imgGal').height() > $('.imgGal').width() ) {   
$('.imgGal').css('width','100%'); }
else {
$('.imgGal').css('height','100%');
};

but for some reason even with me setting this code on the bottom of the page when i do a alert($('.imgGal').height()); or alert($('.imgGal').width()) i get the return value of 0, so no matter what the conditional is, the else is always applyed.

also, one other thing i'm not sure how it will turn out is how could i do to apply different results according to each img.

anyway, thanks in advance for all the help.

4

4 回答 4

3

您可以将 javascript 添加到图像的加载事件中，以确保它们首先存在。

$('.imgGal').on('load', function(){
     if ( $(this).height() > $(this).width() ) {   
          $(this).css('width','100%'); }
     else {
          $(this).css('height','100%');
     };
});
于 2013-06-05T18:51:47.640 回答
0

尝试这个：

function resize(img){
    if($(img).height() > $(img).width()){
        $(img).css('width', '100%');
    } else {
        $(img).css('height', '100%');
    }
}

$.each('img', function(){
    if($(this).prop('complete'){
        resize(this)
    } else {
        $(this).on('load', function(){
            resize(this);
        }
    }
});
于 2013-06-05T19:03:36.570 回答
0

如果您准备以“水平”或“垂直”开始图像，则可以使用以下 css

img.imgGal[src^="vertical"] {
    width: 100%;
}

img.imgGal[src^="horizontal"] {
    height: 100%;
}
于 2013-06-05T19:07:23.853 回答
0

正如其他人所说，您需要等待图像被加载，然后才能使用 JQuery 对它们进行任何操作，否则它根本找不到它们。

将您的代码放在一个就绪块中：

$.(function() {

    if ( $('.imgGal').height() > $('.imgGal').width() ) {   
    $('.imgGal').css('width','100%'); }

    else {
    $('.imgGal').css('height','100%');
    };

});

这应该使代码仅在页面完全加载后运行。

另外，我不确定结果会如何的另一件事是，我该如何根据每个 img 应用不同的结果。

你有几个选择在这里做什么：

  • 给每个图像一个单独的类或一个 ID，并使用它来应用不同的结果。

例子：

<ul>
    <li><a><img id="img1" class="imgGal" src="oneHorizontalImg.jpg"></a></li>
    <li><a><img id="img2" class="imgGal" src="oneVerticalImg.jpg"></a></li>
    <li><a><img id="img3" class="imgGal" src="anotherHorizontalImg.jpg"></a></li>
</ul>
<script> 
    $("#img1").height(yourSpecialHeightValue);
</script>
  • 按索引引用它们。

例子：

var images = $("ul li");
images[0].height(100); //This will change the first image's height to 100
images[1].height(200); //The second to 200

请注意，如果您有多个 ul 元素，则必须给这个 ul 一个类或 id 并像这样引用它$("ul.myUlClass li")：

  • 通过图片源地址引用（不推荐）

我不打算在这里给你一个例子，因为当有更简单的方法时，我认为通过长字符串比较来做这件事不是一个好主意。

最后一点：HTML 通常使用双引号。您可能想要更改您的代码——我不确定有多少浏览器足够聪明，可以确定您可能打算在有单引号时使用双引号。

于 2013-06-05T19:08:34.983 回答