[英]How to customize shadowbox.js rev caption?
I have implemented a caption solution for shadowbox which uses the 'rev' inline tag. 我为shadowbox实现了一个使用'rev'内联标记的字幕解决方案。
In shadowbox.js add... 在shadowbox.js中添加...
...get("sb-caption").innerHTML=obj.link.rev||"";...
...<div id="sb-caption"></div>...
In shadowbox.css add the following to the bottom of the file... 在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;}
In your page markup add the rev attribute (yes, it's a valid attribute like rel!) to the link...the caption text goes into the rev attribute... 在你的页面标记中添加rev属性(是的,它是一个有效的属性,如rel!)到链接...标题文本进入rev属性...
<a href="myimage.jpg" rel="shadowbox" title="My Image" rev="Your caption goes here...">My Image</a>
That's it...enjoy! 就是这样......享受!
Explained more here: http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html 这里解释得更多: http : //shadowbox.1309102.n2.nabble.com/Captions-td2643307.html
This was a very easy thing to implement. 这是一个非常容易实现的事情。
However, I created my own CSS... 但是,我创建了自己的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;}
This all worked wonderfully as well, however, I have spotted a problem. 这一切都很有效,但是,我发现了一个问题。
When an image does NOT have a rev, the #sb-caption div appears anyway, as a semi-transparent white block, 20x70 pixels in size (the same as the padding) I understand that my padding set-up is the cause of the problem. 当图像没有转速时,#sb-caption div无论如何都会出现,作为一个半透明的白色块,大小为20x70像素(与填充相同)我明白我的填充设置是导致问题。
I'm wondering if anyone can help me with a work-around. 我想知道是否有人可以帮我解决问题。 Something that tells shadowbox to NOT DISPLAY #sb-caption, if the rev="" is NOT SPECIFIED.
如果rev =“”未指定,则告诉shadowbox不显示#sb-caption的东西。
Can anyone come up with a fix for this. 任何人都可以想出一个解决方案。
Something along these lines maybe?? 沿着这些方向的东西也许?
<script type="text/javascript">
Shadowbox.init({
});
var Shadowbox = window.parent.Shadowbox;
if (getElementById('sb-caption').innerHTML == '')
getElementById('sb-caption').style.display = 'none';
</script>
...But, that doesn't work. ......但是,这不起作用。
you were close, but you can handle this directly in the shadowbox.js (if you're changing it anyway). 你很亲密,但你可以直接在shadowbox.js中处理这个问题(如果你还在改变它)。 Insert this
插入此内容
ad("sb-caption").style.display = (ad("sb-caption").innerHTML == "") ? 'none' : 'block' ;
right after 之后
ad("sb-caption").innerHTML=aJ.link.rev||"";
and you're done. 你完成了 I think it's obvious what it does: Everytime you open a Shadowbox, you check for content within the id="sb-caption" element.
我认为它的作用很明显:每次打开Shadowbox时,都会检查id =“sb-caption”元素中的内容。 If there is no content set its display to none, otherwise to block.
如果没有内容将其显示设置为none,否则将阻止。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.