[英]How to customize shadowbox.js rev caption?
我為shadowbox實現了一個使用'rev'內聯標記的字幕解決方案。
在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-caption div無論如何都會出現,作為一個半透明的白色塊,大小為20x70像素(與填充相同)我明白我的填充設置是導致問題。
我想知道是否有人可以幫我解決問題。 如果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>
......但是,這不起作用。
你很親密,但你可以直接在shadowbox.js中處理這個問題(如果你還在改變它)。 插入此內容
ad("sb-caption").style.display = (ad("sb-caption").innerHTML == "") ? 'none' : 'block' ;
之后
ad("sb-caption").innerHTML=aJ.link.rev||"";
你完成了 我認為它的作用很明顯:每次打開Shadowbox時,都會檢查id =“sb-caption”元素中的內容。 如果沒有內容將其顯示設置為none,否則將阻止。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.