AD
当前位置:首页 > JS代码 > 焦点图

jquery灯箱画廊插件lightgallery

所属栏目:焦点图更新时间:2016-11-05来源:作者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

主要特点

        响应布局。

        移动设备支持触摸。

        CSS与jQuery的转换后备

        YouTube,Vimeo视频支持

        滑动、淡入淡出效果

        Chrome,Safari,Firefox,Opera,IE7 +,iOS,Android,Windows Phone。

        图像的标题和描述

        在同一页的多个滑块

        容易定制通过CSS和设置

        轻量级的(程序)(小)

        缩略图的支持

        用于移动设备的单独的图像

        可扩展的回调

        智能图像预压和代码优化

        台式键盘导航

        字体图标的支持

        双语对照


如何使用lightgallery?

代码

将下面的代码添加到您的文档的<head>。

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />                    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightGallery.js"></script>// Do not include both lightGallery.js and lightGallery.min.js

调用lightgallery

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

设置

<script type="text/javascript">
  $(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.    
      });
  });
</script>




具体效果请看演示,一流资源网推荐下载。

标签:
代码下载(0)
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery轮播焦点图

5jquery灯箱画廊插件lightgallery

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1360影视网站jQuery焦点图代码

2支持上下左右切换的全屏jQuery焦点图代码

3贴吧客户端jQuery焦点图代码

4自适应全屏宽屏JS幻灯片代码

5QQ画卷中国优秀的jQuery焦点图代码

6暴风影音TAB式的jQuery焦点图

7网易娱乐频道多图flash焦点图

8淘宝男人画报单屏双图JS焦点图代码

9SuperSlide坚向商城分类导航特效

10Jquery全屏BANNER焦点图代码/幻灯片代码 - SuperSlide