Creating sliding itens with jQuery Sliding

This post is a complete tutorial about how to use the jQuery sliding plugin. Check the documentation and live example for full details.

What the plugin does?

This plugin has a purpose to create sliding elements, with a navigation arrows for a subset of items. For a small set, use the default sliding. For a large sets, use the remote sliding, that load elements on demand and cache it. This way the plugin will not make any request for pages that it was already loaded before.

Where is used

The plugin was developed for Globo.tv website at video listing.

The use of sliding plugin at Globo.tv

Simple example

First, we need to call the plugin with the dependencies and a simple markup of a container div and a unordered list. This is the default markup, but you can change via options, to check different options, visit the documentation.

And then we call the plugin with basic options and the following basic style:

And we have the following result:

Remote sliding

When you set the option url, you will activate the remote slide. Besides that, when you specify urlFormat, it’s possible to set a pattern for your url. This is useful when you have urls like ‘yourdomain/page/2/’.

We will use a url of example that return the html list. So the full code is showed below with live:

We call the url that pass the content to be loaded.

We need to set setTotalPages, this way the plugin know the maximum of request is being maded. Usually this information came from a ajax request, but it’s needed otherwise you can paginate forward infinitely and will not disable the buttons when necessary.

I use params to pass the content, but it’s just a example to show how to use params to send extra data.

With the onAppend callback you can change the return data before is rendered, this way you can have a custom ajax format and extract from data just what you need, like a json key with the html content, like this:

$('element').sliding({
items: 4,
url: url,
urlFormat: '{url}/page/{page}/',
next: nextLink,
prev: prevLink,
disabledClass: 'disabled',
speed: 500,
onAppend: function(data) {
// data is { total_pages: 2, html: 'content' }
return data.html;
}
});

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>