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：两个数组的交

    题目 返回两个数组的交 样例 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2]. 解题 排序后,两指针找相等元素,注意要去除相同的元素 public class ...

  2. lintcode:Pow(x, n)

    Pow(x, n) Implement pow(x, n). 解题 直接顺序求解,时间复杂度O(N) public class Solution { /** * @param x the base n ...

  3. Qt之QSpacerItem（控件之间的间距不尽相同，可以借助QSpacerItem来设置，并且还可以对QSpacerItem设置QSizePolicy）

    http://blog.csdn.net/u011012932/article/details/51614868

  4. Android：Intel Atom x86模拟器的安装与使用

    1.下载硬件加速执行管理器haxm-windows_r05.zip,找到系统对应版本,并安装 2.下载安卓x86系统映象sysimg_x86-19_r01.zip,不区分系统环境,解压得到x86文件夹 ...

  5. RHEL7.2下netcat工具安装教程

    1.下载 下载地址:http://sourceforge.net/projects/netcat/files/netcat/0.7.1/(下载的是netcat-0.7.1.tar.gz版本) 2.解压 ...

  6. O(1)时间内删除指定链表结点

    题目 给定单链表头指针和一个结点指针,定义一个函数在O(1)时间内删除该结点. 分析 对于上图实例链表(a)删除指针p有两种方式 思路1:(b)找到前一个指针pre,赋值pre->next = ...

  7. http 服务

    今天把一个功能模块做成了http服务,这还是第一次写http服务,纪录下来. package com.chuntent.itemsearch; import java.io.BufferedReade ...

  8. angularjs ngRoute demo

    <!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...

  9. (5)XML转化成TXT

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  10. 生成24位字符串ID__IdGenerator.java

    此工具类用于生成24位字符串ID,唯一不重复.直接通过 IdGenerator.get() 获取. 源码如下:(点击下载源码 - IdGenerator.java ) import java.net. ...