How can i increase the size of color box pop up window in drupal 7. .?

Question

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?

Answer 1

You should probably check the settings at

admin/config/media/colorbox

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.

Answer 2

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)
  } 
}