tags:

views:

29

answers:

4

Is there any way to set a fixed/custom height for ligtbox2?

#lightbox img{ width: auto; height: 600px;}   

This only resizes the img and not the outer container.

A: 

With that declaration you are styling the img within #lightbox

Try removing the img so that you are only styling #lightbox

does this work?

#lightbox { width: auto; height: 600px;}

jordanstephens
no dice my friend
Mikey1980
+1  A: 

If you go through the HTML it creates you can see that it's wrapped in a div with id="lightbox" and within that a div with id="outerImageContainer". The latter has a style attribute with the height of the image. Try targeting that. Either overwriting it in your CSS or changing the height after it's loaded.

Alec
A: 
<html>
<head>
    <style type="text/css">
        #lightbox { border : solid 2px #000000; position:absolute; }
        #lightbox img { width:auto; height: 600px;}
    </style>
</head>
<body>
    <div id="lightbox">
        <img src="Desert.jpg" alt="desert" />
    </div>
</body>
</html>
Gurdeep Singh Mander
A: 

None of these solutions worked, but thanks for your help guys. I had to get my hands dirty in the js... here's my hacked code: lightbox.js

...
     // once image is preloaded, resize image container


            imgPreloader.onload = (function(){
                var scale = 600 / imgPreloader.height; //modified
                this.lightboxImage.src = this.imageArray[this.activeImage][0];
                this.resizeImageContainer((imgPreloader.width * scale), //modified imgPreloader.height);
            }).bind(this);
            imgPreloader.src = this.imageArray[this.activeImage][0];
        },

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

            // get current width and height
            var widthCurrent  = this.outerImageContainer.getWidth();
            var heightCurrent = this.outerImageContainer.getHeight();

            // get new width and height

            var widthNew  = (imgWidth + LightboxOptions.borderSize * 2);
            var heightNew = (600 + LightboxOptions.borderSize * 2); //modified
...
Mikey1980
now if only I can get prototype and mootools to work on the same page I'd be laughing...lol!
Mikey1980