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
///////////////////////////////////////////////
});
