0

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 Oct 9 '15 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 – Niji Monachan Oct 9 '15 at 10:23
2

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.

|improve this answer|||||
0

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)
  } 
}
|improve this answer|||||
  • Thank you .Even We tried this method ,but it's still showing the same output. – Niji Monachan Oct 9 '15 at 7:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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