JQuery开发之Galleriffic图片插件介绍
Galleriffic是一個(gè)用于創(chuàng)建快速展示相冊(cè)中照片的jQuery插件。從圖一中可以看成，圖片既可以以幻燈片的方式查看，也可以手動(dòng)點(diǎn)擊縮略圖查看。Galleriffic還支持分頁(yè)，從而使得它能夠展示更多的圖片。
▲圖片一 Galleriffic圖片畫廊插件
Galleriffic的主要特點(diǎn)如下：
· 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
下面，我們結(jié)合代碼，來闡述Galleriffic的工作原理。
1. 下載最新版本的Galleriffic與jQuery。jQuery在1.3.2以上。
2. 在目標(biāo)HTML代碼中引入jQuery庫(kù)與Galleriffic插件。兩者的實(shí)現(xiàn)方式均為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都是可選的。用戶可以根據(jù)自己的實(shí)際情況做出取舍。
<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"> ????????????????(這里用來放標(biāo)題、描述等信息) ????????????</div> ????????</li> ????????... (接下的就是類似上面的li代碼，一個(gè)li元素包含一張圖片) ????</ul></div>5. 初始化插件
var gallery = $('#gallery').galleriffic('#thumbs', {????????delay:??????????????????3000// 動(dòng)畫播放間隔時(shí)間 ????????numThumbs:??????????????20// 所要顯示的圖片數(shù)目 ????????preloadAhead:?????????? 40// 設(shè)置為-1時(shí)預(yù)加載所有圖片 ????????enableTopPager:???????? false, ????????enableBottomPager:??????true, ????????imageContainerSel:??????'', // 接下來的三個(gè)屬性是作為容器的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, // 是否顯示前進(jìn)后退按鈕 ????????playLinkText:?????????? 'Play',????????pauseLinkText:??????????'Pause',????????prevLinkText:?????????? 'Previous',????????nextLinkText:?????????? 'Next',????????nextPageLinkText:?????? 'Next ›',????????prevPageLinkText:?????? '‹ 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, // 是否自動(dòng)播放 ????????onChange:?????????????? undefined, // 接下來是插件的回調(diào)函數(shù) ????????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() { ... } ????});轉(zhuǎn)載于:https://www.cnblogs.com/huidaoli/p/3549733.html
總結(jié)
以上是生活随笔為你收集整理的JQuery开发之Galleriffic图片插件介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 对接中国天气网 城市 id js
- 下一篇： 必须去收藏14个响应式布局的前端开发框架