jquery的图片播放插件 - colorbox
Jquery的一個輕量的，可自定義的 lightbox 插件。?
二. 為什么選擇Colorbox?
- 支持圖片，圖片組，圖片滑動觀看，ajax,行內元素和iframe內容
- 十分輕量，只有不到9KB大小
- 外觀可以通過CSS進行控制
- 可以直接覆蓋ColorBox的行為設置而不用改ColorBox的JS文件
- 可以直接加上回調函數和事件鉤子而不用更改它的源代碼
- 非入侵式操作，選項可以在JS中設置而不用更改HTML
- 可以預載背景圖片和圖片組中的圖片
- 用Jquery插件格式編寫，可以使用鏈式操作
- 語法通過W3C和XHTML認證，沒有添加JS的全局變量
- 在 MIT License下發布 ?（這個我也不懂）
colorbox()函數使用一堆key/value對象和一個可選的callback函數
格式：$('selector').colorbox({key:value}, callback);
例子： $('a.gallery').colorbox({transition:'fade', speed:500});
還是例子：$('button').colorbox({href:"thankyou.html"});
四.注意事項：
1,flash覆蓋colorbox:
這不是colorbox本身的問題，flash默認會覆蓋所有的HTML內容，你可以設置wmode參數為transparent來避免這個問題。
2,colorbox在ie中的位置和行為異常:
這有可能是doctype（DTD）問題。colorbox需要有個有效的DTD聲明，否則瀏覽器會以怪異模式（quirks mode,在標準模式中，瀏覽器根據W3C所定的規范來顯示頁面；而在怪異模式中，頁面將以IE5，甚至IE4的顯示頁面的方式來表現，以保持以前的網 頁能正常顯示）呈現網頁內容。務必使用正確的DTD聲明來確保瀏覽器以標準模式呈現網頁。?
下面這段聲明會將IE瀏覽器設定成怪異模式
Html代碼
這段帶有URI的聲明可以將所有瀏覽器設定到標準模式
Html代碼
3,colorbox的位置和行為異常（不區分瀏覽器）:
這可能是源文件引用順序錯誤導致的。JQuery和colorbox.css必須在jquery.colorbox.js之前引入，并且應該在JQuery的ready方法中調用colorbox，并且此調用要在引入jquery.colorbox.js之后
4,用colorbox顯示外部文檔時顯示不正確:
這是由于沒有將iframe參數設為true。默認的方式只能正確顯示可以在body標簽中存在的內容。
如果你想顯示一個完整的html文檔（包括<html>、<head>和<body>等標簽），那么要是用iframe參數。并且要設定高度和寬度，因為colorbox無法得知位于iframe內的網頁內容的寬高。
另外，如果你想載入一段位于相同域名下的另一個文檔的部分內容，可以使用下面的方法
Js代碼
$(‘#example’).colorbox({href:”document.html div#content”});?
5,在ie中colorbox的邊框不顯示:
colorbox中提供的例子中有些使用了png圖片的透明度效果。IE6不支持alpha透明度，并且在IE7和IE8中也會出現黑底的效果。colorbox使用IE的css濾鏡解決了這個問題，你可以再colorbox.css文件中看到這些代碼。在例子中使用了相對路徑，但用戶將colorbox應用到自己的網站時經常更改image文件夾相對于css的路徑。濾鏡的路徑也需要有相應的變動。請看下面的例子，假設你的images文件夾位于根目錄下。
在css文件中使用了錯誤的相對路徑:
Html代碼
正確的路徑:
Html代碼
正確的絕對路徑:
Html代碼
6,嘗試載入外部頁面卻獲得”Request unsuccessful”的報錯信息
這可能是因為你嘗試載入一個無效的URL或者ajax的方式載入其他域名下的文件。由于瀏覽器的限制，ajax方式必須載入與其在同一域名下的文件。并且ajax需要有服務器支持，如果本地測試必須安裝apache服務。
7,如何通過rel屬性關閉colorbox的群組功能
Js代碼
8,JavaScript/jQuery 在colorbox中不工作?
這多數是因為在元素還沒有載入到文檔中時就嘗試訪問它，解決的方法是將這些js代碼應道到colorbox的onComplete調用中。
例如： (使用 jQuery Forms 插件:
Js代碼
9,在iframe外面打開colorbox
任何在iframe中打開的內容都會被限制在iframe中，除非你將colorbox放到它的上一級窗口中。你可以從iframe中返回parent窗口打開colorbox。
Js代碼
這種方法不能用于group方式，因為parent文檔無法訪問iframe里的內容，也就無法訪問內部元素的rel屬性。
colorbox 彈出窗口，但是沒有內容
添加屬性：transition: "elastic", 即可，理由不明。
?
1) 引入css：
2)引入js：
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
3)html代碼：
<ul class="ace-thumbnails"><c:forEach items="${attach_sb }" var="item"><li><a href="<%=base %>/work/file/viewFull/${item.id }.do?<span style="background-color: rgb(255, 0, 0);">.jpg</span>" data-rel="colorbox"><img src="<%=base %>/work/file/view/${item.id }.do" /></a></li></c:forEach></ul><span style="background-color: rgb(255, 0, 0);">.jpg</span>
特別注意下：這里必須以圖片格式結尾 ? ? ? ? ? ? ??
4）jquery寫入：
jQuery(function($) {var colorbox_params = {reposition:true,scalePhotos:true,scrolling:false,previous:'<i class="icon-arrow-left"></i>',next:'<i class="icon-arrow-right"></i>',close:'×',current:'{current} of {total}',maxWidth:'100%',maxHeight:'100%',slideshow:true,slideshowStart:'start',slideshowStop:'stop',onOpen:function(){document.body.style.overflow = 'hidden';},onClosed:function(){document.body.style.overflow = 'auto';},onComplete:function(){$.colorbox.resize();}};$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);$("#cboxLoadingGraphic").append("<i class='icon-spinner orange'></i>");//let's add a custom loading icon })
總結
以上是生活随笔為你收集整理的jquery的图片播放插件 - colorbox的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pytorch中维度dim的理解
- 下一篇： GAE(Generalized Adva