jQuery imgBox一款圖片點(diǎn)擊放大瀏覽插件，點(diǎn)擊圖片，彈出瀏覽窗口，就可以批量瀏覽，演示效果截圖如下：
項(xiàng)目地址：https://github.com/tsi/jQuery.imgBox
下載地址：https://github.com/tsi/jQuery.imgBox/zipball/master
引入文件
<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標(biāo)簽進(jìn)行圖片集合瀏覽，給<a>標(biāo)簽的title添加內(nèi)容，會(huì)在彈窗中顯示
<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ù)選項(xiàng)：
$("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”，默認(rèn)情況下，它從縮略圖所在方向擴(kuò)展彈窗
allowMultiple：如果選true，允許多個(gè)彈出窗口同時(shí)打開
autoScale：如果為true，彈窗會(huì)自適應(yīng)窗口的大小
speedIn、speedOut:打開彈窗和關(guān)閉彈窗的速度，單位：毫秒
zoomOpacity：如果為true，會(huì)在彈窗縮放時(shí)改變透明度
overlayShow：如果為true，會(huì)有遮罩層（默認(rèn)為false；遮罩層的顏色在css中設(shè)置）
overlayOpacity:遮罩層的透明度（取值范圍0~1）
hideOnOverlayClick：當(dāng)點(diǎn)擊遮罩層時(shí)，關(guān)閉彈窗
hideOnContentClick：當(dāng)點(diǎn)擊圖片時(shí)，關(guān)閉彈窗
鄂公網(wǎng)安備 42090202000212號