Question

我为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>

......但是，这不起作用。

Answer 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”元素中的内容。如果没有内容将其显示设置为无，否则将阻止。

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

1 个答案: