[求助]让Lightbox秀出的图片可以等比缩放

[iou33449999]

以下是Lightbox文件中的lightbox.js包含的一段代码，感觉只要修改这一段就可以达到目的，请问可以帮忙实现吗？

改的原因是：可能某些图片很大，甚至超过了1024*768屏幕边界，这是Lightbox出来的效果就很差了，因此…………嘿嘿！谢谢大家啦^_^


[Copy to clipboard]CODE:
resizeImageContainer: function( imgWidth, imgHeight) {

// get current height and width
this.wCur = Element.getWidth('outerImageContainer');
this.hCur = Element.getHeight('outerImageContainer');

// scalars based on change from old to new
this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;

// calculate size difference between new and old image, and resize if necessary
wDiff = (this.wCur - borderSize * 2) - imgWidth;
hDiff = (this.hCur - borderSize * 2) - imgHeight;

if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }

// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
if((hDiff == 0) && (wDiff == 0)){
if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}
}

Element.setHeight('prevLink', imgHeight);
Element.setHeight('nextLink', imgHeight);
Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));

this.showImage();
},

[myvicy]

imgWidth, imgHeight改变这两个参数就 可以。

[iou33449999]

但是如何等比缩放呢？

[iou33449999]

顶一下，谢谢大家看看吧……555

[iou33449999]

再顶一次……帮帮忙呀！

[iou33449999]

以下是我改的结果，Lightbox依然可以秀出图片，但是未实现等比缩放（我定义的缩放标准是500*379，当然也应该可以自定义），高手再看看我的思路是不是准确好吗？

注：除了我标注出的部分，原函数的其他部分均未改变。

谢谢大家……请了！


// resizeImageContainer()
//
resizeImageContainer: function( imgWidth, imgHeight) {

// get current height and width
this.wCur = Element.getWidth('outerImageContainer');
this.hCur = Element.getHeight('outerImageContainer');

//以下是我加的部分
var flag=false;
var mywidth = 500; //定义允许图片宽度，当宽度大于这个值时等比例缩小
var myheight = 379; //定义允许图片高度，当宽度大于这个值时等比例缩小
//image.src=this.src;
if(this.wCur>0 && this.hCur>0){
flag=true;
if(this.wCur/this.hCur>= mywidth/myheight){
if(this.wCur>mywidth){
this.wCur=mywidth;
this.hCur=(this.hCur*mywidth)/this.wCur;
}else{
this.wCu=this.wCur;
this.hCur=this.hCur;
}
// this.alt=this.wCu+"×"+this.hCur;
}
else{
if(this.hCur>myheight){
this.hCur=myheight;
this.wCur=(this.wCur*myheight)/this.hCur;
}else{
this.wCur=this.wCur;
this.hCur=this.hCur;
}
// this.alt=this.wCur+"×"+this.hCur;
}
}
//以上是我加的部分

// scalars based on change from old to new
this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;

// calculate size difference between new and old image, and resize if necessary
wDiff = (this.wCur - borderSize * 2) - imgWidth;
hDiff = (this.hCur - borderSize * 2) - imgHeight;

if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }

// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
if((hDiff == 0) && (wDiff == 0)){
if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}
}

Element.setHeight('prevLink', imgHeight);
Element.setHeight('nextLink', imgHeight);
Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));

this.showImage();
},

[liangxf0022]

顶一下，Lightbox效果不错。如果修改了这个文件是不是跟标准的effects.js冲突哦，我一直不敢改哦

[iou33449999]

通过上述更改，已经可以实现按照自定义的大小控制lightbox的展示窗口大小了，也就是说imgWidth和imgHeight这两个参数可以根据我们自定义的数据进行控制了，但是显示出来的图片大小依然无法控制，依然按照实际大小展现出来并会超出lightbox的展示窗口（应该是一个div吧？）

进一步研究发现，其实<img>标签是通过以下语句实现的

var objLightboxImage = document.createElement("img");
objLightboxImage.setAttribute('id','lightboxImage');
objImageContainer.appendChild(objLightboxImage);

于是想，是不是可以通过控制这一<img>标签的css属性达到最终目的，于是继续改，但是不知道这个参数是不是可以被获取呢，至少测试时失败了……更加郁闷了！！

var objLightboxImage = document.createElement("img");
objLightboxImage.setAttribute('id','lightboxImage');
objLightboxImage.style.width = 'imgWidth'; //我加的－－－－－－－－－－－
objLightboxImage.style.height = 'imgHeight'; //我加的－－－－－－－－－－－
objImageContainer.appendChild(objLightboxImage);

[lymzyc]

希望以后可以用到！