Adding an exit animation to ::Featured Content Glider

September 18, 2011

Dynamic Drive has a really useful script called Featured Content Glider.
My only complaint was that the layer kept overlapping the previous one instead of a nice flow by having the previous animate out while the new slide animated in.

So what I did was add some lines to the featuredcontentglider.js

1) add “var startingvar = 0;” after “jQuery.noConflict()
It created a variable that I found useful to know exactly what slide I was on.

2) the if statement following “//Test for toggler not being initialized yet, or user clicks on the currently selected page):” should be replaced with the following if statement:

//Test for toggler not being initialized yet, or user clicks on the currently selected page):
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
	var $selectedlink=config.$toc.eq(selected)
	config.nextslideindex=(selected<config.$contentdivs.length-1)? selected+1 : 0
	config.prevslideindex=(selected==0)? config.$contentdivs.length-1 : selected-1
	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')
			
	if (startingvar != 0){
		var $previous=config.$contentdivs.eq(config.prevslideindex)
		var startpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
		$previous.css(config.leftortop, startpoint).css("zIndex", this.csszindex) 
		var endpoint=(config.leftortop=="left")? {left:-config.startpoint} : {top:-config.startpoint} //animate it into view
		$previous.animate(endpoint, config.speed)
	}
	startingvar++;
			
	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')
}

And that is pretty much it. This makes the current slide animate out while the new slide comes in. I think this creates a more friendly rotating feature that is less disruptive to the user experience.

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive