Prosba: Hash Slider v jQuery zmena cislovania

Zdravim,

chcem spravit stranku, povedzme priklad ktory budete poznat je 9gag fast verzia..

Stiahol som si hash slider http://mgoys.com/lab/hashslider/
ktory ale zacina od 1tky a vzdy ked pridam na zaciatok novy obsah, tak ten, co mal na zaciatku jednotku ma dvojku. Chcem to spravit tak, aby posledny obrazok zacinal cislom #1 a kazdy dalsi obrazok nad nim mal +1. Pochopitelne je to z dovodu zdielania obsahu medzi uzivatelmi.

Som z toho trosku zufaly, javascript subor vyzera takto:

Kód:

$(document).ready(function(){
					   
//get width and height of the wrapper and give it to the UL	
	var wrapperwidth = $('#slider').width() *  $('#slider ul > li').size();
	$('#slider ul').css('width', wrapperwidth);
	var wrapperheight = $('#slider').height();
	$('#slider ul').css('height', wrapperheight);	
						   
						   
//set my li width
	var width = $('#slider').width();
	$('#slider ul li').css('width', width);

//set my counter vars
	var counter = $('#slider ul > li').size();
	var decount = 1;
	var autocount = 1;
	
//create my number navigation
	var createNum = 1;
	$('#numbers li:first-child').html(createNum).addClass('activenum').attr('id', 'id1');
	while ( createNum != counter) {
	$('#numbers li:last-child').after('<li>  </li>');
	createNum++;
	$('#numbers li:last-child').html(createNum);
	$('#numbers li:last-child').attr('id', 'id' + createNum);
	}
	
//get my number-width (number navigation should always be centered)
	var numwidth = $('#numbers li:first-child').width() * $('#numbers li').size();
	$('#numbers').css('width', numwidth);


	
//slide the button to the next item
function goNext() {
	if ( decount != counter) {
	$('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum').next().addClass('activenum');
	decount++;
	window.location.hash = decount;
	}
}

function goBack() {
	if ( decount != 1) {
	$('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum').prev().addClass('activenum');
	decount--;
	window.location.hash = decount;
	}
}

//make the number clickable
$("#numbers li").click(function() { 
	//$('#info4').html( $(this).html() ); 
	var clickednum = $(this).html() * - $('#slider').width() + $('#slider').width();
	//$('#info4').html( clickednum );
	$('#slider ul').animate({ left: clickednum }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum');
	$(this).addClass('activenum');
	decount = $(this).html();
	window.location.hash = $(this).html();	
});


//thaths the hash-shizzle
if ( window.location.hash != '') {
//get hash, scroll to position
	var hashnum = window.location.hash.substr(1) * - $('#slider').width() + $('#slider').width();
	$('#slider ul').animate({ left: hashnum }, 0, function() { });
//set counters to position
	decount = window.location.hash.substr(1);
	$('.activenum').removeClass('activenum');
	var hashname = window.location.hash.substr(1);
	$('#id' + hashname).addClass('activenum');
}
	
//get my clickers
$("#right").click(function() { goNext(); });	
$("#left").click(function() { goBack(); });	

//get mousewheel function
$("#slider ul").mousewheel(function(event, delta) { if (delta > 0) { goBack();	event.stopPropagation();event.preventDefault(); } });
$("#slider ul").mousewheel(function(event, delta) { if (delta < 0) { goNext();  event.stopPropagation();event.preventDefault();	} });

});

index.html potom len jednoducho:

Kód:

<div id="slider">
<ul>
<li> example</li>
<li> example2</li>
</ul>
</div>

<div id="left"> goLeft </div>
<div id="right"> goRight </div>

<ul id="numbers">
<li></li>
</ul>

Dakujem velmi pekne ak niekto obetuje minutku casu.

Zkoušel jste to? Nic na tom přece není. Akorát počítáte od counter do 1 místo od 1 do counter.

Kód:

//set my counter vars
        var counter = $('#slider ul > li').size();
        var decount = counter;
        var autocount = 1;
        
//create my number navigation
        var createNum = counter;
        $('#numbers li:first-child').html(createNum).addClass('activenum').attr('id', 'id1');
        while( createNum != 1 ) {
            $('#numbers li:last-child').after('<li>  </li>');
            createNum--;
            $('#numbers li:last-child').html(createNum);
            $('#numbers li:last-child').attr('id', 'id' + createNum);
        }
        
//get my number-width (number navigation should always be centered)
        var numwidth = $('#numbers li:first-child').width() * $('#numbers li').size();
        $('#numbers').css('width', numwidth);


        
//slide the button to the next item
function goNext() {
        if( decount != 1 ) {
            $('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
            $('.activenum').removeClass('activenum').next().addClass('activenum');
            decount--;
            window.location.hash = decount;
        }
}

function goBack() {
        if ( decount != counter) {
            $('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
            $('.activenum').removeClass('activenum').prev().addClass('activenum');
            decount++;
            window.location.hash = decount;
        }
}

Ďakujem veľmi pekne za odpoveď, len zrejme bude treba zmeniť aj niečo v druhomo js súbore, ktorý som si ani nevšimol :/

Kód:

$(document).ready(function(){var wrapperwidth=$('#slider').width()*$('#slider ul > li').size();$('#slider ul').css('width',wrapperwidth);var wrapperheight=$('#slider').height();$('#slider ul').css('height',wrapperheight);var width=$('#slider').width();$('#slider ul li').css('width',width);var counter=$('#slider ul > li').size();var decount=1;var autocount=1;var createNum=1;$('#numbers li:first-child').html(createNum).addClass('activenum').attr('id','id1');while(createNum!=counter){$('#numbers li:last-child').after('<li>  </li>');createNum++;$('#numbers li:last-child').html(createNum);$('#numbers li:last-child').attr('id','id'+createNum);}
var numwidth=$('#numbers li:first-child').width()*$('#numbers li').size();$('#numbers').css('width',numwidth);function goNext(){if(decount!=counter){$('#slider ul').animate({left:'-='+$('#slider').width()},400,'swing',function(){});$('.activenum').removeClass('activenum').next().addClass('activenum');decount++;window.location.hash=decount;}}
function goBack(){if(decount!=1){$('#slider ul').animate({left:'+='+$('#slider').width()},400,'swing',function(){});$('.activenum').removeClass('activenum').prev().addClass('activenum');decount--;window.location.hash=decount;}}
$("#numbers li").click(function(){var clickednum=$(this).html()*-$('#slider').width()+$('#slider').width();$('#slider ul').animate({left:clickednum},400,'swing',function(){});$('.activenum').removeClass('activenum');$(this).addClass('activenum');decount=$(this).html();window.location.hash=$(this).html();});if(window.location.hash!=''){var hashnum=window.location.hash.substr(1)*-$('#slider').width()+$('#slider').width();$('#slider ul').animate({left:hashnum},0,function(){});decount=window.location.hash.substr(1);$('.activenum').removeClass('activenum');var hashname=window.location.hash.substr(1);$('#id'+hashname).addClass('activenum');}
$("#right").click(function(){goNext();});$("#left").click(function(){goBack();});$("#slider ul").mousewheel(function(event,delta){if(delta>0){goBack();event.stopPropagation();event.preventDefault();}});$("#slider ul").mousewheel(function(event,delta){if(delta<0){goNext();event.stopPropagation();event.preventDefault();}});});

s jQuery ešte len začínam a nechce mi to ísť.. vďaka

To, co jste sem teď poslal, je tentýž kód, akorát zbavený netisknutelných znaků a komentářů.

No jasné, som blbec. Pardon. Veľká vďaka :)