Hi,

Rather than fixed width/height, is there any way to open a colorbox to 90% of a users browser screen height ?

Thanks

CommentFileSizeAuthor
#11 colorbox-settings.png19.72 KBpaskainos

Comments

rolandk’s picture

rolandk commented

Hi,

Just to clarify further - how can I open a colorbox to 90% of a users browser screen height with elastic transition please.

Thank you

frjo’s picture

frjo commented

Use "maxWidth" and "maxHeight". With Colorbox load you can set them with url queries. For standard Colorbox there are setting in the Colorbox configuration page.

rolandk’s picture

rolandk commented

I am not sure where to find the colorbox config page - it was not in the drupal mod. Also the readme file did not have seem to have code samples.

Please can you post a sample for the above ?

The only samples I have found is http://colorpowered.com/colorbox/core/example1/index.html and I am not sure how to make this work for drupal.

Do you have a complete set of coding samples that shows how to call Colorbox for urls, html, videos, flash as well as other options ?

Thanks

frjo’s picture

frjo commented

Colorbox configurations is at "admin/config/media/colorbox". Just click "Configuration" and then you find the Colorbox link in the media section.

rolandk’s picture

rolandk commented

Thanks, I was able to set the default colorbox to 90% at "admin/config/media/colorbox".

The call to open a url or in colorbox overrides the defaults...

<a class="colorbox-load" href="http://www.youtube.com/embed/ZvctkhQES-c?width=640&amp;height=390&amp;iframe=true" title="Youtube">Open video</a>

How do I correctly format the above call so that the default set colorbox 90% height fires properly ?

frjo’s picture

frjo commented

I believe I misread your question. You don't want to limit the size, you want to force it to 90%.

If that is the case it's the standard width and height you should use.

<a class="colorbox-load" href="http://www.youtube.com/embed/ZvctkhQES-c?width=90%25&height=90%25&iframe=true" title="Youtube">Open video</a>

You need to urlencode the % sign so it becomes "%25" like in the example above.

The "maxWidth" and "maxHeight" is to limit the Colorbox to the specified values.

rolandk’s picture

rolandk commented

Thanks so much - I would never have figured out the urlencoding:

width=90%25&height=90%25

I really think fans of colorbox would love a simple code samples readme to show how to open urls, html, youtube, flash, vimeo in colorbox witn different options like transitions, title, etc.

Thanks for the user support on colorbox.

viny-1’s picture

viny-1 commented

Hi,

I have no CSS background at all (I know I will have to fix that soon), could you tell me what file I need to update in order to have this link automatically added for my node link: Open video.

Thanks a lot.

lsolesen’s picture

lsolesen commented
Status: Active » Fixed

@rolandk Could you supply some documentation for the issues you mention. That would help out the maintainers immensely.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

paskainos’s picture

paskainos commented
StatusFileSize
new colorbox-settings.png19.72 KB

If I understand the question correctly, the answer is quite simple - and already built in to the Colorbox module UI. On the Colorbox plugin settings page (admin/config/media/colorbox) under 'Styles and options' » 'Options' select the 'Custom' radio button which will reveal several customizable options, including Max width and Max height. See the attached image for visual reference.

kopeboy’s picture

kopeboy
Primary language Italian
Location Milan
commented
Issue summary: View changes

That doesn't work with the Colorbox trigger field :(

I mean, the colorbox is limited, but the image isn't, so it's scrollable (even if in the settings I've set scrollable OFF).

bcobin’s picture

bcobin commented

@kopeboy,

Did you ever find a solution for this? Running into the same issue on tablet/mobile. Thanks!