JQuery开发之Galleriffic图片插件介绍

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. 初始化插件

var gallery = $( ' #gallery').galleriffic('#thumbs', {         delay:                   3000 // 动画播放间隔时间         numThumbs:               20 // 所要显示的图片数目         preloadAhead:           40 // 设置为 - 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 () { ... }     });