Hello!
I have a problem with gallery. I'm using one you have tutorial for. Images show, slimbox works but I can't get images to fit screen. For example, I have a laptop with 1366x768 resolution and if the image is bigger (for example, 1920x1080) it just doesn't fit screen. I have to scroll to the right and down just to get to "Close" button.

My javascript and code are default from the tutorial (just learning how Couch works) so I don't think there's point for me to post it.

I hope somebody can help. Cheers!

[KK]

Hello @ExDec,

The sample code is, well, just a sample. The point it illustrates is how to use the relevant Couch tags in a gallery.

I suggest you please use your own static gallery design (where everything including the popups suit you) and then retrofit Couch within it the way it is shown in the sample.

That is how Couch is supposed to work - by retrofitting within your static designs.

Hope it helps.

I am using my own template. And as I said - everything else works fine. Slimbox opens and it works fine except images don't resize to fit screen. It's probably a problem with slimbox itself but I'm not really into javascript that much and was hoping somebody here could help with that.

[KK]

My apologies.

JS happens not to be my forte but I am sure someone from our members would be able to help you with this issue.

Ok, I figured out how to make it work from combining some possible solutions I found on the internet.
If anyone else needs it, here's the way I do it:

First, find this part in slimbox2.js:

Code: Select all

w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});
w(p).width(k.width); 
w([p,I,d]).height(k.height); 

And just replace it with:

Code: Select all

var winWidth  = window.innerWidth  - 20;
        var winHeight = window.innerHeight - 120;
        if (winWidth > winHeight) { 
            var maxSize = winHeight; 
        } else { 
            var maxSize = winWidth;
        }

        /* determine proper w and h for img, based on original image'w dimensions and maxSize */
        var my_w = k.width; 
        var my_h = k.height;            

        if (my_w > my_h) {  /* You can play with this if this default looks too small */
            my_h = maxSize * my_h / my_w;
            my_w = maxSize;
        } else {
            my_w = maxSize * my_w / my_h;
            my_h = maxSize;
        }

        if (k.width > my_w || k.height > my_h){ /* constrain it */
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:""+my_w+"px "+my_h+"px",visibility:"hidden",display:""});
            w(p).width(my_w);
            w([p,I,d]).height(my_h);    
        }
        else { /* default behaviour  NORMAL before hackeing*/
            w(g).css({backgroundImage:"url("+n+")",backgroundSize:"",visibility:"hidden",display:""});
            w(p).width(k.width);
            w([p,I,d]).height(k.height);            
        }

Hope this will help someone else too. Cheers!

[KK]

Thanks for sharing the solution