I have implemented Colorbox module and configured it for my image gallery. But the issue is when I load the colorbox pop up window it seems to be very small in size. Even I tried using CSS setting height and width as 100%, but it's not making any difference.

Can anyone tell me as how to adjust the height / width of colorbox pop up model window?

  • the answer of your question lies under the documentation of this module. Please have a look at this drupal.org/node/1971564.
    – WaQaR Ali
    Commented Oct 9, 2015 at 7:36
  • Thank you.I followed the same steps for installing colorbox but all these efforts are in vain .Can you suggest some other method as its still in vain Commented Oct 9, 2015 at 10:23

2 Answers 2


You should probably check the settings at


If the issue is that the image is too small then you need to change the Image style to a different one or perhaps make a new one.

If you want to make the Colorbox larger you can use the Custom options on that same configuration page and set your own defaults for size. The Colorbox module should allow you to specify

  • initial width
  • initial height
  • max width
  • max height

If you choose Custom under the Options setting.


Colorbox can be used to display content pop-ups. By default, the popup's height and width will be exactly the same as that of the original content. But there may be times, when you want to load the content as per the screen height. This can be done easily using jQuery.

  1. Assign the content which is to be displayed in the colorbox, to a variable.
  2. Find the width and height of the above content.
  3. Find the current screen's width and height.
  4. Compare height of the content with screen height. If the content's height is greater than the screen height, the content's height is set as the screen height. Same, in the case of width.

  5. Load the content with proper height and width in colorbox.

The code implementation of the above steps is given below:

$(".popout-link").click(function() {  //.popout-link, the class in which you need the pop-up functionality.
  var popup_content = $('#content').html(); // Replace #content with the content's id
  var y = $('#content').height(); //Content's height
  var x = $('#content').width();  //Content's width
  var wy = $(window).height();   // Assigning the screen's height to wy
  var wx = $(window).width();    // Assigning the screen's width to wy
  if (y > wy) { //Compares the height
    y = wy; 
  else {
    y = y; 
  if (x > wx) { //Compares the width
    x = wx; 
  else {
    x = x; 
  $.colorbox({html:""+popup_content+"", width:x, height:y, onComplete: function() { //loads the content in colorbox with specific width and height
    $('#cboxLoadedContent').jScrollPane(); // call this function to show scroll bar (You need to enable Jscrollpane Module to use this though)
  • Thank you .Even We tried this method ,but it's still showing the same output. Commented Oct 9, 2015 at 7:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.