colorbox去除close关闭按钮,附上colorbox的基本使用方法
要去除colorbox的關閉按鈕,網上找了好多資料,都沒找到其中用設置close參數的方式來解決,有找到的麻煩告訴我聲,然后只好在onload事件中將這按鈕remove或者hide()掉,代碼如下:?
?$('selector').colorbox({onLoad:function(){
? ? $('#cboxClose').remove();}});
?
$(".class_name").colorbox({innerWidth:500, innerHeight:400, iframe:true, escKey:false, overlayClose:false,onLoad: function() {? ? $('#cboxClose').remove();
}});?
?
?
另附上colorbox的使用方法:
?
ColorBox是一個基于jQuery 1.3 的輕量級,自定義燈箱插件,功能非常強大,支持圖片,圖片組,ajax,inline和iframed內容,燈箱樣式完全由用戶控制,可自定義CSS樣 式,不需要改寫ColorBox庫文件就能重寫展示效果設置,支持加載預處理提示等等,效果圖如下:
使用說明
1,jQuery 1.3庫文件
2,colorbox 庫文件
3,燈箱效果CSS樣式文件
使用實例如下:
一,使用ColorBox燈箱顯示一張圖片和圖片組
(1)js部分
$.fn.colorbox.settings.transition?= "fade";
$.fn.colorbox.settings.bgOpacity?= "0.9";
$.fn.colorbox.settings.contentCurrent?= "image {current} of {total}";
$(".cpModal").colorbox();
transition設置ColorBox燈箱的過渡效果,如上:fade
bgOpacity設置ColorBox燈箱的背景透明度,如上:0.9
contentCurrent設置ColorBox燈箱的當前圖片,如上:image {current} of {total}
(2)HTML部分
<p><a class="cpModal" href="marylou.jpg" >單張圖片</a></p>
<p><a class="cpModal" href="biuuu1.jpg" >圖片組1</a></p>
<p><a class="cpModal" href="biuuu2.jpg" >圖片組2</a></p>
<p><a class="cpModal" href="biuuu3.jpg" >圖片組3</a></p>
二,使用ColorBox燈箱顯示ajax加載HTML頁面
(1)js部分
$("#ajax").colorbox({contentWidth:"300px",?contentHeight:"195px"});
contentWidth設置ColorBox燈箱的內容寬度,如上:300px
contentHeight設置ColorBox燈箱的內容高度,如上:195px
(2)HTML部分
<p><a id="ajax" href="ajax.html">Ajax HTML</a></p>
ajax.html表示加載的html頁面,
三,使用ColorBox燈箱顯示flash頁面效果
(1)js部分
$("#flash").colorbox({contentAjax:"flash.html"});
(2)HTML部分
<p><a id="flash" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p>
四,使用ColorBox燈箱顯示Inline HTML效果
(1)js部分
$("#inline").colorbox({contentWidth:"500px",?contentInline:"#inline-content"});
contentInline設置ColorBox燈箱的inline內容
(2)HTML部分
<p><a id="inline" href="#">Inline HTML</a></p>
<div style="display:none">
<div id="inline-content">
<div style="padding:10px">
<p>必優博客</p>
<p>www.biuuu.com</p>
</div>
</div>
</div>
五,使用ColorBox燈箱顯示Iframed框架內容效果
(1)js部分
$("#google").colorbox({contentWidth:"750px",?contentHeight:"450px", contentIframe:true});
contentIframe設置ColorBox燈箱的內容是否為框架
(2)HTML部分
<p><a id="google" href="http://www.google.com">Iframed內容</a></p>
ColorBox燈箱配置如下:
transition?'elastic' 表示燈箱過渡效果,可選"elastic" or "fade"
transitionSpeed??? 350 表示燈箱過渡效果展示的速度
initialWidth??? 300 表示燈箱初始化寬度
initialHeight??? 100 表示燈箱初始化高度
contentWidth??? false 表示是否設置一個固定的寬度
contentHeight??? false 表示是否設置一個固定的高度
contentAjax??? false 表示是否是一個ajax加載
contentInline??? false 表示是否是一個inline
contentIframe??? false 表示是否是一個iframe
bgOpacity?0.85 表示燈箱的背景透明度
preloading??? true 表示是否預加載
contentCurrent??? '{current} of {total}' 表示燈箱展示的當前圖片和總數
contentPrevious??? 'previous' 表示上一個錨,類似于rel屬性
contentNext??? 'next'??? 表示下一個錨,類似于rel屬性
modalClose??? 'close' 錨文本關閉鏈接,可選Esc或close
jQuery插件ColorBox彩盒使用非常簡單,可實現功能非常多,如彈出新窗口,彈出圖片,彈出框架等等,值得推薦。
介紹內容來自 http://www.biuuu.com/
transition | "elastic" | 過渡效果,可以是"elastic", "fade", or "none". |
speed | 350 | 設置過渡效果的持續時間,毫秒 |
| href | false | Example:$('h1').colorbox({href:"welcome.html"}) 這個用來設置一個錨標記的值或者一個不是錨的元素,例如圖像或者表單的按鈕,例如: |
| title | false | 這可以為Colorbox設置一個標題 |
| rel | false | Example:$('#example a').colorbox({rel:'group1'}) 這個可以根據元素的rel屬性設置要顯示的元素集合,也可以覆蓋一個存在的rel屬性 |
| width | false | Example: "100%", "500px", or 500 設置寬度,包括邊框和按鈕 |
| height | false | ?Example: "100%", "500px", or 500 設置高度,包括邊框和按鈕 |
| innerWidth | false | Example: "50%", "500px", or 500 這個可以設定一個固定的內大小,包括邊框和按鈕 |
| innerHeight | false | Example: "50%", "500px", or 500 這個可以設定一個固定的內高度,包括邊框和按鈕 |
| initialWidth | 300 | 設置初始化寬度 |
| initialHeight | 100 | 設置初始化高度 |
| maxWidth | false | ?Example: "100%", 500, "500px" 設置內容的最大寬度 |
| maxHeight | false | Example: "100%", 500, "500px" 設置內容的最大高度 |
| scalePhotos | true | 如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設置, Colorbox會縮放圖片以使用邊框 |
| scrolling | true | 如果是false,Colorbox不會為了溢出元素設置滾動條 |
| iframe | false | 如果是true,元素會在Iframe中顯示 |
| inline | false | Example:?$("#inline").colorbox({inline:true, href:"#myForm"}); 如果是true,jQuery選擇器可以用來選擇要顯示的元素。例如: |
| html | false | Example:? Hello '});這個是直接讓你顯示HTML代碼,例 |
| photo | false | 如果為true,ColorBox只會把元素按照圖片顯示,防止類似photo.php?pic=1這樣的連接被誤認為是網頁 |
| opacity | 0.85 | 遮罩層不透明度 從0-1之間取值 |
| open | false | 如果為true,ColorBox會自動開啟 |
| preloading | true | 如果為True,ColorBox會自動預載要顯示圖片 |
| overlayClose | true | 為true單擊遮罩層就可以把ColorBox關閉 |
| slideshow | false | 為True,會自動滾動圖片 |
| slideshowSpeed | 2500 | 設置時間,毫秒 |
| slideshowAuto | true | 為tuue,滑動會自動開始 |
| slideshowStart | "start slideshow" | 開始自動滑動按鈕的文本 |
| slideshowStop | "stop slideshow" | 停止自動滑動按鈕的文本 |
| current | "{current} of {total}" | 文本內容:現在正在顯示的元素序號 |
| previous | "previous" | “上一個”按鈕的文本 |
| next | "next" | “下一個”按鈕的文本 |
| close | "close" | “關閉”按鈕的文本 |
轉載于:https://www.cnblogs.com/zhiji6/archive/2012/05/08/2489555.html
總結
以上是生活随笔為你收集整理的colorbox去除close关闭按钮,附上colorbox的基本使用方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: oracle百度坐标系火星转换,标准坐标
- 下一篇: Zookeeper隐藏通道和羊群效应