jquery banner

[maxcondor]

Ho utilizzato un plugin jquery per gestire la rotazione di alcuni banner

  <ul id="banner">
        <% [*][img]banner1.jpg[/img][*][img]banner2.jpg[/img][*][img]banner3.jpg[/img]
.....
.....

questo e invece il codice jquery

(function($) {

	//define jBanner object with some default config settings
	$.jBanner = {
		defaults: {
			bannerContainer: "",
			height: 275,			// height of images
			width: 275, 			// width of images
			borderSize: '0',			// size of border around images
			borderStyle: 'none',	// style of border around images
			borderColor: 'F00',		// color of border around images
			padding: 0, 			// amount of padding (in pixels) around images
			margin: 0, 				// amount of margin (in pixels) around images
			caption: false,			// display caption? true or false
			cheight: 0, 			// caption height
			delay: 8000, 			// delay to next element
			speed: 1000 			// transition speed
		}
	};
	
	//extend jquery with the plugin
	$.fn.extend({
		jBanner:function(options) {
			
			//use defaults or properties supplied by user
			var config = $.extend({}, $.jBanner.defaults, options);

			if (!config.caption){config.cheight=0;}

			config.bannerContainer = "#"+this.attr("id");

			banner(config);

			//return the jquery object for chaining
			return this;
		}
	});
	function banner(config) {
		var slidesSize	= 0;
		$(config.bannerContainer).css({'position':'relative','height':config.height+config.cheight+config.padding*2+config.margin*2+parseInt(config.borderSize)*2+'px','width':config.width+parseInt(config.borderSize)*2+'px','overflow':'hidden'});
		$(config.bannerContainer+" li").each(function(i){$(this).css({'position':'absolute','top':'0','left':i*(config.width+config.padding*2+config.margin*2+parseInt(config.borderSize)*2)+'px'});$(this).attr("title",i+1);$(this).children("a").after("

"+$(this).children("a").children("img").attr("alt")+"</p>");});
		$(config.bannerContainer+" li:first").addClass("selected");
		$(config.bannerContainer+" li img").css({'border':config.borderSize+'px '+config.borderStyle+' #'+config.borderColor,'height':config.height,'width':config.width});
		slideSize = jQuery('#banner li').size();
		if (slideSize >1 ){
			setTimeout( function(){next(config)}, config.delay);
		}
	};
	function next(config) {
		var i = parseInt($(config.bannerContainer+" li.selected").attr("title"));
		if (LastElement(config,i)){$(config.bannerContainer+" li[title='"+NextElement(config,i)+"']").css('left',(config.width+config.padding*2+config.margin*2+parseInt(config.borderSize)*2)+'px');}
		$(config.bannerContainer+" li[title='"+i+"']").removeClass("selected");
		$(config.bannerContainer+" li[title='"+(NextElement(config,i))+"']").addClass("selected");
		$(config.bannerContainer+" li").each(function(i){var newLeft = parseInt( $(this).css("left").replace(/px/i, '') )-(config.width+config.padding*2+config.margin*2+parseInt(config.borderSize)*2);$(this).animate({'left':newLeft+'px'},config.speed+250);});
		setTimeout( function(){next(config)}, config.delay);
	};
	function NextElement(config,index) {
		if(index < parseInt($(config.bannerContainer+" li:last").attr("title"))) {return index + 1;} else {return 1;}
	};
	function LastElement(config,index) {
		return (parseInt($(config.bannerContainer+" li[title='"+NextElement(config,index)+"']").css("left").replace(/px/i, '')) == (1 - parseInt($(config.bannerContainer+" li:last").attr("title")))*(config.width+config.padding*2+config.margin*2+parseInt(config.borderSize)*2));
	};
})(jQuery);

Adesso dovrei inserire altri tre div con altrettanti banner a rotazioni in altre posizioni sulla stessa pagina web. Mi conviene duplicare il codice j query sopra riportato?

[cavicchiandrea]

Perché due discussioni uguali?

[Vindav]

Mi conviene duplicare il codice j query sopra riportato?

Assolutamente no, il plugin gestisce tutti i banner nella pagina, basta identificare quali sono i container. Ora tu richiamerai il plugin con una istruzione del genere $('#mioContainer').jBanner(); giusto?

ora per applicarlo agli altri 3 div che vuoi aggiungere basta fare

$('#div1').jBanner();
$('#div2').jBanner();
$('#div3').jBanner();

[maxcondor]

non lo io ne ho pubblicato una soltanto...
non so cosa sia successo.

Mi fate arrestare?

[maxcondor]

si infatti richiamo il banner con:

$(document).ready(function() {
		  $("ul#banner").jBanner();
	});

Quindi dovrei poter gestire altri banner senza problemi.
Faccio delle prove

[maxcondor]

Come prevedevo funziona, ma se volessi stabilire un delay diverso per ogni banner?

$(document).ready(function() {
		  $("ul#banner").jBanner();
		  $("ul#banner2").jBanner();
		  $("ul#banner3").jBanner();

	});

dovrei scrivere

$(document).ready(function() {
		  $("ul#banner").jBanner(delay:8000);
		  $("ul#banner2").jBanner(delay:10000);
		  $("ul#banner3").jBanner(delay:12000);

	});

Funzionerà???

[maxcondor]

non funziona tutti e tre i banner rimangono fermi

[maxcondor]

avevo dimenticato una parentesi...

$(document).ready(function() {
		  $("ul#banner").jBanner({delay:8000});
		  $("ul#banner2").jBanner({delay:11000});
		  $("ul#banner3").jBanner({delay:13000});

	});

Così funziona