How can we create a fixed width box like in the examples at where the box is 75% of the screen resolution? Also is it possible to get that option included on the settings page?

Thank you.


zmove’s picture

+1 for that. the colorbox width seems to be hardcoded in a style="" element for the colorbox wrapper.

It would be great to have an admin option to put our own value.



melaniepike’s picture

Yes! Any luck on figuring out the fixed width box like example 3?? Maybe there is a way to do this in CSS?


latulipeblanche’s picture

Version: 6.x-1.0-beta6 » 7.x-1.x-dev

Changed the issue to D7.

But the question is still the same.

How can we get the fixed width like on the demosite :

"No Transition + fixed width and height (75% of screen size)"

JohnGuy’s picture

Is there an answer to this yet?


enzipher’s picture

It might depend on implementation, but you should be able to use the settings from the example page, e.g.

$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});

Add the above in a *.js file and the settings should take effect, alternatively you can add the code in your template.php file using drupal_add_js(). Something along the lines of:

drupal_add_js('$(".group3").colorbox({rel:"group3", transition:"none", width:"75%", height:"75%"});', 'inline');


jobe12’s picture

i tried to use your solution, but it did not change anything.
Any other idea?


Bensbury’s picture

Not sure if this helps (I'm trying to make colorbox responsive) but you can pass % with '%25' as the escape character, as well as set a maxWidth.

Japan Office

NB - Using colorbox node by the way, but it's the same.

michielkenis’s picture

Comment #5 solved my issue. Just make sure you replace the ".group3" into the class you used.

bellagio’s picture

i'm using colobox with insert
My class is colorbox rel is colorbox.
i added this code to template.php
drupal_add_js('$(".colorbox").colorbox({rel:"colorbox", transition:"none", width:"75%", height:"75%"});');
to see if this code is working for me, but nothing is changed.
And my source code shows <script type="text/javascript" src="/drupal/$(".colorbox").colorbox({rel:"colorbox", transition:"none", width:"75%", height:"75%"});?h"></script>
Could you kindly share how you made it work? Thank you.

enzipher’s picture

@bellagio You must add the inline parameter for it to work, otherwise the function is looking for an external file.

drupal_add_js('$(".colorbox").colorbox({rel:"colorbox", transition:"none", width:"75%", height:"75%"});', 'inline');


bellagio’s picture

Thank you enzipher.
i added 'inline' but no change. i'm using drupal 6. i guess this code is good for 7 only?

swortis’s picture

Not sure this was really answered.

If a user is creating a View with this module how would he/she get a fixed width box to launch?