Making It Happen: Coda-Slider
Hi All,
I knew it, you were wondering what jQuery tool we used across our site and how we customized it, right? Well, here’s one small way in how we added a bit to the core code.
While reading along in some of the forums (located here: http://www.ndoherty.com/blog/2007/10/29/coda-slider-11/), I noticed some are wanting an “auto-slide” feature for this thing (great job by the way Niall Doherty).
Here’s how you do it:
Modify the js code included in the page’s header into this:
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
//call every __ seconds
var autoSlide = setInterval(function()
{
$("#left-link").click();
}, 10000);
});
And change line 63 (i believe, or corresponding line of code) of coda.slider.1.1.1.js:
jQuery(this).before(”<div class=’stripNavL’ id=’stripNavL” + j + “‘><a href=’#’ id=’left-link’>Left</a><\/div>”);
And there you have it.
Feel free to check us out here where we may be hosting some cool developments.
Feel free to check us out here where we may be hosting some cool developments.
Hat’s off to Niall Doherty and others who have put their efforts towards this sweet tool.
October 18th, 2008 at 2:57 pm
Hi,
Thanks for the great addition for the coda slide. I am trying to add a stop button to this but have a few hours of trial and error, I am stumped. I wrote a click function which ran: clearInterval(autoSlide);. I got the function to run but I could not get this to stop the auto-slide. Any help or suggestions would be greatly appreciated. Thanks in advance for your reply.
October 23rd, 2008 at 2:04 pm
Hi JAS,
We’re glad to hear from you, though we apologize for the delay on our response! We’ve been busy with providing Magento development services lately.
I’d like to get an answer out to you right away, though unfortunately, it will have to wait until I can get away from the development work going on right now.
I’ll post as soon as I can.
Thanks,
Lee
October 23rd, 2008 at 2:07 pm
By the way, I’d recommend having one button to use for both the stop and play functionality. You could use two functions within the onClick function available with jQuery. On click, you could kill the automatic interval (as you were trying above) - and then either via onChange or the onClick function again - refer to the setInterval() function.
Does this help in terms of direction?
Thanks for your inquiry!
- Lee
October 26th, 2008 at 5:15 pm
Hi,
Thanks for the reply. Upon your recommendation I have added a start link to the script. This works perfectly, however I still can’t get the stop button to work. I tested the stop function by adding an alert to it, which successfully proved the script is executing the stop function, just not stopping the rotation. Maybe you can see something I am missing in my code:
jQuery(window).bind(”load”, function() {
jQuery(”div#slider1″).codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
//call every __ seconds
$(”#start”).click(function()
{
var autoSlide = setInterval(function()
{
$(”#right-link”).click();
}, 1000);
});
$(”#stop”).click(function()
{
clearInterval(autoSlide);
});
});
Thanks in advance for your help, as a developer myself I know how busy work can be.
-JAS
December 8th, 2008 at 11:38 am
Hi JAS, don’t know if you fixed your problem. It looks like your second ” after div#slider1 isn’t the correct character. I find that when I copy and paste from code examples the single quotes and the quotation marks are screwy. So just go into your Code and retype your quotation marks and it should work.