自定義彩盒標題（長標題和它的位置）

如何在彈出菜單下添加長字幕？例如，添加3條線路是這樣的：

enter image description here 我們可以一行添加到標籤的標題，我試圖通過增加高度或頂部改變這種風格

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

} ：800像素，字幕deisapear

來源

2014-03-07 user3250818

你想描述在圖片上？ –

如果是這樣，你可以使用這樣的東西http://jsfiddle.net/d4fyL/ –

是的，但不是一個簡單的圖像和描述，正如我所說，在colorbox照片庫中彈出的說明。 – user3250818

您是否嘗試過使用它？

#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 */ 
}

這將允許2行文本！

然後，爲了讓更多空間移除另一行，請從上面刪除以下一段CSS。（使用「/ *此處的CSS * /」註釋掉，這樣可以保持代碼！）下面

/* bottom: -25px; */

實例後，將採取一點點擺弄周圍，以獲得「圖像3 3」的部分移動:)

希望這有助於

來源

2014-03-07 08:07:56 Woolnut

是的，我嘗試了自動換行：break-word;文字中斷：全部打破;但結果是糟糕的，我需要更靈活的東西，當描述更長或字體更大時如何。所以我認爲可能colorbox在這裏不適合。我需要這樣的東西：[鏈接]（http://farsnews.com/imgrep.php?nn=13921124000727） – user3250818

@ user3250818看看我所做的其他修改，它不只是那部分代碼已經添加/修改 – Woolnut

謝謝Woolnut，是的，我測試它，你的答案是非常接近我想要的，但我需要在一行中添加攝影師的名字，所以我至少需要另外兩行也肯定這兩個必須有所需的邊距和樣式我認爲我們需要改變標題的位置（我的意思是標題文字的容器，上圖中的灰色部分）以及它的高度，但我認爲這是不可能的。謝謝 – user3250818

該解決方案似乎爲我工作：

$(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'); 
});

我也發現了這個解決方案https://gist.github.com/eddyyanto/1620742，但似乎並沒有與合作的v.1.5.x工作lorbox。

來源

2015-02-18 21:34:18 ewake

謝謝！這是我找到的最佳解決方案。然而，我有一個小問題，每次創建一個新的colorbox時，都會添加前面實例的所有$（'＃cboxTitle'）高度。我不明白colorbox如何在DOM中工作，因爲我無法找到以前的實例，但每次我開啓一個新的實例時，cboxTitle的高度都會添加之前的實例高度.iVE添加了cboxTitle.height的提醒，並且確實已經啓動了很多次（'：'＃cboxTitle'）。not（'：first'）。remove（）; $（document）.bind（'cbox_cleanup'，function（）{012＃} }）; 但不是 –

您使用的是最新版本的colorbox嗎？你能否在代碼遊戲場（JSFiddle，CodePen，JS Bin等）中複製這個問題？ – ewake

自定義彩盒標題（長標題和它的位置）

回答

相關問題