Paginating Images with the jQuery Quick Pagination Plug-in

Among the large number of plug-ins currently available for the popular jQuery JavaScript library, there’s one in particular that might be especially attractive to you. It boasts a flat learning curve and easy configuration. I'm talking about Quick Pagination, a lightweight package created by Mark Perkins that will let you paginate a great variety of web page elements, such as divs, images and list items via a simple, effective API, without turning these elements into inaccessible structures.

To demonstrate how useful the Quick Pagination plug-in can be, in previous parts of this series I created a couple of examples to show how to use the plug-in for paginating a collection of paragraphs. In the first case, aside from displaying the classical “prev” and “next” links that permit users to move back and forward across chunks of HTML elements, a simple page counter was added to the whole paging mechanism, thus making it slightly more functional.

On the other hand, the second example implemented a similar pagination schema, but the page counter was hidden from view, thanks to the programmatic manipulation of the plug-in’s “showcounter” argument. This obviously showed how easy it is to put the Quick Pagination plug-in into action, not to mention its remarkable customization capabilities.

While using the plug-in for paginating paragraphs is fine, Quick Pagination has much more to offer in terms of versatility. As I said, it allows you to paginate several HTML elements, including naturally images. So, in this third tutorial of the series I’ll be developing yet another practical example, which will illustrate how to use the plug-in for paginating a set of sample images.

Are you eager to learn how this will be accomplished? Then start reading!