Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
Mark Theunissen CreditAttribution: Mark Theunissen commentedYou can add that into the /slider/js/slider.js file.
Just put it before the end of the document.ready.
Comment #2
adshill CreditAttribution: adshill commentedI'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?
Comment #3
Mark Theunissen CreditAttribution: Mark Theunissen commentedYou 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.
Comment #4
Macronomicus CreditAttribution: Macronomicus commentedEver figure this one out?
I get a // $scroll is not defined // error.
these would rock on auto rotate.
Comment #5
webthingee CreditAttribution: webthingee commentedI am also hoping someone figured it out :) The code above I think is using some selectors inconsistent with the module... any ideas?
Comment #6
adshill CreditAttribution: adshill commentedI 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
Comment #7
sameer CreditAttribution: sameer commented1. 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);
Comment #8
Mark Theunissen CreditAttribution: Mark Theunissen commentedComment #9
glyphman CreditAttribution: glyphman commentedThank 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
Comment #10
tms8707056 CreditAttribution: tms8707056 commentedI 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?
Comment #11
pmaguniaThank 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
Comment #12
wmad CreditAttribution: wmad commentedGuys, thanks a lot for the instructions.
I wanted to keep the navigation buttons. Here is what I added to slider.js:
before the following lines:
Comment #13
itserich CreditAttribution: itserich commented@ wmad Thanks so much for the detailed instructions.
I added it directly and it appears to work as described.
Thanks!
Comment #14
Anonymous (not verified) CreditAttribution: Anonymous commentedCould 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":
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?**