5

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

それだけです...お楽しみください！

詳細はこちら：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 = ""が指定されていない場合、シャドウボックスに＃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>

...しかし、それは機能しません。

4

1 に答える 1

1

あなたは近くにいましたが、これはshadowbox.jsで直接処理できます（とにかく変更する場合）。これを挿入

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

直後の

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

これで完了です。それが何をするのかは明らかだと思います。シャドウボックスを開くたびに、id="sb-caption"要素内のコンテンツをチェックします。コンテンツがない場合は、表示をnoneに設定し、そうでない場合はブロックします。

于 2012-11-07T20:56:26.700 に答える