jQuery: calcolo delle dimensioni delle slide negli slideshow fluidi

jQuery: calcolo delle dimensioni delle slide negli slideshow fluidi

Se provate ad usare i metodi width(), outerWidth(), innerWidth() di jQuery sulle slide di uno slideshow fluido otterrete 0 come risultato. Ed anche l'oggetto restituito dal metodo JavaScript getBoundingClientRect() mostrerà 0 per la proprietà width. Questo perché gli slideshow fluidi non sono come gli altri slideshow.

Consideriamo le seguenti regole CSS:


body {
	margin: 0;
	padding: 0;
}

#slider {
	margin: 2em auto;
	max-width: 960px;
	overflow: hidden;
}

#slides {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 300px;
	width: 30000px; /* Sovrascritto da jQuery */
	position: relative;
}

#slides li {
	float: left;
	max-width: 960px;
	position: relative;
	max-height: 300px;
	display: block;
}

Dato che la larghezza delle slide non è impostata esplicitamente ma ricavata dalla differenza tra lo spazio orizzontale totale e lo spazio massimo occupato dalle slide, dobbiamo seguire un approccio diverso, ossia:


var setWidth = function( element ) {
	var $slides = $( options.slides, element ),
		total = 0,
		$wrapper = $( options.wrapper, element );
				
		$slides.each(function() {
			var bounding = this.getBoundingClientRect();
			var left = bounding.left;
			var right = bounding.right;
			var bodyWidth = $( "body" ).width();
			var totalWidth = bodyWidth - ( left + right );
				
				
				
			total += totalWidth;
				
		});
			
		$wrapper.width( total );
};

Abbiamo sottratto la somma degli offset orizzontali delle slide dalla larghezza della pagina. Potete vedere l'esempio ed il codice completo in questa pagina.

Torna su