PDA

View Full Version : controls for the Featured Content Glider outside the toggler DIV



ScottieMac
02-16-2011, 02:28 AM
1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

3) Describe problem: The script functions as it should, but I am seeking the ability to load a slide (and stop rotation) through a link not in the pagination links. You can do this in the Featured Content Slider, but not on this script. I'd rather not switch over to the FCSlider; in fact, I have gotten a slide to load from an external link elsewhere on the page (outside the toggler DIV) but the rotation won't stop. If anyone can dive into the .js and help me define a function similar to
<a href="javascript:fcs.jumpTo('home',3);"> like the FCSlider has, I would greatly appreciate it!

ddadmin
02-18-2011, 08:17 AM
You can create your own "jump to" function for this script relatively easily. Firstly, you need to make a small change to your initialization code so the options object passed into the init() function is saved as a variable first, for example:


var gliderconfig={
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]
}

featuredcontentglider.init(gliderconfig)

In other words, first assign the config object to an arbitrary variable, then pass that variable into the init() function, instead of the way method of just directly passing this object into the function.

With that done, add the below function following the above:


function gotoslide(config, pagenum){
featuredcontentglider.glide(config, pagenum)
featuredcontentglider.cancelautorotate(config.togglerid)
}

Then, to get the glider to go to a specific slide via regular links, do something like:


<a href="javascript:gotoslide(gliderconfig, 0)">Page 1</a> <a href="javascript:gotoslide(gliderconfig, 1)">Page 2</a>

You'd call gotoslide(gliderconfig, 0) with the first parameter being the variable containing the config object for the glider in question, and the 2nd parameter a number corresponding to the page you wish to load (0=1st page etc).

ScottieMac
02-21-2011, 02:17 AM
Object does not support this property or method. Throws a Javascript error.

I wrote a function that actually jumps to the item in question but it will not stop the autorotate. In short, this is the essential part of what I've done ...

<script type="text/javascript">
var glidercon={
id: "home"
...
other parameters for featuredcontentglider
...
}

featuredcontentglider.init(glidercon)
</script>

Then my links look like
<a href="javascript:fcs.jumpTo('home',0);">First frame</a>

That will get me to my frame but won't stop the rotation. When I put the exact coding in that you gave me, nothing worked at all.

ddadmin
02-21-2011, 05:59 AM
It should, I tested it and it works for me at least. Please post a link to the page on your site that contains the problematic script with the changes so we can check it out.

juppkk
11-17-2011, 08:58 AM
Hello,
I also had the same question the answer was a big help.
It works perfectly for Firefox and IE 9, but unfortunately it does not work in IE6 and IE 8

With "var = {glidercon" I got an error message (identifier expected ).
Changed to "var: = {glidercon" it works for FF and IE9.
But's not accepted by IE6 / IE8. Furthermore, the message: "identifier expected".

Do you have an solution
Regards, juppkk