Re: Create Beautiful jQuery sliders tutorial

thugsb — Thu, 17 Sep 2009 11:31:56 -0000

I have modified the code slightly and added instructions. Hopefully it'll be helpful. :)
//
// Instructions by Stuart Basden http://plaosmos.blogspot.com/
//
// On each page you can include the following script to set the following variables:
// <script type="text/javascript">
//
// </script>
//
// Explanation of Variables:
// ----------------------------
// # slider.num is the number of slides, the same a d.length
// # widthofslide can be set to the number of pixels you want the slider to move each slide.
// # Setting randomise = 1 will randomise the initial slide.
// # slider.at is the delay time between transitions.
// # Setting slider.ar to false will turn off the automatic transitions.
// # If slider.al is set to null then the transitions will ignore your mouseclicks, but if it is
// set to a number in the 1000s it will delay the next transition by up to that amount.
//

var $j = jQuery;
var widthofslide = 845; // This is the default, but can be set for each page.
var randomstart = 1;
var randomise = 0;

$j(function(){
slider.init();
});

var slider={
num:-1,
cur:0,
cr:[],
al:10000,
at:10000,
ar:false,
init:function(){
if(!slider.data || !slider.data.length)
return false;

var d=slider.data;
slider.num=d.length;
if(randomise == 1){
randomstart = slider.num;
};
var pos=Math.floor(Math.random()*randomstart);
for(var i=0;i<slider.num;i++){<br> $j('#'+d[i].id).css({left:((i-pos)*widthofslide)});
$j('#slide-nav').append(''+(i+1)+'');
}

$j('img,div#slide-controls',$j('div#slide-holder')).fadeIn();
slider.text(d[pos]);
slider.on(pos);
slider.cur=pos;
window.setTimeout('slider.auto();',slider.at);
},
auto:function(){
if(!slider.ar)
return false;

var next=slider.cur+1;
if(next>=slider.num) next=0;
slider.slide(next);
},
slide:function(pos){
if(pos<0 || pos>=slider.num || pos==slider.cur)
return;

window.clearTimeout(slider.al);
slider.al=window.setTimeout('slider.auto();',slider.at);

var d=slider.data;
for(var i=0;i<slider.num;i++)<br> $j('#'+d[i].id).stop().animate({left:((i-pos)*widthofslide)},widthofslide,'swing');

slider.on(pos);
slider.text(d[pos]);
slider.cur=pos;
},
on:function(pos){
$j('#slide-nav a').removeClass('on');
$j('#slide-nav a#slide-link-'+pos).addClass('on');
},
text:function(di){
slider.cr['a']=di.client;
slider.cr['b']=di.desc;
slider.ticker('#slide-client span',di.client,0,'a');
slider.ticker('#slide-desc',di.desc,0,'b');
},
ticker:function(el,text,pos,unique){
if(slider.cr[unique]!=text)
return false;

ctext=text.substring(0,pos)+(pos%2?'-':'_');
$j(el).html(ctext);

if(pos==text.length)
$j(el).html(text);
else
window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
}
};

Re: Create Beautiful jQuery sliders tutorial

thugsb — Wed, 16 Sep 2009 10:55:55 -0000

Are you able to remember which variables changed the transistion speed and delay at least? I'm struggling to work it out! Thanks.

Re: Create Beautiful jQuery sliders tutorial

thugsb — Wed, 16 Sep 2009 05:21:43 -0000

This is a great script Raj, especially once it is cleared up. Maybe you could switch the download for the cleaned up script that is posted lower down in the comments?

I'm wondering which variables change the speed of transitions, the delay between transitions, and whether you can switch off auto-sliding and make it manual only?

Would it be possible to remake the script so that these variables are set at the top and labled accordingly (along with the width, which can be easily set as a variable)? Maybe they could even be called on the command line so you can customise the same script for multiple parts of the site?

I'd love to see these kinds of improvements, but thanks so much for making the script in the first place. Oh, and I like you avatar pic. :)

Disqus - Latest Comments for thugsb

Re: Create Beautiful jQuery sliders tutorial

Re: Create Beautiful jQuery sliders tutorial

Re: Create Beautiful jQuery sliders tutorial