PDA

View Full Version : 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/dynamicindex17/featuredcontentglider.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):


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:


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':


<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:


.slideOf {
font-weight: bold;
}

aless
12-29-2009, 04:35 PM
John,

thanks a lot.

Ales

fxr
08-24-2011, 08:39 PM
Works Great :)