2012-10-15 10 views
5

私は 'rev'インラインタグを使用するshadowbox用のキャプションソリューションを実装しました。 shadowbox.jsでshadowbox.js revキャプションをカスタマイズするには?

追加... shadowbox.cssで

...get("sb-caption").innerHTML=obj.link.rev||"";... 
...<div id="sb-caption"></div>... 

ファイルの最後に以下を追加...あなたのページのマークアップで

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

これは私ですt ...楽しむ!

はもっとここで説明:http://shadowbox.1309102.n2.nabble.com/Captions-td2643307.html

は、これは実装するための非常に簡単なものでした。このすべてが同様に素晴らしく働い

は、しかし、私は

#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;} 

...自分のCSSを作成し、しかし、私は問題を発見しています。

画像が回転していない場合は、#1 SB-キャプションの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> 

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

答えて

1

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

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

後にこの

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

を挿入し、あなたは完了です。 私はそれが何をしているのかはっきりしていると思います.Shadowboxを開くたびに、id = "sb-caption"要素内のコンテンツをチェックします。コンテンツが設定されていない場合、その表示はnoneに、それ以外の場合はブロックされます。

関連する問題