jQuery抓取圖像的高度來檢查是否有一定的高度

我正在爲我的網站的CSS懸停圖像。因此，當人們上傳他們的圖片並查看縮略圖時，他們可以翻轉他們並查看完整圖片。我的問題是定位懸停的圖像。他們有些是垂直的，有些是水平的，他們需要有不同的位置，所以他們不會重疊縮略圖。jQuery抓取圖像的高度來檢查是否有一定的高度

要嘗試和解決這個問題，我雖然它會是最容易抓住jQuery的高度，然後如果它是根據高度垂直，然後將其移動到.css()函數。但是，它似乎有問題檢索他們的圖像的高度。我知道我可以將高度屬性分配給每個圖像，但我有點想避免由於如果垂直或水平的高度改變。

我在jsFiddle中構建了一個小例子，試圖讓問題更容易解決。 http://jsfiddle.net/nYC6C/2/

我的html看起來像這樣，除了在一個循環遍歷所有的圖像。

<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>

和我一直在玩的jQuery。

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

任何幫助將是美好的！

來源

2014-01-29 zazvorniki

嘗試從對齊縮略圖的底部，如果它的高度相同，則可以將懸停大圖像設置爲底部距離而不是頂部。

它會是這樣的。

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

FIDDLE

來源

2014-01-29 17:47:23 Patrick

謝謝你，我正在讓事情變得複雜。 – zazvorniki

你可以試試這個。

$('.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 
    } 
});

希望這會爲您設置有用的路徑！

來源

2014-01-29 17:43:26 Cam

當您將鼠標懸停在.widImg上時，我採用了找到圖像高度/寬度的方法，然後查看它是否比寬度更長。如果是，你可以將你需要它的CSS /班，如果沒有，你可以把它單獨或更改你需要改變什麼：

$('.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.

來源

2014-01-29 17:43:39 Samsquanch

你調整你的大圖像，並嘗試事後衡量您應該刪除的最大寬度;的測量項目。

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

來源

2014-01-29 17:48:27

爲什麼這會有好處？如果沒有這個，原始圖像將會變得越來越大。你必須記住，人們正在上傳這些，所以我無法控制寬度和高度。 – zazvorniki

我以爲你想得到真正的圖像大小。但是我看到你已經解決的問題。 –

我真的很想看看能否獲得令人尊敬的圖像大小，以便我可以判斷它是垂直還是水平，但是我正在讓事情變得複雜。 – zazvorniki

jQuery抓取圖像的高度來檢查是否有一定的高度

回答

相關問題