Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。从图一中可以看成，图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。

▲图片一 Galleriffic图片画廊插件

　　Galleriffic的主要特点如下：

　　· Smart image preloading after the page is loaded

　　· Thumbnail navigation (with pagination)

　　· jQuery.history plugin integration to support bookmark-friendly URLs per-image

　　· Slideshow (with optional auto-updating url bookmarks)

　　· Keyboard navigation

　　· Events that allow for adding your own custom transition effects

　　· API for controlling the gallery with custom controls

　　· Support for image captions

　　· Flexible configuration

　　· Graceful degradation when javascript is not available

　　· Support for multiple galleries per page

　　下面，我们结合代码，来阐述Galleriffic的工作原理。

　　1. 下载最新版本的Galleriffic与jQuery。jQuery在1.3.2以上。

　　2. 在目标HTML代码中引入jQuery库与Galleriffic插件。两者的实现方式均为javascript。

<head>     ...     <script type="text/javascript" src="js/jquery-1.3.2.js"></script>     <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
    <!-- Optionally include jquery.history.js for history support -->     <script type="text/javascript" src="js/jquery.history.js"></script>     <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>     ... </head>

　　3. 添加容器元素Div。值得注意的是，这里所有的Div都是可选的。用户可以根据自己的实际情况做出取舍。

<div id="controls"></div><div id="loading"></div><div id="slideshow"></div><div id="caption"></div><div id="thumbs">     ... 这里用来放图片清单…(见步骤4) </div>

　　4. 建立图片清单列表

<div id="thumbs">     <ul class="thumbs noscript">         <li>             <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">                 <img src="path/to/thumbnail" alt="your image title again for graceful degradation"/>             </a>             <div class="caption">                 (这里用来放标题、描述等信息)             </div>         </li>         ... (接下的就是类似上面的li代码，一个li元素包含一张图片)     </ul></div>

　　5. 初始化插件

// 设置为-1时预加载所有图片         enableTopPager:         false,         enableBottomPager:      true,         imageContainerSel:      '', // 接下来的三个属性是作为容器的css名        controlsContainerSel:   '', // The CSS selector for the element within which the slideshow controls should be rendered        captionContainerSel:    '', // The CSS selector for the element within which the captions should be rendered        loadingContainerSel:    '', // The CSS selector for the element within which should be shown when an image is loading        renderSSControls:       true, // 是否显示播放与暂停按钮         renderNavControls:      true, // 是否显示前进后退按钮         playLinkText:           'Play',        pauseLinkText:          'Pause',        prevLinkText:           'Previous',        nextLinkText:           'Next',        nextPageLinkText:       'Next &rsaquo;',        prevPageLinkText:       '&lsaquo; Prev',        enableHistory:          false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes        autoStart:              false, // 是否自动播放         onChange:               undefined, // 接下来是插件的回调函数         onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { ... }         onTransitionIn:         undefined, // accepts a delegate like such: function() { ... }         onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { ... }         onPageTransitionIn:     undefined  // accepts a delegate like such: function() { ... }     });

JQuery开发之Galleriffic图片插件介绍的更多相关文章

  1. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  2. Android插件化开发之OpenAtlas生成插件信息列表

    上一篇文章.[Android插件化开发之Atlas初体验]( http://blog.csdn.net/sbsujjbcy/article/details/47446733),简单的介绍了使用Atla ...

  3. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

  4. iOS高效开发之Xcode应用插件

    前言:本文非原创 文章摘自 www.cocoachina.com/industry/20130918/7022.html    古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战 ...

  5. jquery 缓冲加载图片插件 jquery.lazyload

    第一:加入jquery 第二:加入jquery.lazy.load.js文件 第三:在网页中加<script> $(document).ready(function(){ $(" ...

  6. Android开发之IPC进程间通信-AIDL介绍及实例解析

    一.IPC进程间通信 IPC是进程间通信方法的统称,Linux IPC包括以下方法,Android的进程间通信主要采用是哪些方法呢? 1. 管道(Pipe)及有名管道(named pipe):管道可用 ...

  7. thinkphp微信开发之jssdk图片上传并下载到本地服务器

    public function test2(){ $Weixin = new \Weixin\Controller\BaseController(); $this->assign('signPa ...

  8. Android 开发之Matrix图片处理类的使用

    在Android中,对图片的处理需要使用到Matrix类,Matrix是一个3 x 3的矩阵,他对图片的处理分为四个基本类型: 1.Translate————平移变换 2.Scale————缩放变换 ...

  9. iOS开发之XMPPFramework开发基础介绍

    1 使用iPhoneXMPP实例 2 修改xmppstream设置 3 基础协议的介绍 协议 协议简介 XEP-0009 在两个XMPP实体间传输XML-RPC编码请求和响应 XEP-0006 使能与 ...

随机推荐

  1. lintcode：整数排序||

    题目 给一组整数,按照升序排序.使用归并排序,快速排序,堆排序或者任何其他 O(n log n) 的排序算法. 解题 归并排序 public class Solution { /** * @param ...

  2. 【查找结构4】红黑树 [RBT]

    红黑树的性质与定义 红黑树(red-black tree) 是一棵满足下述性质的二叉查找树: 1. 每一个结点要么是红色,要么是黑色. 2. 根结点是黑色的. 3. 所有叶子结点都是黑色的(实际上都是 ...

  3. 网页爬虫的设计与实现（Java版）

    网页爬虫的设计与实现(Java版)     最近为了练手而且对网页爬虫也挺感兴趣,决定自己写一个网页爬虫程序. 首先看看爬虫都应该有哪些功能. 内容来自(http://www.ibm.com/deve ...

  4. Mysql数据库连接、查询、记录集操作代码

    Mysql数据库链接代码 function dbConnect($hostname,$username,$pass,$db_name,$pconnect =0) { $func=empty($pcon ...

  5. AE 栅格处理

    由RasterDataset得到RasterLayer RasterDataset->RasterLayer IRasterLayer pRasterLayer = new RasterLaye ...

  6. Solr的一些查询参数

    fl: 是逗号分隔的列表,用来指定文档结果中应返回的 Field 集.默认为 “*”,指所有的字段. defType: 指定query parser,常用defType=lucene, defType ...

  7. javascript callback函数的理解与使用

    最近做的一个项目中用到了callback函数,于是就研究了下总结下我对javascript callback的理解 首先从callback的字面翻译“回调” 可以理解这是一个函数被调用的机制 当我们遇 ...

  8. HDU 4651 Partition（整数拆分）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4651 题意:给出n.求其整数拆分的方案数. i64 f[N]; void init(){    f[0 ...

  9. 《OD学Oozie》20160807Oozie

    一.引入 MapReduce Job Hive 脚本任务 同一个业务:先后.定时调度 工作流: 定义工作流程 activity jbpm oozie: 大数据工作流定义与调度框架 专门定义与调度Map ...

  10. java中时间的获取（二）

    java中时间的获取2 /** * 获取数据库操作记录时间 */ public static String getOpreateDbTime() { Calendar c = Calendar.get ...