做个简单的记录。
场景:列表页展示图片,缩略图。点击图片,需要展示对应的大图。
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" /> <a class="zoom" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
$("a.zoom").imgbox();
$("a.zoom").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});
Here is the complete usable settings list
padding Padding around full image
alignment Position of the full image in the client, either 'auto' or 'center'. By default it expands equally in all directions from the thumbnail
allowMultiple Allow more than one popup to be open at the same time
autoScale If true, images are scaled to fit in viewport
speedIn Speed in milliseconds of the zooming-in animation
(fading if set to 0)
speedOut Speed in milliseconds of the zooming-out animation
(fading if set to 0)
easingIn, easingOut Easing used for animations
zoomOpacity If true, changes image transparency when zooming
overlayShow If true, shows the overlay (false by default)
Overlay color is defined in CSS file
overlayOpacity Opacity of overlay (from 0 to 1)
hideOnOverlayClick Hides popup when clicked on overlay
hideOnContentClick Hides popup when clicked on full image
参考链接:http://www.htmldrive.net/items/show/390/jQuery-Plugin-imgBox-lightbox-image.html