好库网 好库网首页 | 我的好库
JQuery入门

免费jQuery幻灯片图片轮播插件Galleriffic的使用方法

发布者:jquery2000
发布日期:2015/6/17 22:28:21   更新日期:2015/6/17 22:30:05
阅读次数:766
评分:4.80
介绍:一款多种样式的jQuery相册插件。
正文:

这款相册适合图片较多的情形,图片索引可以分页显示。

 

使用方法:
添加引用:
<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>

添加容器元素:
<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
... graceful degrading list of thumbnails (specific format specified below) ...
</div>

添加图片:
<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">
(Any html can go here)
</div>
</li>
... (repeat for every image in the gallery)
</ul>
</div>

初始化galleriffic插件:
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
delay: 3000, // in milliseconds
numThumbs: 20, // The number of thumbnails to show page
preloadAhead: 40, // Set to -1 to preload all images
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 7, // The maximum number of pages to display in either the top or bottom pager
imageContainerSel: '', // The CSS selector for the element within which the main slideshow image should be rendered
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, // Specifies whether the slideshow's Play and Pause links should be rendered
renderNavControls: true, // Specifies whether the slideshow's Next and Previous links should be rendered
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
enableKeyboardNavigation: true, // Specifies whether keyboard navigation is enabled
autoStart: false, // Specifies whether the slideshow should be playing or paused when the page first loads
syncTransitions: false, // Specifies whether the out and in transitions occur simultaneously or distinctly
defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
});
});

下载完整demo源码


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。