PDA

View Full Version : Content Glider - First slide effect different to subsequent slides



a39design
01-11-2010, 11:00 PM
Content Slider - First slide effect different to subsequent slides within slider

HI,

I am using the dynamic contentslider found
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm


I am using the content slider with in a website with the slides sliding in right to left. At the moment when the page loads the first slide slides in, is there anyway that I can get the first slide to be present on page load(no slide effect) and then all subsequent slides sliding in from right to left?

I currently get either one behaviour or the other by setting the speed to 500 or 0
Thanks

jscheuer1
01-12-2010, 10:39 AM
There is no speed in the content slider script you mention and link to in your post, and the content fades in, it doesn't move in. I think you may mean:

http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

If so, there might be a way.

a39design
01-12-2010, 08:55 PM
Hi,

Thankyou for your reply. You are absolutely right I linked to the wrong slider! The featured content glider is the on I have used, you mention there may be a way?!

Thanks

jscheuer1
01-13-2010, 08:06 AM
OK, in the featuredcontentglider.js file, add the highlighted:


. . . oc.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.re . . .

Then do your on page init something like so (important parts highlighted):


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: 0, //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.speed = 500;
this.onglide = null;
}
})

Be sure not to miss the added comma (red) after the autorotateconfig entry.

With the speed set to 0, that will be the initial speed. In the onglide function we reset the speed to 500 for all subsequent glide operations.

a39design
01-14-2010, 12:32 AM
Thank you so much for this, it works perfectly!!