Featured Content Glider with pagination

**aless** · 12-29-2009, 10:37 AM

1) Script Title:
Featured Content Glider
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tentglider.htm
3) Describe problem:
Hello,

How to add a pagination (page number of the current page relative to all available pages) from Virtual Pagination script v2.1 shown on Demo:#4 (ie: 1/6) into Featured Content Glider.

Thanks.

**jscheuer1** · 12-29-2009, 02:33 PM

Edit the featuredcontentglider.js file here (add the highlighted):

Code:

			config.$next.attr('loadpage', config.nextslideindex+"pg") //store slide index to go to when "next" link is clicked on
			config.$prev.attr('loadpage', config.prevslideindex+'pg')
			var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
			$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
			var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
			$target.animate(endpoint, config.speed)
			config.$toc.removeClass('selected')
			$selectedlink.addClass('selected')
			config.$togglerdiv.attr('lastselected', selected+'pg')
		}
		if(config.onglide){
			config.onglide.call(config, selected);
		}
	},

	getremotecontent:function($, config){
		config.$glider.html(this.ajaxloadingmsg)
		$.ajax({
			url: config.remotecontent,
			error:function(ajaxrequest){

Then add this to your on page init (don't miss the added comma for the previous config property, autorotateconfig), ex:

Code:

featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	autorotateconfig: [5000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
	onglide: function(selected){
		this.$togglerdiv.find('.slideOf').html([++selected] + '/' + this.$contentdivs.length);
	}
})

Add a span or other element to your togglerid division, and give it a class of 'slideOf':

Code:

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a><br><span class="slideOf"></span>
</div>

Finally, if you wish to style this, add something like so to your stylesheet:

Code: