HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 查看内容

支持移动端缩略图的jQuery幻灯片插件

2015-11-12 10:40| 发布者: html5cn| 查看: 1673| 评论: 0|来自: jQuery之家

摘要: photor.js是一款支持移动设备带缩略图的jQuery幻灯片插件。该幻灯片插件支持所有主流浏览器和移动设备,支持IE7以上的IE浏览器,只是在IE7-IE9浏览器中没有动画过渡效果。 ...

  简要教程

  photor.js是一款支持移动设备带缩略图的jQuery幻灯片插件。该幻灯片插件支持所有主流浏览器和移动设备,支持IE7以上的IE浏览器,只是在IE7-IE9浏览器中没有动画过渡效果。

 

查看演示     下载插件

  使用方法

  使用该幻灯片插件需要引入jQuery,photor.min.js和photor.min.css文件。

 

            


  HTML结构

  photor幻灯片基本的HTML结构如下:

  其中data-thumb是指向缩略图的路径。

 

  初始化插件

  在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该幻灯片插件。

         


  配置参数

$('.photor').photor({
 
    // General options
    current: 0,           // {Number}  开始slide的index
    duration: 300,        // {Number}  过渡动画的除锈时间
    loop: false,          // {Boolean} 是否无限循环
    slidesOnScreen: 1,    // {Number}  在viewport中可见的slides数量
 
    // Handlers
    single: false,        // {Boolean} Initialize event handlers if gallery contains only one photo?
    keyboard: true,       // {Boolean} 是否初始化键盘处理事件
 
    // Prefixes
    slideIdPrefix: '_',   // {String}  Prefix for class with slide index (e.g. "_12")
    ieClassPrefix: '_ie', // {String}  Prefix for class with IE version (e.g. "_ie8")
 
    // Classnames
    control: 'photor__viewportControl',
    next: 'photor__viewportControlNext',
    prev: 'photor__viewportControlPrev',
    thumbs: 'photor__thumbs',
    thumbsLayer: 'photor__thumbsWrap',
    thumb: 'photor__thumbsWrapItem',
    thumbImg: 'photor__thumbsWrapItemImg',
    thumbFrame: 'photor__thumbsWrapFrame',
    viewport: 'photor__viewport',
    layer: 'photor__viewportLayer',
    slide: 'photor__viewportLayerSlide',
    slideImg: 'photor__viewportLayerSlideImg',
 
    // State modifiers
    _loading: '_loading',       // Photo is loading
    _current: '_current',       // Current slide or thumbnail
    _dragging: '_dragging',     // Dragging in progress
    _disabled: '_disabled',     // Control element is disabled (e.g. left button on first slide)
    _alt: '_alt',               // For photos with an alt attribute
    _single: '_single',         // Gallery contains only one photo
    _animated: '_animated',     // Animation in progress
    _hidden: '_hidden',         // Slide is hidden
 
    // Algorithm
    _auto: '_auto',             // Photo is larger than viewport
    _center: '_center',         // Photo is smaller than viewport
 
    // Orientation
    _portrait: '_portrait',     // [image width/image height] < [gallery width/gallery height]
    _landscape: '_landscape',   // [image width/image height] >= [gallery width/gallery height]
 
    // Thumbs
    _draggable: '_draggable',   // Dragging is allowed for thumbnails
 
    // Transition callback
    onShow: function() {}
 
});                


  方法

  注意:一些方法使用galleryId作为第一个参数。这样允许你在一个页面中使用多个不同的幻灯片实例。

  init:初始化Photor。参数:options {Object}:初始化参数。

  update:重新计算幻灯片的大小和位置。无参数。

  destroy:销毁单个实例或所有实例。参数:galleryId {String|Number}:可选。

  handlers:设置当前幻灯片实例的处理程序。参数:galleryId {String|Number}。

  go:跳转到指定的slide。参数:galleryId {String|Number};target {Number}:目标slide的index;duration {Number}:过渡的持续时间,可选。

  next:跳转到下一个slide。参数:galleryId {String|Number}。

  prev:跳转到前一个slide。参数:galleryId {String|Number}。

  loadSlides:Loads photos before and after the specified slide。参数:galleryId {String|Number};target {Number}:目标slide的index。

  loadSlide:加载一张图片。参数:galleryId {String|Number};target {Number}:目标slide的index。

 

  推荐插件:Unite Gallery是一款功能强大的多用途响应式视频和图片画廊jQuery插件。它使用模块化技术,使用简单,易于定制。你可以通过CSS来改变画廊的皮肤,甚至可以自定义主题样式。它还支持移动触摸,支持图片缩放等。

 

   来源jQuery之家


鲜花

握手

雷人

路过

鸡蛋
更多

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-27 08:11

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部