注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

动感的jquery灯箱画廊插件lightgallery

媒体 fishcity 1414浏览

jquery灯箱画廊插件lightgallery

jQuery lightgallery是一款可显示图像和视频的轻量级的灯箱画廊jquery插件,lightgallery具有非常动感的动画效果,在网页上它只是显示一个图片的列表,当用鼠标点击后便弹出全屏窗口,图片以幻灯片的形式切换,正下方的按钮可切换出图片画廊,可快速切换到目标图片,当然,把图片换成视频照样能用。下面来看下lightgallery的特点

  1. 响应布局。

  2. 支持移动设备、触摸屏。

  3. jQuery后备支持CSS转换效果

  4. 支持YouTube,Vimeo视频

  5. 滑动、淡入淡出效果

  6. 支持Chrome,Safari,Firefox,Opera,IE7 +,iOS,Android,Windows Phone。

  7. 支持图像带标题和描述

  8. 在同一页可调用多个画廊

  9. 通过CSS设置轻松定义

  10. 轻量级的插件,文件小

  11. 支持缩略图

  12. 移动设备可单独展示图像

  13. 可扩展的回调

  14. 智能图像预压和代码优化

  15. 台式键盘导航

  16. 支持字体图标

如何使用jQuery lightgallery?

引入核心文件,将下面的代码添加到文档的<head>区。

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />                    
<script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightGallery.js"></script>
// 不要同时引入 lightGallery.js 和 lightGallery.min.js,只需引入其中一个就OK了

构建html

建立ul和li标签元素,并加入图片或视频,在您想在画廊中显示的图片或视频上加上属性data-src,并把文件的路径赋于属性。

<ul id="lightGallery">
  <li data-src="img/img1.jpg">
    <img src="img/thumb1.jpg" />
  </li>
  <li data-src="img/img2.jpg">
    <img src="img/thumb2.jpg" />
  </li>
  ...
</ul>

调用lightGallery!

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightGallery").lightGallery(); 
  });
</script>

参数设置

$(document).ready(function() {
    $("#lightGallery").lightGallery({
      // Elements
      thumbnail   : true,  // Whether to display a button to show thumbnails.
      caption     : false, // Enables image captions. Content is taken from "data-title" attribute.
      captionLink : false, // Makes image caption a link. URL is taken from "data-link" attribute.
      desc        : false, // Enables image descriptions. Description is taken from "data-desc" attr.
      counter     : false, // Shows total number of images and index number of current image.
      controls    : true,  // Whether to display prev/next buttons.
  
      // Transitions
      mode   : 'slide',  // Type of transition between images. Either 'slide' or 'fade'.
      useCSS : true,     // Whether to always use jQuery animation for transitions or as a fallback.
      easing : 'linear', // Value for CSS "transition-timing-function" prop. and jQuery .animate().
      speed  : 1000,     // Transition duration (in ms).
  
      // Navigation
      hideControlOnEnd : false, // If true, prev/next button will be hidden on first/last image.
      loop             : false, // Allows to go to the other end of the gallery at first/last img.
      auto             : false, // Enables slideshow mode.
      pause            : 4000,  // Delay (in ms) between transitions in slideshow mode.
      escKey           : true,  // Whether lightGallery should be closed when user presses "Esc".
  
      // Mobile devices
      mobileSrc         : false, // If "data-responsive-src" attr. should be used for mobiles.
      mobileSrcMaxWidth : 640,   // Max screen resolution for alternative images to be loaded for.
      swipeThreshold    : 50,    // How far user must swipe for the next/prev image (in px).
  
      // Video
      vimeoColor    : 'CCCCCC', // Vimeo video player theme color (hex color code).
      videoAutoplay : true,     // Set to false to disable video autoplay option.
      videoMaxWidth : 855,      // Limits video maximal width (in px).
  
      // i18n
      lang : { allPhotos: 'All photos' }, // Text of labels.
  
      // Callbacks
      onOpen        : function() {}, // Executes immediately after the gallery is loaded.
      onSlideBefore : function() {}, // Executes immediately before each transition.
      onSlideAfter  : function() {}, // Executes immediately after each transition.
      onSlideNext   : function() {}, // Executes immediately before each "Next" transition.
      onSlidePrev   : function() {}, // Executes immediately before each "Prev" transition.
      onBeforeClose : function() {}, // Executes immediately before the start of the close process.
      onCloseAfter  : function() {}, // Executes immediately once lightGallery is closed.
  
      // Dynamical load
      dynamic   : false, // Set to true to build a gallery based on the data from "dynamicEl" opt.
      dynamicEl : [],    // Array of objects (src, thumb, caption, desc, mobileSrc) for gallery els.
  
      // Misc
      rel          : false, // Combines containers with the same "data-rel" attr. into 1 gallery.
      exThumbImage : false, // Name of a "data-" attribute containing the paths to thumbnails.
    });
  });

转载请注明:jQ酷 » 动感的jquery灯箱画廊插件lightgallery

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。