CODEWITHSUNDEEP
jqueryhtmlcss
zazvorniki
zazvorniki

Reputation: 3602

jQuery Grabbing the height of image to check if certain height

I'm working on a css hover images for my site. So that when people upload their images and look at the thumbnails they can roll over them and see the full image. My issue comes when positioning the hovered images. Sense some of them are vertical and some are horizontal they need to be positioned differently so they don't overlap the thumbnail.

To try and solve this problem I though it would be the easiest to grab the height in jQuery and then if it is vertical according to the height then move it up with the .css() function. However it seems I am having issues retrieving the height of them images. I know I could assign the attribute of height to each of the images, but I kind of wanted to avoid that due to the height changing if it is vertical or horizontal.

I built a small example in a jsFiddle to try and make it easier to problem solve. http://jsfiddle.net/nYC6C/2/

my html looks like of like this, except in a loop to loop through all the images.

<ul class="imgLinks intImg enlarge">
  <loop code here>
  <li class="widImg">
    <p class="imgContain">
       <span class="fImg">
        <a  target="_blank"  title="cat" href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg" target="_blank"/>
       </a>
         <form>
          <input type="submit" class="notification badgeInput badge badge-important" name="" value="X"  />
         </form>
       </span>

       <p class="imgTitle">Title</p>
       <p class="imgTitle imageNum" style="padding-top: 0; line-height: 10px;"></p>
     </p>
    <img class="largeImg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg" />

  </li>
  <end loop code>
 </ul>

and the jQuery I have been playing with.

$('.largeImg').each(function(i) {
    var num = i + 1;
  console.log('image'+ num + ' '+ $(this).height());
});

Any help would be wonderful!

Upvotes: 0

Views: 64

Answers (4)

Nico O
Nico O

Reputation: 14102

You resize your large image and try to measure it afterwards You should remove the max-width; of the measured items.

ul.enlarge .largeImg
{
   max-height: 15em;
   max-width: 15em;
}

Upvotes: 0

Patrick
Patrick

Reputation: 327

Try to align it from the bottom of your thumbnail, if its wlways the same height you can just set the hover-large-image a bottom distance instead of top.

it'll be something like this. 

    ul.enlarge li:hover .largeImg{ 
bottom: 190px;
left: 0;}

FIDDLE

Upvotes: 1

Samsquanch
Samsquanch

Reputation: 9146

I took the approach of finding the image height/width when you hover over .widImg, then see if it's longer than it is wide. If it is, you can apply the css/class you need it, and if not, you can leave it alone or change what you need to change:

$('.widImg').hover(function() {
    var $image = $(this).find('.largeImg');
    var height = $image.height();
    console.log(height);
    if(height > $image.width()) {
        //do something for vertical images
        console.log('vertical');
    } else {
        console.log('horizontal');
    }
});

Updated fiddle.

Upvotes: 0

Cam
Cam

Reputation: 1902

You could try this.

$('.largeImg').each(function(i) {
    var imgSize = $(this).height();
    if(imgSize > xpixelsize){ //xpixelsize is basically what pixel you want 400px lets say
     //do this
   }else {
     //do this
   }
});

Hopefully this sets you on a helpful path!

Upvotes: 0

Related Questions