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. Could not create the driver from NHibernate.Driver.SQLite20Driver

    使用NHibernate连接Sqlite语句,版本为.net3.5. 升级.net 4.0出现异常,提示”Could not create the driver from NHibernate.Dri ...

  2. 一个字典通过dictionaryWithDictionary 他们的内存指针是不同的

    一个字典通过dictionaryWithDictionary 他们的内存指针是不同的  来自为知笔记(Wiz)

  3. Android 防止按钮连续点击的方法（Button,ImageButton等）

    防止按钮连续点击  其实实现很简单 共通方法 public class Utils { private static long lastClickTime; public static boolean ...

  4. 下载的时候如果文件名是中文就变成zip.zip

    struts2 /WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...

  5. ES6入门之函数的扩展

    函数js原有的: 属性:arguments[].caller(调用该函数的引用,注意与callee分别开,callee指的是调用函数本身经常在递归中出现).length(形参个数).prototype ...

  6. PHP 简介

    lamp LAMP - Linux Apache MySQL PHP MySQL - 三个层次:文件层次,服务层次,界面层次. LAMP-Linux Apache MySQL PHP 本机 :127. ...

  7. Hopcroft-Karp模板学习小结

    最开始是因为做了一个题目接触到这个算法的,但是对于这个算法很多资料都只说了大概的方法: 首先从所有X的未盖点进行BFS,BFS之后对每个X节点和Y节点维护距离标号,如果Y节点是未盖点那么就找到了一条最 ...

  8. C# 中通过API实现的打印类

    using System;using System.Collections;using System.Text;using System.Runtime.InteropServices; using ...

  9. hdu - 2102 A计划 (简单bfs)

    http://acm.hdu.edu.cn/showproblem.php?pid=2102 题目还是不难,注意起点一定是(0,0,0),然后到达P点时间<=t都可以. 用一个3维字符数组存储图 ...

  10. Android内存管理（3）缓存不要用SoftReference, 用android.util.LruCache

    A reference that is cleared when its referent is not strongly reachable and there is memory pressure ...