When I use a colorbox-trigger to open a colorbox, I have to specify the width and height of the overlay - unlike in a regular colorbox image field, where it adapts nicely to the screen size. Is there any way to get such a feature in views?

  • 1
    Just make the height and width larger than the normal screen, colorbox reduces its size automatically to fit the screen. – Paul Oct 6 '14 at 6:53
  • @Paul : unfortunately it doesn't, it cuts the image to the given size instead of making it fit the screen (scaling it) – Dalmaz Oct 6 '14 at 11:18
  • 1
    Is it ONLY an image you want to display? – Paul Oct 6 '14 at 11:21
  • No, i actually try to put custom caption that would be more extensive then what tokens let me do - with some HTML and linked content. – Dalmaz Oct 6 '14 at 11:22
  • Actually Views is my second attempt - I tried to theme the caption and insert some HTML into the tokens there, see drupal.stackexchange.com/questions/131719/… – Dalmaz Oct 6 '14 at 11:24

The colorbox-trigger is normally only required when you want to display HTML in your colorbox. You are then required to set height and width as colorbox is not able to determine the dimensions of the HTML content before it is loaded.

If you want to display an image in a colorbox, there's no need to use the colorbox-trigger but instead just add the image field and use colorbox as image style. Within the field formatter settings of colorbox you can then define the image styles to be used for preview and inside the colorbox. If the colorbox image style exceeds the screen, colorbox will automatically resize the image to fit the screen/window.

In your case, you want to have the image displayed along with custom HTML captions. Thus, you need to define the colorbox content and then set height and width to 100%. The colorbox will then use up maximum available space. However, your image is still not diplayed at 100% width. To achieve that, you would need a quite large image to be displayed in the colorbox, eventually add a wrapper div to it and set a CSS rule like

div.wrapper img { max-width: 100%; }
  • The thing is that when I use the colorbox formattter in views, I cannot use any tokens that appeal to the other fields in views - the tokens are very limited for the caption fields. if I use colorbox-trigger, in the other hand, I need to specify width and hieght – Dalmaz Oct 6 '14 at 12:52
  • well, I added #cboxLoadedContent img {max-width: 100%;max-height:100%; width: auto !important; height: auto !important;} and it seems to work ;-). Thank you @Paul ! – Dalmaz Oct 6 '14 at 13:05

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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