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

Question

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

Answer 1

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

Answer 2

以下是我改的结果，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();
    },

Answer 3

通过上述更改，已经可以实现按照自定义的大小控制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);