海南苯概企业管理有限公司

0712-2888027 189-8648-0214
微信公眾號

孝感風信網(wǎng)絡科技有限公司微信公眾號

當前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > jQuery imgBox一款圖片點擊放大瀏覽插件

jQuery imgBox一款圖片點擊放大瀏覽插件

時間:2018-10-25來源:風信官網(wǎng) 點擊: 2553次
jQuery imgBox一款圖片點擊放大瀏覽插件,點擊圖片,彈出瀏覽窗口,就可以批量瀏覽,演示效果截圖如下:
 
項目地址:https://github.com/tsi/jQuery.imgBox
 
下載地址:https://github.com/tsi/jQuery.imgBox/zipball/master

jQuery imgBox一款圖片點擊放大瀏覽插件
 
引入文件
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="imgBox/jquery.imgbox.js"></script>
<link rel="stylesheet" href="imgBox/imgbox.css" />
 
對html中a標簽進行圖片集合瀏覽,給<a>標簽的title添加內(nèi)容,會在彈窗中顯示
 
<a title="Lorem ipsum dolor sit amet" href="big_image1.jpg"><img src="thumb1.jpg"/></a>
<a title="Consectetur adipiscing elit" href="big_image2.jpg"><img src="thumb2.jpg"/></a>
<a title="Vivamus tincidunt massa in turpis" href="big_image3.jpg"><img src="thumb3.jpg"/></a>
 
JQuery控制代碼:
 
$("a").imgbox();
 
參數(shù)選項:
 
$("a").imgbox({
  padding: 10,               // Set the padding/transparent border around the image.
  border: 2,                 // Set the solid border around the image.
  alignment: 'center',       // Position - may be auto OR center.
  allowMultiple: false,      // Allow opening multiple imgBoxes.
  autoScale: true,           // Scale the image to fit the available space.
  speedIn: 500,              // Set the zoom-in speed.
  speedOut: 500,             // Set the zoom-out speed.
  easingIn: 'swing',         // Set the zoom-in animation easing.
  easingOut: 'swing',        // Set the zoom-out animation easing.
  zoomOpacity: false,        // If true, changes image transparency when zooming.
  overlayShow: true,         // Display an overlay under the imgBox.
  overlayOpacity: 0.7,       // Set overlay opacity.
  hideOnOverlayClick: true,  // Hide imgBox when the overlay is clicked.
  hideOnContentClick: false, // Hide imgBox when the image is clicked.
  slideshow: true,           // Display next/previous controls.
  theme: 'light'             // Choose a color scheme (light/black).
});
 
參數(shù)的含義:
 
padding:彈窗中圖片的邊框,0為沒有邊框。
alignment:彈窗的位置,“auto”或“center”,默認情況下,它從縮略圖所在方向擴展彈窗
allowMultiple:如果選true,允許多個彈出窗口同時打開
autoScale:如果為true,彈窗會自適應窗口的大小
speedIn、speedOut:打開彈窗和關(guān)閉彈窗的速度,單位:毫秒
zoomOpacity:如果為true,會在彈窗縮放時改變透明度
overlayShow:如果為true,會有遮罩層(默認為false;遮罩層的顏色在css中設置)
overlayOpacity:遮罩層的透明度(取值范圍0~1)
hideOnOverlayClick:當點擊遮罩層時,關(guān)閉彈窗
hideOnContentClick:當點擊圖片時,關(guān)閉彈窗 
熱門關(guān)鍵詞: jQuery imgBox 圖片點擊放大 瀏覽插件
欄目列表
推薦內(nèi)容
熱點內(nèi)容
展開
板桥市| 禹城市| 甘泉县| 扎兰屯市| 鄂尔多斯市| 司法| 洪江市| 光泽县| 新余市| 嘉祥县| 衡水市| 开封县| 简阳市| 肥东县| 重庆市| 绥宁县| 黔东| 浦东新区| 瓮安县| 吴桥县| 宣威市| 大庆市| 五华县| 织金县| 霸州市| 邵阳县| 慈溪市| 嫩江县| 阿荣旗| 元江| 新化县| 南部县| 宝坻区| 黄浦区| 庄浪县| 金华市| 门源| 揭西县| 共和县| 阳东县| 房山区|