I am trying to create a gallery (using Views Gallerific, which has nice thumbnails, paging and transitions, etc.) and I want to show it in a Lightbox overlay (lightmodal or lightframe), i.e. not on a new page. I want my gallery to use as much space as it is available on the screen.
I know it is probably not realistic ask Lightbox to open in fullscreen, but can it be configured to take 100% of the window's dimensions? Take Google's Picasa for example: you klick on the start slideshow link and a Lightbox-like overlay shows up and takes whatever space there is available. At the moment I can see that Lightbox has a size setting but it accepts only pixels, not % of the window size.

Thanks!

Comments

tesliana’s picture

tesliana commented

I have been asking the same question for weeks now and am totally flabbergasted at how there is not even a speculative response from anyone.

No matter how good these modules are, what use are they when even the simples, yet extremely relevant, noobish questions can not be answered ?

kirilius’s picture

kirilius commented

Hi, any ideas? Thanks!

heinz963’s picture

heinz963 commented

Hy

I'am also interested in the solution !

Thank's.

kirilius’s picture

kirilius commented

Actually this shouln't be different that Lightbox showing for pictures. When a picture is shown, Lightbox takes the entire window. That is why only the iframe has an option for the size. I would suggest to add another setting, a checkbox perhaps, that says "take all space available"

tesliana’s picture

tesliana commented

Could this somehow be solved through CSS or even by hand modifying the javascript code that gets generated and which includes the configuration settings ? While it may be ugly, is it even possible ?

heinz963’s picture

heinz963 commented

hy
i made two changes in the file lightbox.js. Works much better but not 100 percent perfect. There's remaining a small border on the buttom of the lightbox. I think it comes from the term 'Lightbox.infoHeight * 4' which I don't understand. So if you change in the admin lightbox setting the border from top to zero or a small value you will see.

I do the following changes:
org code: var targ = { w:arrayPageSize[2] - (Lightbox.borderSize * 2), h:arrayPageSize[3] - (Lightbox.borderSize * 6) - (Lightbox.infoHeight * 4) - (arrayPageSize[3] / 10) };
new code: var targ = { w:arrayPageSize[2] - (Lightbox.borderSize * 2), h:arrayPageSize[3] - (Lightbox.borderSize * 2) - (Lightbox.infoHeight * 4) - (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) };

john.kenney’s picture

john.kenney commented

following technique of heinz963 in #6, i was able to accomplish 100% coverage with the following changes:

1. changed lightbox.js line to the following:

var targ = { w:arrayPageSize[2] - (Lightbox.borderSize * 2), h:arrayPageSize[3] - (Lightbox.borderSize * 1) - (Lightbox.infoHeight * 3) - (arrayPageSize[3] / 10) };

this is slightly different than in #6.

it appears Lightbox.infoHeight controls width of bottom area for showing whatever you've got there. you need to set it to right height to contain your info fields or the sizing will not work right. e.g., if i set mine to '2', the lightbox believes my bottom info is contained inside that size, but because the size is actually larger than that, the bottom of the lightbox scrolls off the page. whereas when set to '3' for me, it does not scroll off.

2. change 'distance from top' field to '5' (as in 5px) at general > advance settings > skin settings. this setting can be any value and some may prefer it wider or narrower.

basically thing is: it appears if you play around with these 3 variables: borderSize, infoHeight, and Distance from top and you can get it to fit more or less any percentage of browser window you want.

Courtney.B’s picture

Courtney.B commented

Subscribe.