Hi, I read in http://jqueryfordesigners.com/coda-slider-effect/, regarding the auto start, I direct me to the following code, but where to put?


// first hide the navigation buttons    
var $buttons = $('img.right').add('img.left').hide();

// start to automatically cycle the tabs
var cycleTimer = setInterval(function () {
   $scroll.trigger('next');
}, 2000);

// select some trigger elements to stop the auto-cycle
var $stopTriggers = $('#slider .navigation').find('a') // tab headers
   .add('.scroll')                                     // panel itself
   .add("a[href^='#']");                               // links to a tab

// this is the function that will stop the auto-cycle
function stopCycle() {
   $stopTriggers.unbind('click.cycle');   // remove the no longer needed stop triggers
   clearInterval(cycleTimer);             // stop the auto-cycle itself
   $buttons.show();                       // show the navigation buttons
}

// bind stop cycle function to the click event using namespaces
$stopTriggers.bind('click.cycle', stopCycle);

Comments

Mark Theunissen’s picture

Status: Active » Closed (fixed)

You can add that into the /slider/js/slider.js file.

Just put it before the end of the document.ready.

adshill’s picture

Status: Closed (fixed) » Active

I'm desperately trying to make it so that the slider will automatically slide on opening the page... but I don't find document.ready in slider.js file, and when inserting the code above into the file, only the buttons dissapear!

This would be a really nice function if it worked - can you help me to work out what I'm doing wrong?

Mark Theunissen’s picture

You could hack the .js file and put it before the last line:

});

But you should add a new .js file with this code and include it in your template.php or theme's .info file. Make sure it's in the footer.

Some of the elements that are being referenced by the new code have been renamed. For example, in the original jQuery slider code, the navigation was just called ".navigation", now it's called "slidenav" because ".navigation" conflicted with other classes. So you'll have to replace those to get it to work.

But just a word of warning: hacking modules is not recommended if you're not a programmer.

Macronomicus’s picture

Ever figure this one out?
I get a // $scroll is not defined // error.
these would rock on auto rotate.

webthingee’s picture

I am also hoping someone figured it out :) The code above I think is using some selectors inconsistent with the module... any ideas?

adshill’s picture

I never got there - my client pulled the slider before I had a chance to try it! I hope to give it a go again in the next days on a different site so I'll let you know how I get on...

Cheers,

Adam

sameer’s picture

1. In the code in the first post above, change:

$scroll.trigger('next');

to

scroll.trigger('next');

2. you may also have to change:

var $stopTriggers = $('#slider .navigation').find('a');

to:

var $stopTriggers = $('#slider .slidenav').find('a');

3. then put the code after this line (the last line) in slider.js:

$.localScroll.hash(scrollOptions);

Mark Theunissen’s picture

Status: Active » Closed (won't fix)
glyphman’s picture

Thank you sameer. I did the very first change you recommended, then added the code where you said - it worked perfectly. Also, to solve the problem of this addition removing the left and right arrows, I simply commented out the code.

This is a really great module for a really great jQuery function. My implementation of this is temporarily at: http://vb.glyphhost.net and will be live at http://www.vocationboom.com

tms8707056’s picture

I know this thread is old, but is Slider still live on the example you gave? If so, do you remember how you made it fade instead of slide?

pmagunia’s picture

Thank you for posting the solution Sameer. It also worked for me. One suggestion I have is leaving out the semicolon on your your second step. After I did that the slider stopped cycling after I made a selection.

Somebody else was also asking fading instead of sliding. You can read about it at

http://drupal.org/node/334875

wmad’s picture

Guys, thanks a lot for the instructions.
I wanted to keep the navigation buttons. Here is what I added to slider.js:

// start to automatically cycle the tabs
var cycleTimer = setInterval(function () {
   scroll.trigger('next');
}, 5000);

// select some trigger elements to stop the auto-cycle
var $stopTriggers = $('#slider .slidenav').find('a')   // tab headers
   .add('.scroll')                                     // panel itself
   .add("a[href^='#']")                                // links to a tab
   .add('.scrollButtons');                             // nav buttons

// this is the function that will stop the auto-cycle
function stopCycle() {
   $stopTriggers.unbind('click.cycle');   // remove the no longer needed stop triggers
   clearInterval(cycleTimer);             // stop the auto-cycle itself
   $buttons.show();                       // show the navigation buttons
}

// bind stop cycle function to the click event using namespaces
$stopTriggers.bind('click.cycle', stopCycle);

before the following lines:

  scrollOptions.duration = 1;
  $.localScroll.hash(scrollOptions);
itserich’s picture

@ wmad Thanks so much for the detailed instructions.

I added it directly and it appears to work as described.

Thanks!

Anonymous’s picture

Could this be added on the admin page for Slider? Have a checkbox option for "automatically advance slide?" If checked, you can specify how long in milliseconds. This would prevent hacking the module code like this...

In the meantime, would the following steps be a proper guide to adding this (without hacking the module)?

1. Add the following code in a separate .js file named "slider-additional.js":

Drupal.behaviors.initSlider = function(context) {
  var panels = $('#slider .scrollContainer > div');
  var container = $('#slider .scrollContainer');

// start to automatically cycle the tabs
var cycleTimer = setInterval(function () {
   scroll.trigger('next');
}, 5000);

// select some trigger elements to stop the auto-cycle
var $stopTriggers = $('#slider .slidenav').find('a')   // tab headers
   .add('.scroll')                                     // panel itself
   .add("a[href^='#']")                                // links to a tab
   .add('.scrollButtons');                             // nav buttons

// this is the function that will stop the auto-cycle
function stopCycle() {
   $stopTriggers.unbind('click.cycle');   // remove the no longer needed stop triggers
   clearInterval(cycleTimer);             // stop the auto-cycle itself
   $buttons.show();                       // show the navigation buttons
}

};

2. Add "slider-additional.js" to your theme's js folder (for example, "sites/all/themes/your_theme_name/js")
3. Add the following to your .info file ("your_theme_name.info")
scripts[] = js/slider-additional.js
4. Flush the site's cache
5. Enjoy the automagical sliding?

**The above is not working for me...any ideas?**