0
因爲我知道之前我已經做過了，所以我在我的頭上撞牆。但是這個代碼不起作用。現在，我知道很多事情都是一團糟，因爲我試圖快速把它們放在一起（讓它工作，把它做好，讓它快速等等），但是這又是如何導致我如此痛苦和痛苦？在我將頁面加載到頁面之前，如何使用jQuery計算圖片的寬度和高度？
我有以下的基本HTML：
<div class="js-gallery force js-on">
<h5>More Images »</h5>
<a href="http://url/to/image1.jpg"><img src="http://url/to/image_thumb1.jpg" alt=""></a>
<a href="http://url/to/image2.jpg"><img src="http://url/to/image_thumb2.jpg" alt=""></a>
<a href="http://url/to/image3.jpg"><img src="http://url/to/image_thumb3.jpg" alt=""></a>
etc...
</div>
而下面的JS攔截鏈接點擊，創建一個對象，通過微型畫廊（下一個，上，活動等），以保持狀態，並計算屏幕寬度/高度，以便圖像適合。應該這麼簡單：
// Set up intialized variables
var overlay = $("<div class='gallery-overlay' id='gallery-overlay'></div>").hide().appendTo("body"),
state = {},
galleryNext = $("<a class='gallery-next' href='#'>Next</a>"),
galleryPrev = $("<a class='gallery-prev' href='#'>Previous</a>"),
gallery = $(".js-gallery");
gallery.addClass("js-on");
gallery.find("a").click(function (e) {
e.preventDefault();
state.gallery = $(this).parent(".js-gallery");
thisHref = this.href;
overlay.fadeIn(200, function() {
buildGalleryOverlay(thisHref);
});
return false;
});
$("#gallery-overlay").live("click", function (e) {
overlay.fadeOut();
overlay.find("#image-box").remove();
});
$("#image-box a").live("click", function (e) {
var imageBox = $("#image-box");
imageBox.fadeOut().remove();
buildGalleryOverlay(this.href);
return false;
});
function buildGalleryOverlay(clickedHref) {
var ww = $(window).width(),
wh = $(window).height(),
imageBox = $("<div class='image-box' id='image-box'></div>").appendTo(overlay).show(),
image = $("<img src='" + clickedHref + "' />"),
iw, oldW,
ih, oldH,
overWidth, overHeight,
allImages;
window.console.log(imageBox);
if (!state.total) {
state.total = 0;
state.images = [];
allImages = $(state.gallery).find("a");
$.each(allImages, function (index, value) {
state.total += 1;
state.images.push(value.href);
});
}
state.active = state.images.indexOf(clickedHref);
state.next = state.images[state.active + 1];
state.prev = state.images[state.active - 1];
image.appendTo(imageBox);
window.console.log(image);
iw = $(image).width();
ih = $(image).height();
// continued...
就在這裏，問題的發生，因爲每隔一段時間的圖像鏈接的點擊會爲寬度和高度返回0和0。不知道爲什麼。當發生這種情況時，腳本不工作（如果CSS設置爲width: 0，height: 0圖像獲取隱藏 - 或者，如果我把它們關掉，然後這些照片在屏幕過大）：
window.console.log(iw);
window.console.log(ih);
overWidth = iw - ww;
overHeight = ih - wh;
if (overWidth > 0 || overHeight > 0) {
if (overWidth > overHeight) {
// Landscape
oldW = iw;
iw = ww - 80;
ih = (iw * ih)/oldW;
}
else {
// Portrait
oldH = ih;
ih = wh - 160;
iw = (ih * iw)/oldH;
}
}
galleryPrev = galleryPrev || $("<a href='##' class='gallery-prev'>Previous</a>");
galleryNext = galleryNext || $("<a href='##' class='gallery-next'>Next</a>");
galleryPrev.attr("href", (state.prev || state.images[state.images.length - 1])).appendTo(imageBox);
galleryNext.attr("href", (state.next || state.images[0])).appendTo(imageBox);
// Here I've turned off the CSS adjustments because iw and ih were getting 0s
if (iw && iw > 0 && ih && ih > 0) {
image.css({width: iw + "px", height: ih + "px"});
imageBox.css({width: iw + "px", height: ih + "px"});
}
}
});
問題標題可能是一個有點誤導 - 我正在加載頁面上的圖像，並試圖立即計算高度/寬度。我會理解，如果它從來沒有奏效，但它在80％的時間內工作，所以其他20％真的讓我感到困惑！ – rhodesjason 2012-03-02 19:45:07
而你正在使用燈箱，我想。如果你願意，你最好把答案放在答案中。 – 2012-03-02 19:45:47
在另一個jQuery對象中包裝jQuery對象有什麼意義？ 'image = $（...）'...'$（image）.width（）;' – 2012-03-02 19:46:35