如何自定義shadowbox.js轉義字幕？

我已經實現了shadowbox的標題解決方案，它使用'rev'內聯標記。如何自定義shadowbox.js轉義字幕？

在shadowbox.js添加...

...get("sb-caption").innerHTML=obj.link.rev||"";... 
...<div id="sb-caption"></div>...

在shadowbox.css以下內容添加到文件底部...

#sb-info,#sb-info-inner{height:56px;line-height:20px;} 
#sb-caption {clear:both;font-size:90%;height:auto;line-height:12px;color:#fff;}

在您的網頁標記添加rev屬性（是的，它是一個有效的屬性，像rel！）到鏈接...標題文本進入rev屬性...

<a href="myimage.jpg" rel="shadowbox" title="My Image" rev="Your caption goes here...">My Image</a>

這就是我的...享受！

解釋請見：http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html

這是實現一個很容易的事情。

不過，我創造了我自己的CSS ...

#sb-caption{text-align:right;line-height:22px;color:#333;position:absolute;bottom:35px;right:35px;background:rgba(255,255,255,0.3);text-shadow: 1px 1px 1px #fff;display:block; padding:10px 20px 10px 50px;z-index:10;}

這所有的工作奇妙的爲好，不過，我有發現了一個問題。

當圖像不具有轉時，＃SB-字幕DIV反正出現時，作爲半透明白色塊，20x70像素的尺寸（相同的填充）我明白，我填充SET-這是問題的原因。

我想知道是否有人可以幫我解決問題。如果rev =「」未指定，則會告知shadowbox不顯示＃sb-caption。

任何人都可以想出一個解決這個問題。

沿着這些線可能是？

<script type="text/javascript"> 
    Shadowbox.init({ 
    }); 
    var Shadowbox = window.parent.Shadowbox; 
    if (getElementById('sb-caption').innerHTML == '') 
    getElementById('sb-caption').style.display = 'none'; 
</script>

......但是，這是行不通的。

來源

2012-10-15 vitaly87

你很近，但你可以直接在shadowbox.js中處理（如果你改變了它）。插入你完成這個

ad("sb-caption").style.display = (ad("sb-caption").innerHTML == "") ? 'none' : 'block' ;

之後

ad("sb-caption").innerHTML=aJ.link.rev||"";

和。我認爲它很明顯：每次打開一個Shadowbox，你都會檢查id =「sb-caption」元素中的內容。如果沒有內容將其顯示設置爲無，否則阻止。

來源

2012-11-07 20:56:26 muetzenflo

如何自定義shadowbox.js轉義字幕？

回答

相關問題