jquery Slide Plugin: Introduction to Jq-tiles using examples

How to use Plug-ins:

1, optional parameters, I will not translate, so as not to mislead everyone:

Options:
{
X:4,//# of tiles in X axis, max
Y:4,//# of tiles in Y axis, 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 to 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 a 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 is set to false)
}

2, the use of methods:

Start

$ ('. Slider '). Tilesslider (' Start ')

Stop

$ ('. Slider '). Tilesslider (' Stop ')

Next

$ ('. Slider '). Tilesslider (' Next ', callback)

Prev

$ ('. Slider '). Tilesslider (' prev ', callback)

3, the use of examples:

Html:

<div class= "Slider" >
<!–no description–>
<p>description image two</p>
<p>description image three</p>
</div>

Css:

. slider {width:600px; height:400px;}

Jquery:

$ ('. Slider '). Tilesslider ({random:true})

4, the use of WordPress attention matters:

Because the original plug-in will be the description of the P tag wrapped CSS style, and the WordPress source Editor in the line, will automatically append the P tag, will cause the slide show poor results. I have simply modified that the P tag described in the HTML code is given to a CSS class, such as <p class= "Tiles-desc" >description image Two</p> Then modify the _setupdescriptions function in the Jquery.tiles.js file to modify two (' P ') of the function to (' P.tiles-desc ').

5, Optimization:

The page loads to display the slides synchronously, will affect more or less the page load speed, my processing method is, the default load a 10kb picture, the relevant JS file to the bottom of the page, in addition, write their own functions, dynamic output HTML content, you need to refer to my Slide page and JS file, welcome to guide!