Prosba: Hash Slider v jQuery zmena cislovania

20. 4. 2012 21:40:27

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:

$(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 itemfunction 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-shizzleif ( 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:

Dakujem velmi pekne ak niekto obetuje minutku casu.

20. 4. 2012 21:40:27

https://webtrh.cz/diskuse/prosba-hash-slider-v-jquery-zmena-cislovania#reply756804

Martin Schlemmer

(36 hodnocení)

21. 4. 2012 11:42:54

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.

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

21. 4. 2012 11:42:54

https://webtrh.cz/diskuse/prosba-hash-slider-v-jquery-zmena-cislovania#reply756803

spectrus

(5 hodnocení)

21. 4. 2012 12:08:59

Ď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 :/

$(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

21. 4. 2012 12:08:59

https://webtrh.cz/diskuse/prosba-hash-slider-v-jquery-zmena-cislovania#reply756802

Martin Schlemmer

(36 hodnocení)

21. 4. 2012 12:18:33

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

21. 4. 2012 12:18:33

https://webtrh.cz/diskuse/prosba-hash-slider-v-jquery-zmena-cislovania#reply756801

spectrus

(5 hodnocení)

21. 4. 2012 12:53:21