内容播放colorbox
生活随笔
收集整理的這篇文章主要介紹了
内容播放colorbox
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、需要的js
（1）jquery
（2）colorbox (http://www.jacklmoore.com/colorbox/ 下載文件夾，其中有js、css文件)
//加載的時候注意文件的路徑<script type="text/javascript"?src="jquery.min.js"></script>
<script type="text/javascript"?src="jquery.colorbox-min.js"></script>
2、需要的css
Example 1-5， 選擇一個自己比較喜歡的樣式
<link?media="screen"?rel="stylesheet"?href="example5/colorbox.css"?/>3、需要的html
把你需要用color box這種幻燈片方式加載的內容統一用一個class或者，方面后面提取。如
<p><a?class="colorbox1"??href="../content/ohoopee1.jpg"?>Grouped Photo?1</a></p>?<p><a?class="colorbox1"?href="../content/ohoopee2.jpg"?>Grouped Photo?2</a></p>
?<p><a?class="colorbox1"?href="../content/ohoopee3.jpg">Grouped Photo?3</a></p>
//這里只是顯示了圖片，如果你需要加載整個頁面，把href替換成相應的頁面地址就行
4、調用colorbox
<script>? ? $(document).ready(function(){
? ? ? ??//元素調用Colorbox的示例
? ? ? ? $(".colorbox1").colorbox({?rel:?'group1'?});
? ??});
</script>
5、colorbox的其他參數說明
colorbox 的參數很多，分成幾個部分
(1)基礎參數
| ?參數 | ?默認值 | ?作用 |
| ? transition | ? “elastic” | ?彈出窗口的方式，支持”elastic”, “fade”, “none”. |
| ?speed | ? 350 | ?彈出窗口的速度,單位是ms |
| href | false | 動態指定加載的href |
| title | false | 動態指定鏈接的title |
| rel | false | 分組功能，分組之后可以通過上一頁，下一頁查看同一個分組的其他內容。指定了相同ref的元素將分為一組 如：rel:”group1 |
| scalePhotos | true | 如果為true,而且定義maxWidth, maxHeight, innerWidth, innerHeight, width, height 那么會去自動去適配 |
| scrolling | true | 如果為false，那么即使內容超出了彈出框，也會隱藏滾動條 |
| opacity | 0.85 | 彈出框的不透明度，取值范圍：0-1 |
| open | false | 如果為true,彈出框會立即自動打開 |
| returnFocus | true | 如果為true, 當關閉彈出框之后，會繼續focus原來的元素 |
| preloading | true | 如果為true, 那么在加載當前彈出框的內容之后，會偷偷先加載pre和next的內容 |
| overlayClose | true | 如果為true, 那么點擊彈出框之外的內容時，自動關閉彈出框 |
| escKey | true | 如果為true, 那么按esc鍵之后，自動關閉彈出框 |
| arrowKey | true | 如果為true, 那么允許按下 ← → 去展示 pre和next的內容 |
| loop | true | 如果為true, 那么當最后一頁時，點擊next會循環到第一頁 |
| data | false | 在ajax加載頁面時，post 或者 get 過去的數據 |
| fadeOut | 300 | 關閉彈出框的速度，單位是ms |
| closeButton | true | 如果為false, 將會隱藏 關閉 按鈕 |
(2)尺寸相關
| ?參數 | ?默認值 | ?作用 |
| ? width | ? false | ?設置彈出框的寬度,包括彈出框的borders 和 button |
| ? height | ? false | ?設置彈出框的高度帶,包括彈出框的borders 和 button |
| ? innerWidth | ? false | ?設置彈出框的內部的寬度，（不包括彈出框的borders 和 button） |
| ? innerHeight | ? false | ?設置彈出框的內部的高度，（不包括彈出框的borders 和 button） |
| ? initialWidth | ? 300 | ?在內容還沒展示時，彈出框默認的寬度 |
| ? initialHeight | ? 100 | ?在內容還沒展示時，彈出框默認的高度 |
| ? maxWidth | ? false | ?設置一個加載內容的最大寬度。例如：“100%”，500，“500px” |
| ? maxHeight | ? false | ?設置一個加載內容的最大高度。例如：“100%”，500，“500px”< |
(3)位置相關
| ?參數 | ?默認值 | ?作用 |
| ? fixed | ? false | ?如果為true,彈出框 將 顯示在一個固定的位置 |
| ? top | ? false | ?設置彈出框的top屬性 |
| ? bottom | ? false | ?設置彈出框的bottom屬性 |
| ? left | ? false | ?設置彈出框的left屬性 |
| ? right | ? false | ?設置彈出框的right屬性 |
| ? reposition | ? true | ?重新加載color box的屬性當觸發了window的resize事件 |
(4)加載內容的type
| ?參數 | ?默認值 | ?作用 |
| ? iframe | ? false | ?如果為true,加載的內容將以iframe的方式呈現 |
| ? inline | ? false | ?;如果為true,將從本頁面提取 content, href指定元素的selector $(“#inline”).colorbox({inline:true, href:”#myForm”}); |
| ? html | ? false | ?將加載這里指定的html內容 $.colorbox({html:” <p>Hello </p>”}); |
| ? photo | ? false | ?如果為true,將會以photo的方式加載內容 當照片自動檢測失敗時才需要使用這個參數，(如href是”photo.php”而不是”photo.jpg”,自動檢測就會失敗) |
| ? ajax | ? | ?—blog主也沒翻譯過來，自行腦補吧— |
(5)一些callback函數定義
| ?參數 | ?默認值 | ?作用 |
| ? onOpen | ? false | ?當彈出框要即將要open的時候觸發 |
| ? onLoad | ? false | ?當彈出框在load內容的時候觸發 |
| ? onComplete | ? false | ?當彈出內容加載完畢的時候觸發 |
| ? onCleanup | ? false | ?當彈出框要即將要close的時候觸發 |
| ? onClosed | ? false | ?當彈出框close之后的時候觸發 |
可以用以下代碼嘗試一些加載的事件
$(".callbacks").colorbox({? onOpen:function(){?alert('onOpen: --ifxoxo.com');?},
? onLoad:function(){?alert('onLoad: ?--ifxoxo.com');?},
? onComplete:function(){?alert('onComplete: --ifxoxo.com');?},
? onCleanup:function(){?alert('onCleanup: ?--ifxoxo.com');?},
? onClosed:function(){?alert('onClosed: ?--ifxoxo.com');?}
});
還有其他 Slideshow 和 Retina Images的參數，具體查看官網。
6、color box的方法
| ?參數 | ?作用 |
| ? next() | ?翻開Next的內容 |
| ? prev() | ?翻開prev的內容 |
| ? close() | ?關閉彈出框 |
| ? element() | ?獲取當前的html element |
| ? resize() | ?重新加載彈出框的長寬高 |
| ? remove() | ?去掉當前元素的colorbox事件 |
例子：
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試colorbox插件</title>{#需要引入js、css文件#}<script src="{% static "components/jquery/dist/jquery.js" %}"></script><script type="text/javascript" src="{% static "ace_source/components/jquery-colorbox/jquery.colorbox.min.js" %}"></script>{#提供example(1~5)種樣式#}<link rel="stylesheet" href="{% static "ace_source/components/jquery-colorbox/example1/colorbox.css" %}"/> </head> <body> <a title="圖片1" href="http://img1.360buyimg.com/da/jfs/t1/9760/30/2437/82328/5bd27862Ef32f4f19/7f9d55580263eed8.jpg" data-rel="colorbox">放大圖片</a> <a title="圖片2" href="http://m.360buyimg.com/babel/jfs/t1/17230/3/997/97174/5c0e3760E1f8e39b1/dac2cec089ccd5c0.jpg" data-rel="colorbox">放大圖片</a> </body> </html> <script>$('[data-rel="colorbox"]').colorbox({rel: 'group_1', //分組transition: "elastic", //彈出窗口的方式，支持”elastic”, “fade”, “none”speed: 350, //彈出速度open: false, //自動打開slideshow: true, //輪播方式reposition: true,scalePhotos: true,scrolling: false,//滑動previous:"pre",//上一頁文本next:"next", //下一頁文本close:"關閉",//關閉文本escKey:true,//esc關閉closeButton: true,//關閉按鈕current: '{current} of {total}', //組計數器。{current}和{total}為當前頁和總數頁maxWidth: '50%',maxHeight: '50%',onOpen: function () {$overflow = document.body.style.overflow;document.body.style.overflow = 'hidden';},onClosed: function () {document.body.style.overflow = $overflow;},onComplete: function () {$.colorbox.resize();}}); </script>?
轉載于:https://www.cnblogs.com/konglingxi/p/10123675.html
總結
以上是生活随笔為你收集整理的内容播放colorbox的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RecycleView 删除指定item
- 下一篇： 测试基础-测试的定义及原则？