6

Please see this link for example.

How can add a long caption under popup? For example, adding 3 lines like this:

enter image description here we can add one line to title of tag and I tried to change this style

#cboxTitle {
position: absolute;
bottom: -25px;
left: 0px;
text-align: center;
width: 100%;
font-weight: bold;
color: #7C7C7C;

} by adding height or top:800px, caption deisapear

Nathan
  • 1,220
  • 3
  • 15
  • 26
user3250818
  • 239
  • 3
  • 16

2 Answers2

5

This solution seems to work for me:

$(document).bind('cbox_complete', function(){
    var cboxTitleHeight = $('#cboxTitle').height();
    var cboxContentHeight = $('#cboxContent').height();
    var cboxWrapperHeight = $('#cboxWrapper').height();
    var colorboxHeight = $('#colorbox').height();

    $('#cboxMiddleLeft, #cboxMiddleRight, #cboxContent').css('height', (cboxContentHeight + cboxTitleHeight) + 'px');
    $('#cboxWrapper').css('height', (cboxWrapperHeight + cboxTitleHeight) + 'px');
    $('#colorbox').css('height', (colorboxHeight + cboxTitleHeight) + 'px');
});

I also found this solution https://gist.github.com/eddyyanto/1620742 , but doesn't seem to work with v.1.5.x of colorbox.

Frugan
  • 319
  • 4
  • 7
  • Thanks! thats the best solution I've found. I have a small problem however, every time I create a new colorbox its adding all the $('#cboxTitle').heights of the previous instances. I dont understand how colorbox works in the DOM because i cant find the previous instances, but every time i fire a new one, cboxTitle height adds the previous instances heights.. ive added an alert with cboxTitle.height and sure enough it fires as many times as there have been colorboxes.. Ive tried: $(document).bind('cbox_cleanup', function(){ $('#cboxTitle').not(':first').remove(); }); but no – Elias Escalante Oct 13 '15 at 15:35
  • Are you using the latest version of colorbox? Could you replicate this problem in a code playground (JSFiddle, CodePen, JS Bin, etc.)? – Frugan Oct 18 '15 at 09:56
1

Have you tried using this? 

#cboxTitle {
position: absolute;
bottom: -25px;
left: 0;
text-align: right; /* MODIFIED */
width: 600px; /* MODIFIED */
font-weight: bold;
color: #7C7C7C;
word-break: break-word; /* ADDED */
margin-right: 100px; /* ADDED */
margin-left: 100px;  /* ADDED */
}

This will allow for 2 lines of text!

Then to allow for more room remove for another line remove the following piece of CSS from the above. ( Use "/* CSS HERE */" to comment out so you can keep the code!) Example below

/* bottom: -25px; */

After that it will take a little fiddling around to get the "image 3 of 3" part moved :)

Hope this helps

  • yes I tried word-wrap: break-word; word-break: break-all; but the result is awful, I need something more flexible, what about when description is more long or font is bigger. so I think maybe colorbox isn't suitable here. I need something like this: [link](http://farsnews.com/imgrep.php?nn=13921124000727) – user3250818 Mar 07 '14 at 08:46
  • @user3250818 Have a look at the other modifications i made, it is not just that part of code that has been added/modified –  Mar 07 '14 at 08:49
  • thanks Woolnut, yes I test it, your answer is so close to what I want, but I need add photographer name in one line so I need at least two other line also surely this two must have desired margins and styles so i think we need change position of caption (I mean container of caption text, that gray part in above image) and also height of it, but I think it's not possible here. thanks – user3250818 Mar 07 '14 at 10:25
  • Awesome, glad my answer was of use to you :) @user3250818 –  Mar 07 '14 at 10:32