基本上,我有一个名为'wrapper'
的父div,我正在添加其他div:divImg
,计数器和标题。然后我以'wrapper'
为中心。
将div添加到'包装器'工作正常。我坚持如何集中'wrapper'
。出于某种原因,我无法获得“包装”的宽度和高度。使用appendTo
后。它与高度总是一样的。
使用appendTo
后如何获得宽度和高度,请参阅下面的代码:
function appendImage() {
var wrapperWidth;
var wrapperHeight;
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var wrapper = $("#modal-wrapper");
var divImg = $("<div></div>")
.hide()
.attr("id", "container-img")
.appendTo(wrapper);
var counter = $("<p></p>")
.hide()
.addClass("slideshowCounter")
.text(text goes here...)
.appendTo(wrapper);
var caption = $("<p></p>")
.hide()
.addClass("imgCaption")
.text(caption goes here...)
.appendTo(wrapper);
// preload the image
var img = new Image();
img.src = src;
img.onload = function() {
// set the image width / height
$(this).width(this.width).height(this.height).appendTo(divImg);
wrapperWidth = wrapper.outerWidth();
// ERROR, always the same width
alert(wrapperWidth);
wrapperHeight = wrapper.outerHeight();
wrapper.css({
width: wrapperWidth,
height: wrapperHeight,
left: ((windowWidth - wrapperWidth) / 2 + $(window).scrollLeft()),
top: ((windowHeight - wrapperWidth) / 2 + $(window).scrollTop())
}).show( "slow", function() {
// fadein the image and other
divImg.fadeIn(800);
});
}
}