CODEWITHSUNDEEP
csscolorboximage-gallerycaption
user3250818
user3250818

Reputation: 247

Customize colorbox caption (long caption and position of it)

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

Upvotes: 6

Views: 3764

Answers (2)

Frugan
Frugan

Reputation: 389

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.

Upvotes: 5

user3387318
user3387318

Reputation:

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

Upvotes: 1

Related Questions