插件使用方法:
1、可选参数,我就不翻译了,以免误导大家:
Options:
{
x : 4, // # of tiles in x axis, 20 max
y : 4, // # of tiles in y axis, 20 max
effect : ‘default’,
fade : false, // fade images in addition to the tiles effect
random : false, // animate tiles in random order
reverse : false, // start animation from opposite direction
backReverse : false, // reverse the animation when going back in the slideshow (useful for some effects)
rewind : false, // reverse animation at a certain percentage in time
auto : false, // Start the slideshow on load
loop : false, // Start slideshow again when it finishes
slideSpeed : 3500, // time between slides
tileSpeed : 800, // time to clear all tiles
cssSpeed : 300, // css3 transition speed [100,200,300,400,500,600,700,800,900,1000],
nav : true, // Add navigation
navWrap : null, // Add the navigation to an existing element
bullets : true, // Show bullets, if false the show pagination with numbers
thumbs : true, // Show thumbnails when hovering nav
thumbSize : 25, // Thumbnail size (percentage of the original image)
timer : true // show or hide the timer bar
beforeChange : function() {}, // Runs before changing the image
afterChange : function() {} // Runs after the tiles have cleared
onSlideshowEnd : function() {} // Runs when the slideshow finishes ( “loop” must be set to false )
}
2、使用方法:
start:
$(‘.slider’).tilesSlider(‘start’)
stop:
$(‘.slider’).tilesSlider(‘stop’)
next:
$(‘.slider’).tilesSlider(‘next’, callback)
prev:
$(‘.slider’).tilesSlider(‘prev’, callback)
3、使用示例:
HTML:
<div class=”slider”>
<img src=”img1.jpg”/> <!– No description –>
<img src=”img2.jpg”/><p>Description image two</p>
<img src=”img3.jpg”/><p>Description image three</p>
</div>
CSS:
.slider { width: 600px; height: 400px; }
jQuery:
$(‘.slider’).tilesSlider({ random: true })
4、WordPress中使用注意事项:
由于原插件中会对描述的p标签包裹CSS样式,而WordPress源码编辑器中换行的话,就会自动追加p标签,会造成幻灯片显示效果不佳。我简单修改了一下,html代码中将描述的p标签赋予一个CSS类,如<p class=”tiles-desc”>Description image two</p>,再修改jquery.tiles.js文件中_setupDescriptions函数,将函数中两处 (‘p’) 修改为 (‘p.tiles-desc’) 即可。
5、优化:
页面加载就同步显示幻灯片,会多多少少影响页面载入速度,我的处理方法就是,默认载入一张10kb的图片,将相关js文件放到页面底部,另外,自己写个函数,动态输出html内容,需要的可以参考我的幻灯片页面和js文件,欢迎指导!