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.

mr.Morelo
  • 1
  • 4

4 Answers4

3

You can add the javascript to the load event of the images to ensure that they exist first.

$('.imgGal').on('load', function(){
     if ( $(this).height() > $(this).width() ) {   
          $(this).css('width','100%'); }
     else {
          $(this).css('height','100%');
     };
});
Smeegs
  • 9,151
  • 5
  • 42
  • 78
  • 3
    Be aware that [`load()`](http://api.jquery.com/load-event/) is deprecated, as of jQuery 1.8. – David Thomas Jun 05 '13 at 18:54
  • @Javalsu no as a simple answer – A. Wolff Jun 05 '13 at 18:57
  • I don't think so (but I've not checked); it's easy enough to find out from the docs, though. And, even if they were, `ready` and `load` aren't equivalent events, so I don't believe the outcome would be what you'd want, even if it *did* work with images. – David Thomas Jun 05 '13 at 18:58
  • yeah, for now this one seem to be working the best, but what could i use instead of load? – mr.Morelo Jun 05 '13 at 18:59
  • ya, on.('load',...) is not deprecated, this is the way to use onload event in jquery syntax – A. Wolff Jun 05 '13 at 19:04
  • @coma - Your solution and my solution has different results. I'm not sure what the poster is trying to achieve, I was just showing him why his code isn't working. You're working on the assumption that he wants the images to fit in the li. The code he has makes them completely fill the li. It's up to him to figure out to handle the overflow. With your example there is no overflow. – Smeegs Jun 05 '13 at 19:32
0

Try this:

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);
        }
    }
});
BenMorel
  • 34,448
  • 50
  • 182
  • 322
Joe
  • 6,401
  • 3
  • 28
  • 32
0

If you are prepared to start your images with either "horizontal" or "vertical" you can use the following css

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

img.imgGal[src^="horizontal"] {
    height: 100%;
}
Bruno
  • 5,772
  • 1
  • 26
  • 43
  • The aspect ratio is lost with this solution. It would just fill the container, and distort the image. There is probably a way to do it with css, but this isn't it. – Smeegs Jun 05 '13 at 19:13
0

As the others have said, you need to wait for the images to be loaded before you can do anything to them with JQuery, otherwise it simply won't find them.

Put your code in a ready block:

$.(function() {

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

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

});

This should make it so that the code only runs once the page is fully loaded.

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.

You have a few choices of what to do here:

  • Give each image a separate class, or an ID and use that to apply different results.

Example:

<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>
  • Refer to them by index.

Example:

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

Note that if you have multiple ul elements, you'll have to give this ul a class or id and reference it like this: $("ul.myUlClass li").

  • Refer to them by image source url (not recommended)

I'm not going to give you an example here, since I don't think it's a good idea to do it by long string comparisons when there are easier ways.

A last note: HTML typically uses double-quotes. You may want to change your code-- I'm not sure how many browsers are smart enough to figure out you probably meant to use double-quotes when there are single-quotes.

Eric Dand
  • 1,106
  • 13
  • 37