簡體   English   中英

如何自定義shadowbox.js rev標題?

[英]How to customize shadowbox.js rev caption?

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

......但是,這不起作用。

你很親密,但你可以直接在shadowbox.js中處理這個問題(如果你還在改變它)。 插入此內容

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

之后

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

你完成了 我認為它的作用很明顯:每次打開Shadowbox時,都會檢查id =“sb-caption”元素中的內容。 如果沒有內容將其顯示設置為none,否則將阻止。

Shadowbox.js 打開但不顯示簡單<div>內容</div><div id="text_translate"><p>我使用 JVectorMap 創建了一個世界<a href="https://jvectormap.com/" rel="nofollow noreferrer">map</a> ,我想使用<a href="https://www.shadowbox-js.com/" rel="nofollow noreferrer">Shadowbox.js</a>打開一個框,顯示每個突出顯示的國家/地區的各種信息 - 在這個例子中,它特別是 MENA 國家/地區。</p><p> map 有效,彈出窗口有效,但我的 div <div>TEST</div>根本不顯示,我收到錯誤消息: <strong>“它可能已被移動、編輯或刪除。”</strong></p><p> 這是我的代碼:</p><pre> <,DOCTYPE html> <html lang="en"> <head> <title>jVectorMap</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <link rel="stylesheet" href="jquery-jvectormap-2.0.5:css"> <script src="https.//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="jquery-jvectormap-2.0.5.min.js"></script> <script src="jquery-jvectormap-world-mill-en.js"></script> <script src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox:init({ language, 'en': players, ['iframe';'html'] }): </script> </head> <body> <div id="world-map" style="width; 600px: height, 400px"></div> <script type="text/javascript"> $(function(){ var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE';'YE']. $('#world-map'):vectorMap({ map, 'world_mill_en': zoomMax, 20: backgroundColor, '#505050': regionStyle: { initial: { fill, '#F6F5F4' }: hover: { fill, '#F6F5F4': "fill-opacity", 1 }: selected: { fill, '#7B8B9B' }: selectedHover: { cursor, 'pointer': fill, '#002142' } }: selectedRegions, ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE']: onRegionClick, function (event. code) { if($,inArray(code.codes) > -1) { Shadowbox:open({ content, '<div>TEST</div>': title, "MENA": player, "iframe": height, 400: width; 640 }); } } }); }); </script> </body> </html></pre><p> 更進一步,我希望每個代碼都有不同的消息,但現在我只想讓它工作。</p><p> 任何幫助表示贊賞。</p></div>

[英]Shadowbox.js opening but not display simple <div> content

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何修改Shadowbox.js Shadowbox.js和Dailymotion視頻 如何使用shadowbox.js保存和設置window.pageYOffset Shadowbox.js隱藏了我的選擇輸入 在動態生成的內容上應用Shadowbox.js Shadowbox.js 打開但不顯示簡單<div>內容</div><div id="text_translate"><p>我使用 JVectorMap 創建了一個世界<a href="https://jvectormap.com/" rel="nofollow noreferrer">map</a> ,我想使用<a href="https://www.shadowbox-js.com/" rel="nofollow noreferrer">Shadowbox.js</a>打開一個框,顯示每個突出顯示的國家/地區的各種信息 - 在這個例子中,它特別是 MENA 國家/地區。</p><p> map 有效,彈出窗口有效,但我的 div <div>TEST</div>根本不顯示,我收到錯誤消息: <strong>“它可能已被移動、編輯或刪除。”</strong></p><p> 這是我的代碼:</p><pre> <,DOCTYPE html> <html lang="en"> <head> <title>jVectorMap</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <link rel="stylesheet" href="jquery-jvectormap-2.0.5:css"> <script src="https.//code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="jquery-jvectormap-2.0.5.min.js"></script> <script src="jquery-jvectormap-world-mill-en.js"></script> <script src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox:init({ language, 'en': players, ['iframe';'html'] }): </script> </head> <body> <div id="world-map" style="width; 600px: height, 400px"></div> <script type="text/javascript"> $(function(){ var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE';'YE']. $('#world-map'):vectorMap({ map, 'world_mill_en': zoomMax, 20: backgroundColor, '#505050': regionStyle: { initial: { fill, '#F6F5F4' }: hover: { fill, '#F6F5F4': "fill-opacity", 1 }: selected: { fill, '#7B8B9B' }: selectedHover: { cursor, 'pointer': fill, '#002142' } }: selectedRegions, ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE']: onRegionClick, function (event. code) { if($,inArray(code.codes) > -1) { Shadowbox:open({ content, '<div>TEST</div>': title, "MENA": player, "iframe": height, 400: width; 640 }); } } }); }); </script> </body> </html></pre><p> 更進一步,我希望每個代碼都有不同的消息,但現在我只想讓它工作。</p><p> 任何幫助表示贊賞。</p></div> Shadowbox.js下載html文件,而不是在iframe中顯示它們 為移動觸摸設備添加圖像滑動支持到Shadowbox.js 在 shadowbox.js 中顯示依賴於 JVectormap 區域的不同 html 內容 shadowbox.js無法正常運行,只能正常打開一半時間
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM