LC Lightbox是一款强大的图片画廊式jquery Lightbox插件。LC Lightbox采用响应式设计,功能强大,支持移动手机,支持缩略图等,是现代网页设计的首选lightbox插件。LC Lightbox插件的特点还有:
- 支持单张图片或图片画廊模式。
- 支持图片预加载。
- 内置light、dark 和 minimal三种主题样式。
- 可定制缩略图导航。
- 支持分享和下载图片。
- 支持全屏模式。
- 支持移动手机的滑动和桌面浏览器的鼠标滚轮事件。
- 提供大量的配置参数可供使用。
使用方法
在页面中引入jquery和lc_lightbox.lite.js文件,以及样式文件lc_lightbox.css。在三种主题中选择一种来使用,引入相应的css文件。
伪类支持移动设备的手指滑动事件,还需要引入AlloyFinger插件。
<link rel="stylesheet" href="path/to/lc_lightbox.css"> <link rel="stylesheet" href="path/to/skins/dark.css"> <!-- 或者 --> <!-- <link rel="stylesheet" href="path/to/skins/light.css"> <link rel="stylesheet" href="path/to/skins/minimal.css"> --> <script src="path/to/jquery.min.js"></script> <script src="path/to/lc_lightbox.lite.js"></script> <script src="path/to/alloy_finger.min.js"></script>
HTML结构
该LC Lightbox插件的基本HTML结构如下:
<a class="elem" href="large1.jpg" title="image 1" data-lcl-txt="Description 1" data-lcl-author="Author 1" data-lcl-thumb="thumb1.jpg"> <span style="background-image: url(thumb1.jpg);"></span> </a> <a class="elem" href="large2.jpg" title="image 2" data-lcl-txt="Description 2" data-lcl-author="Author 2" data-lcl-thumb="thumb2.jpg"> <span style="background-image: url(thumb2.jpg);"></span> </a> <a class="elem" href="large1.jpg" title="image 3" data-lcl-txt="Description 3" data-lcl-author="Author 3" data-lcl-thumb="thumb3.jpg"> <span style="background-image: url(thumb3.jpg);"></span> </a>
其中,data-lcl-txt
是图片的描述信息。data-lcl-author
是图片的作者信息。data-lcl-thumb
是缩略图的路径。
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery Lightbox插件。
$(document).ready(function() { lc_lightbox('.elem', { wrap_class: 'lcl_fade_oc', gallery : true, thumb_attr: 'data-lcl-thumb', skin: 'dark' }); });
配置参数
LC Lightbox插件的所有可用配置参数如下,具体请参考官方说明文档。
lc_lightbox('.elem', { // whether to display a single element or compose a gallery gallery : true, // attribute grouping elements - use false to create a gallery with all fetched elements gallery_hook : 'rel', // if a selector is found, set true to handle automatically DOM changes live_elements : true, // whether to preload all images on document ready preload_all : false, // force elements type global_type : 'image', // attribute containing element's source src_attr : 'href', // attribute containing the title - is possible to specify a selector with this syntax: "> .selector" or "> span" title_attr : 'title', // attribute containing the description - is possible to specify a selector with this syntax: "> .selector" or "> span" txt_attr : 'data-lcl-txt', // attribute containing the author - is possible to specify a selector with this syntax: "> .selector" or "> span" author_attr : 'data-lcl-author', // whether to enable slideshow slideshow : true, // animation duration for lightbox opening and closing / 1000 = 1sec open_close_time : 500, // overlay's animation advance (on opening) and delay (on close) to window / 1000 = sec ol_time_diff : 100, // elements fading animation duration in millisecods / 1000 = 1sec fading_time : 150, // sizing animation duration in millisecods / 1000 = 1sec animation_time : 300, // slideshow interval duration in milliseconds / 1000 = 1sec slideshow_time : 6000, // autoplay slideshow - bool autoplay : false, // whether to display elements counter counter : false, // whether to display a progressbar when slideshow runs progressbar : true, // whether to create a non-stop pagination cycling elements carousel : true, // Lightbox maximum width. // Use a responsive percent value or an integer for static pixel value max_width : '93%', // Lightbox maximum height. // Use a responsive percent value or an integer for static pixel value max_height : '93%', // overlay opacity / value between 0 and 1 ol_opacity : 0.7, // background color of the overlay ol_color : '#111', // overlay patterns - insert the pattern name or false ol_pattern : false, // width of the lightbox border in pixels border_w : 3, // color of the lightbox border border_col : '#ddd', // width of the lightbox padding in pixels padding : 10, // lightbox border radius in pixels radius : 4, // whether to apply a shadow around lightbox window shadow : true, // whether to hide page's vertical scroller remove_scrollbar: true, // custom classes added to wrapper - for custom styling/tracking wrap_class : '', // light / dark / Minimal skin : 'light', // over / under / lside / rside data_position : 'over', // inner / outer cmd_position : 'inner', // set closing button position for inner commands - normal/corner ins_close_pos : 'normal', // set arrows and play/pause position - normal/middle nav_btn_pos : 'normal', // whether to hide texts on lightbox opening - bool or int (related to browser's smaller side) txt_hidden : 500, // bool / whether to display titles show_title : true, // bool / whether to display descriptions show_descr : true, // bool / whether to display authors show_author : true, // enables thumbnails navigation (requires elements poster or images) thumbs_nav : true, // print type icons on thumbs if types are mixed tn_icons : true, // whether to hide thumbs nav on lightbox opening - bool or int (related to browser's smaller side) tn_hidden : 500, // width of the thumbs for the standard lightbox thumbs_w : 110, // height of the thumbs for the standard lightbox thumbs_h : 110, // attribute containing thumb URL to use or false to use thumbs maker thumb_attr : false, // script baseurl to create thumbnails (use src=%URL% w=%W% h=%H%) thumbs_maker_url: false, // Allow the user to expand a resized image. true/false fullscreen : true, // resize mode of the fullscreen image - smart/fit/fill fs_img_behavior : 'fit', // when directly open in fullscreen mode - bool or int (related to browser's smaller side) fs_only : 500, // whether to trigger or nor browser fullscreen mode browser_fs_mode : true, // bool socials : true, // bool / allow text hiding txt_toggle_cmd : true, // bool / whether to add download button download : true, // bool / Allow touch interactions for mobile (requires AlloyFinger) touchswipe : true, // bool / Allow elements navigation with mousewheel mousewheel : true, // enable modal mode (no closing on overlay click) modal : false, // whether to avoid right click on lightbox rclick_prevent : false });
LC Lightbox-jquery Lightbox插件的github地址为:https://github.com/LCweb-ita/LC-Lightbox-LITE
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!