I'm not too good at javascript. and hope I can get a bit of help. I'm using Coda Slider 2.0, and have designed it to where
the tabs are another slider to
the right of
the main slider, and each item. Basically like this mootools plugin http://landofcoder.com/demo/mootool/lofslidernews/index2.1.html
Problem is
the items will not scroll. How do I make
the items (or tabs to
the right) scroll down as
the slider rotates? Otherwise
the slider will show
the 4th slide but not scroll to
the 4th item on
the right, but Thanks everyone.
Here is
the Coda-Slider plugin:
// when
the DOM is ready...
$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
// if false, we'll float all
the panels left and fix
the width
// of
the container
var horizontal = true;
// float
the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'
position' : 'relative' // IE fix to ensure overflow is hidden
});
// calculate a new width for
the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
}
// collect
the scroll object, at
the same time apply
the hidden overflow
// to remove
the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="images/scroll_left.png" />')
.after('<img class="scrollButtons right" src="images/scroll_right.png" />');
// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#slider .navigation').find('a').click(selectNav);
// go find
the navigation link that has this target and select
the nav
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}
// offset is used to move to *exactly*
the right place, since I'm using
// padding on my example, I need to subtract
the amount of padding to
//
the offset. Try removing this to get a good idea of
the effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll, //
the element that has
the overflow
// can be a selector which will be relative to
the target
items: $panels,
navigation: '.navigation a',
// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',
// allow
the scroll effect to run both directions
axis: 'xy',
onAfter: trigger, // our final callback
offset: offset,
// duration of
the sliding effect
duration: 500,
// easing - can be used with
the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};
// apply serialScroll to
the slider - we chose this plugin because it
// supports//
the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);
// now apply localScroll to hook any other arbitrary links to trigger
//
the effect
$.localScroll(scrollOptions);
// finally, if
the URL has a hash, move
the slider in to
position,
// setting
the duration to 1 because I don't want it to scroll in
the
// very first page load. We don't always need this, but it ensures
//
the positioning is absolutely spot on when
the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
///////////////////////////////////////////////
// autoscroll
///////////////////////////////////////////////
// start to automatically cycle
the tabs
cycleTimer = setInterval(function () {
$scroll.trigger('next');
}, 2000); // how many milliseconds, change this to whatever you like
// select some trigger elements to stop
the auto-cycle
var $stopTriggers = $('#slider .navigation').find('a') // tab headers
.add('.scroll') // panel itself
.add('.stopscroll') // links to
the stop class div
.add('.navigation') // links to navigation id for tabs
.add("a[href^='#']"); // links to a tab
// this is
the function that will stop
the auto-cycle
function stopCycle() {
// remove
the no longer needed stop triggers
clearInterval(cycleTimer); // stop
the auto-cycle itself
$buttons.show(); // show
the navigation buttons
document.getElementById('stopscroll').style.display='none'; // hide
the stop div
document.getElementById('startscroll').style.display='block'; // block
the start div
}
// bind stop cycle function to
the click event using namespaces
$stopTriggers.bind('click.cycle', stopCycle);
///////////////////////////////////////////////
// end autoscroll
///////////////////////////////////////////////
// edit to start again
///////////////////////////////////////////////
// select some trigger elements to stop
the auto-cycle
var $startTriggers_start = $('#slider .navigation').find('a') // tab headers
.add('.startscroll'); // links to
the start class div
// this is
the function that will stop
the auto-cycle
function startCycle() {
// remove
the no longer needed stop triggers
$buttons.hide(); // show
the navigation buttons
$scroll.trigger('next'); // directly to
the next first
cycleTimer = setInterval(function () { // now set timer again
$scroll.trigger('next');
}, 5000); // how many milliseconds, change this to whatever you like
document.getElementById('stopscroll').style.display='block'; // block
the stop div
document.getElementById('startscroll').style.display='none'; // hide
the start div
}
// bind stop cycle function to
the click event using namespaces
$startTriggers_start.bind('click.cycle', startCycle);
///////////////////////////////////////////////
// end edit to start
///////////////////////////////////////////////
});
