Download & Extend

How to get fixed width box?

Project:Colorbox
Version:7.x-1.x-dev
Component:User interface
Category:support request
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

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

Thank you.

Comments

#1

+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.

Regards,

Alex

#2

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

Thanks!

#3

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 : http://jacklmoore.com/colorbox/

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

#4

Is there an answer to this yet?

Thanks

#5

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:

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

Cheers,

#6

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

thanks

#7

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.

#8

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

#9

i'm using colobox with insert http://drupal.org/project/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.

#10

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

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

Cheers,

#11

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

nobody click here