PDA

View Full Version : Featured Content Glider - Can it be set up to pause when you mouse over the content



AlexPetrie
02-07-2012, 01:00 PM
1) Featured Content Glider

2) http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Is there a way to pause the glider when you mouse over the content?

Thanks
Alex

vwphillips
02-07-2012, 02:10 PM
Auto:function(config){
window[config.togglerid+"timer"]=setTimeout(function(){ config.showfirst=true; featuredcontentglider.autorotate(config); },200);
},

Pause:function(config){
clearTimeout(window[config.togglerid+"timer"]);
},

addevt:function(o,t,f,p){
var oop=featuredcontentglider;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},

init:function(config){
jQuery(document).ready(function($){
config.$glider=$("#"+config.gliderid)
config.$togglerdiv=$("#"+config.togglerid)
config.$toc=config.$togglerdiv.find('.toc')
config.$next=config.$togglerdiv.find('.next')
config.$prev=config.$togglerdiv.find('.prev')
config.$prev.attr('buttontype', 'previous')

if (config.mouseoverout==true){
var obj=document.getElementById(config.gliderid);
featuredcontentglider.addevt(obj,'mouseover','Pause',config);
featuredcontentglider.addevt(obj,'mouseout','Auto',config);
}
var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected
config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string
config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"
config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"
config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"
if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
featuredcontentglider.getremotecontent($, config)
else
featuredcontentglider.setuptoggler($, config);
if (config.showfirst){
var fst=$("#"+config.gliderid+" ."+config.contentclass)[0];
fst.style.left='0px';
fst.style.top='0px';
}
else {
config.showfirst=false;
}
$(window).bind('unload', function(){ //clean up and persist
config.$togglerdiv.unbind('click')
config.$toc.unbind('click')
config.$next.unbind('click')
config.$prev.unbind('click')
if (config.persiststate)
featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))
config=null

})
})
}
}


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: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
showfirst:true,
mouseoverout:true
})