我正在使用jquery来调整图像大小。它只是在一定时间内触发宽度和高度零值时工作正常。 这是我的代码。 你们有什么想法为什么将零返回到它的宽度和宽度高度。
这是我正在使用的jquery代码
//Image Popup viewer
function imgViewerLoad() {
$(".imageViewer").fadeIn("slow");
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var ivHeight = $(".imageViewer").height();
var ivWidth = $(".imageViewer").width();
$(".imageViewer").css({
"position": "absolute",
"width": ivWidth,
"min-width": ivWidth,
"height": ivHeight,
"left": (windowWidth/2-ivWidth/2)-53,
"top": windowHeight/2-ivHeight/2
});
//After Load the image
$(".imageViewer .loading-big").show();
$(".imgPreview").load(function() {
$(".loading-big").hide();
//Added resize function for large image
//Set max image size 90% of the window
var max_w1 = ($(window).width()*90)/100;
var max_h1 = ($(window).height()*90)/100;
var this_w1 = $(".imgPreview").width();
var this_h1 =$(".imgPreview").height();
if(this_w1==0){this_w1=500}//if width==0 then refer to window fit size
if(this_w1==0){this_w1=500}//if width==0 then refer to window fit size
//Set back to its original size if new size exceed its original size
if(max_w1 > this_w1) max_w1 = this_w1;
if(max_h1 > this_h1) max_h1 = this_h1;
if (this_w1/this_h1 < max_w1/max_h1) {
var h1 = max_h1;
var w1 = Math.ceil(max_h1/this_h1 * this_w1);
} else {
var w1 = max_w1;
var h1 = Math.ceil(max_w1/this_w1 * this_h1);
}
$(".imgPreview").css({ height: h1, width: w1 });
//End resizing
$(this).fadeIn('slow');
$(".nav .right").hide();//Hide Main Nav next prev
$(".nav .imgViewNav").show();//Show image viewer next prev
//Center image viewer
var ivHeight1 = $(".imgPreview").height();
var ivWidth1 = $(".imgPreview").width();
$(".imageViewer").css({
"position": "absolute",
"width": ivWidth1,
"min-width": ivWidth1,
"height": ivHeight1,
"left": (windowWidth/2-ivWidth1/2)-53,
"top": windowHeight/2-ivHeight1/2
});
});
$(".overLay").stop().fadeTo('slow',0.55).height(windowHeight);
}
//Load light box when clicked on thumbnail
$('.secondary .imgWrapper').on('click',function() {//Touchend is for touch screen like ipad
$(".imgPreview").remove();//Remove image viewer if exist
//$(".imageViewer").append('<img src="'+ colorPath+ 'large/' + num +'.jpg" id="'+ num + '"/>');
getImgPath = $(this).children('.iColor').attr('src');
imgId = $(this).children('.iColor').attr('id');
//$(".imageViewer").append('<img src="'+ colorPath+ num +'.jpg" id="'+ num + '"/>');
newUrl = getImgPath.substring(0, getImgPath.lastIndexOf("."));//Remove extension
finalUrl = newUrl.replace(/[0-9]+/g,'');//Remove number
$(".imageViewer").append('<img src="'+ finalUrl + 'large/' + imgId +'.jpg" id="'+ imgId +'" class="imgPreview" />');
//Load Image viewer function
imgViewerLoad();
});
$('.next').click(function() {
var getImgSrc = $(".imgPreview").attr('src');
var getImgId = $(".imgPreview").attr('id');
nextId = getImgId+++1;
remExt = getImgSrc.substring(0, getImgSrc.lastIndexOf("."));//Remove extension
remNum = remExt.replace(/[0-9]+/g,'');//Remove number
//Declear var for total images on each page
if($(".port").hasClass('Active')) {
lastImg = 61;
} else if($(".advs").hasClass('Active')) {
lastImg = 43;
}
if(getImgId < lastImg) {//Disable click if this is last image
$(".imgPreview").remove();//Remove image viewer if exist
$(".imageViewer").removeAttr('style');
$(".imageViewer").append('<img src="'+ remNum+nextId +'.jpg" id="'+ nextId +'" class="imgPreview" />');
//Load Image viewer function
imgViewerLoad();
}
})
$('.prev').click(function(e) {
var getImgSrc = $(".imgPreview").attr('src');
var getImgId = $(".imgPreview").attr('id');
nextId = getImgId-1;
remExt = getImgSrc.substring(0, getImgSrc.lastIndexOf("."));//Remove extension
remNum = remExt.replace(/[0-9]+/g,'');//Remove number
if(getImgId > 1) { //Disable click if this is first image
//$(".imgPreview").attr({'src': remNum+nextId+ '.jpg', 'id': nextId });
$(".imgPreview").remove();//Remove image viewer if exist
$(".imageViewer").attr('style','');
$(".imageViewer").append('<img src="'+ remNum+nextId +'.jpg" id="'+ nextId +'" class="imgPreview" />');
//Load Image viewer function
imgViewerLoad();
}
})
function hideImageViewer() {
$('div.nav').addClass('stayOn').removeClass('stayOff');//Add class to nav
$('.overLay').stop().fadeTo('slow',0).delay(1000).hide();
$("div.imageViewer").hide().attr('style','z-index: 299; display:none;');
$(".nav .right").show();
$(".nav .imgViewNav").hide();
}
//Close Image viewer
$('.overLay').click(function() {
hideImageViewer();
})
$('.close').click(function() {
hideImageViewer();
});
和HTML代码