如何自定义 shadowbox.js rev 标题？答案

【问题标题】：How to customize shadowbox.js rev caption?如何自定义 shadowbox.js rev 标题？
【发布时间】：2012-10-05 23:36:59
【问题描述】：

我已经为使用 'rev' 内联标签的 shadowbox 实现了一个标题解决方案。

在 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>

就是这样……尽情享受吧！

这是一件很容易实现的事情。

但是，我创建了自己的 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;}

这一切都很好，但是，我发现了一个问题。

当图像没有 rev 时，#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>

...但是，这行不通。

【问题讨论】：

标签： javascript css shadowbox

【解决方案1】：

你已经很接近了，但你可以直接在 shadowbox.js 中处理这个问题（如果你要改变它的话）。插入这个

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

紧接着

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

你就完成了。我认为它的作用很明显：每次打开 Shadowbox 时，都会检查 id="sb-caption" 元素中的内容。如果没有内容将其显示设置为无，否则阻止。

【讨论】：