JavaScript, jquery

extended Quick Pager jquery plugin for auto slide


Replace with this code for auto slide pagination.

new added function:

// var i = 1;
var clickedLink = 1;
// for page auto moving
if(options.auto)
{
setInterval(function() {

options.currentPage = clickedLink;

if(clickedLink >= pageCounter)
{
clickedLink = 1;
}
else
{
clickedLink++;
}

$(“.simplePagerContainer”).find(“li.currentPage”).removeClass(“currentPage”);
//Add current page highlighting
$(“.simplePagerContainer”).find(“a[rel='”+clickedLink+”‘]”).parent(“li”).addClass(“currentPage”);

//hide and show relevant links
selector.children().hide();
selector.find(“.simplePagerPage”+clickedLink).hide().fadeIn(options.fadein_delay);

},options.delay);
}

 

// to initialize the new pagination

$(function() {
$(‘.clientLogoList’).quickPager({pageSize: 10, pagerLocation: ‘after’,auto:true,delay:4000,fadein_delay:2000});
$(‘.simplePagerNav’).css({left: (221 – $(‘.simplePagerNav’).width()) / 2 + “px”});

});

 

// new added parameters

===========================================================

name                  |         Default value   ( type )   |     Description

————————————————————————-

auto                    |     false  ( boolean )                 |  to initialize auto slide

————————————————————————-

delay                  |    4000  ( int() )                       |  time lap to define next slide

———————————————————————————

fadein_delay   |   2000 ( int(() )                      |   fade-in time delay

 

===========================================================

 

whole plugin

 

 

/*————————————————-
Quick Pager jquery plugin

Copyright (C) 2011 by Dan Drayne

————————————————-*/

(function($) {

$.fn.quickPager = function(options) {

var defaults = {
pageSize: 10,
currentPage: 1,
holder: null,
pagerLocation: “after”,
delay:4000,
fadein_delay:2000,
auto:false
};

var options = $.extend(defaults, options);

return this.each(function() {

var selector = $(this);
var pageCounter = 1;

selector.wrap(“<div class=’simplePagerContainer’></div>”);

selector.children().each(function(i){

if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
$(this).addClass(“simplePagerPage”+pageCounter);
}
else {
$(this).addClass(“simplePagerPage”+(pageCounter+1));
pageCounter ++;
}

});

// show/hide the appropriate regions
selector.children().hide();
selector.children(“.simplePagerPage”+options.currentPage).show();

if(pageCounter <= 1) {
return;
}

//Build pager navigation
var pageNav = “<ul class=’simplePagerNav’>”;
for (i=1;i<=pageCounter;i++){
if (i==options.currentPage) {
pageNav += “<li class=’currentPage simplePageNav”+i+”‘><a class=’random’ rel='”+i+”‘ href=’#’>”+i+”</a></li>”;
}
else {
pageNav += “<li class=’simplePageNav”+i+”‘><a rel='”+i+”‘ href=’javascript:void(0)’>”+i+”</a></li>”;
}
}
pageNav += “</ul>”;

if(!options.holder) {
switch(options.pagerLocation)
{
case “before”:
selector.before(pageNav);
break;
case “both”:
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}

// var i = 1;
var clickedLink = 1;
// for page auto moving
if(options.auto)
{
setInterval(function() {

options.currentPage = clickedLink;

if(clickedLink >= pageCounter)
{
clickedLink = 1;
}
else
{
clickedLink++;
}

$(“.simplePagerContainer”).find(“li.currentPage”).removeClass(“currentPage”);
//Add current page highlighting
$(“.simplePagerContainer”).find(“a[rel='”+clickedLink+”‘]”).parent(“li”).addClass(“currentPage”);

//hide and show relevant links
selector.children().hide();
selector.find(“.simplePagerPage”+clickedLink).hide().fadeIn(options.fadein_delay);

},options.delay);
}

//pager navigation behaviour
selector.parent().find(“.simplePagerNav a”).click(function() {

//grab the REL attribute
clickedLink = $(this).attr(“rel”);
options.currentPage = clickedLink;

if(options.holder) {
$(this).parent(“li”).parent(“ul”).parent(options.holder).find(“li.currentPage”).removeClass(“currentPage”);
$(this).parent(“li”).parent(“ul”).parent(options.holder).find(“a[rel='”+clickedLink+”‘]”).parent(“li”).addClass(“currentPage”);
}
else {
//remove current current (!) page
$(this).parent(“li”).parent(“ul”).parent(“.simplePagerContainer”).find(“li.currentPage”).removeClass(“currentPage”);
//Add current page highlighting
$(this).parent(“li”).parent(“ul”).parent(“.simplePagerContainer”).find(“a[rel='”+clickedLink+”‘]”).parent(“li”).addClass(“currentPage”);
}

//hide and show relevant links
selector.children().hide();
selector.find(“.simplePagerPage”+clickedLink).hide().fadeIn(options.fadein_delay);

return false;
});

});
}

})(jQuery);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s