0
点赞
收藏
分享

微信扫一扫

jQuery插件——imgbox(点击图片查看大图)

西特张 2023-03-26 阅读 56


做个简单的记录。

场景:列表页展示图片,缩略图。点击图片,需要展示对应的大图。

 

<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


举报

相关推荐

0 条评论