Creare uno Slideshow jQuery con effetto bolle

Oggi impariamo come creare uno Slideshow con jQuery che abbia un effetto bolle. Spesso e volentieri non sappiamo come presentare una serie di immagini e questo sara’ il modo per dare un tocco di novita’ alla vostra presentazione. Il codice e’ molto semplice, quindi se avete 5 minuti iniziamo a bomba.

CODICE HTML

Come sempre bisogna iniziare dall’ossatura, quindi creiamo un file Html che chiamiamo index.html come il seguente:

    
        
        Slideshow jQuery effetto bolle| iwebdesigner Demo

        
        

        
        

        
    

    

        
		


		
		
        
        
        

    
Abbiamo incluso i file necessari per l’effetto. Adesso andiamo ad analizzare questi file.
FILE JAVASCRIPT E JQUERY
Innanzi tutto bisogna definire una classe JavaScript nominata Bubble. Ogni bolla nello Slideshow sara’ un’oggetto di questa classe.
jquery.bubbleSlideshow.js
// This is the Bubble class. It takes left and top
// coordinates, size (diameter) and a image URL

function Bubble( left, top, size, imgURL ){

	this.top	= top;
	this.left	= left;
	this.size	= size;

	// This places the center of the
	// circles on the specified position:

	top -= size/2;
	left-= size/2;

	this.elem = $('',{
		'class':'bubble',
		'css'	: {
			'width'		: size,
			'height'	: size,
			'top'		: top,
			'left'		: left,
			'background-position': (-left)+'px '+(-top)+'px',
			'background-image': 'url('+imgURL+')'
		}
	});

}

// The fly from method takes a starting position, time,
// and a callback function, executed when the animation finishes.

Bubble.prototype.flyFrom = function( startX, startY, time, callBack ){

	time = time || 250;
	callBack = callBack || function(){};

	startX -= this.size/2;
	startY -= this.size/2;

	// Offsetting the element

	this.elem.css({
		'display'				: 'block',
		'backgroundPositionX'	: -startX,
		'backgroundPositionY'	: -startY,
		'left'					: startX,
		'top'					: startY
	});

	// Animating it to where it should be

	this.elem.animate({
		'backgroundPositionX'	: -this.left,
		'backgroundPositionY'	: -this.top,
		'left'					: this.left,
		'top'					: this.top
	}, time, 'easeOutCirc', callBack );

};

// Helper function for generating random
// values in the [min,max] range

function rand( min, max ){
	return Math.floor( Math.random()*((max+1)-min) + min);
}
Il metodo flyFrom() prende una serie di cordinate che servono a determinare la posizione di apparizione della bolla. La funzione ha una durata di 250 millisecondi, personalizzabile a vostro piacimento.
jquery.bubbleSlideshow.js
In questo file costruiamo una funzione che crea un array per ogni bolla, li attribuisce ad un elemento LI e li anima
function showBubbles( stage, imgURL, func ){

	// This function appends a new LI element to the UL
	// and uses it to hold and animate the bubbles.

	var i = 0,
		bubbles = [],
		totalBubbles = 75,
		stageWidth = stage.outerWidth(),
		stageHeight = stage.outerHeight(),
		emptyFunc = function(){};

	// This li holds the bubbles
	var li = $('
').appendTo(stage);

	// This function is passed to the flyFrom method call:

	var callBack = function(){

		// Waiting for the func function to
		// finish and removing the li.

		$.when(func()).then(function(){
			li.remove();
		});
	};

	for( i=0; i b2.top+b2.size/2;
	});

	// Looping through all the bubbles,
	// and triggering their flyFrom methods

	for( i=0; i<="" math.floor(i="" (i="=" i++){="" },="" 250,="" })(="" math.floor="" to="" bubbles.length-1)="" 2,="" :="" 5)*100);="" ?="" be="" ){="" simultaneously="" bubbles[i],="" emptyfunc="" (function(="" callback="" five="" bubble.flyfrom(="" schedules="" bubbles="" settimeout(function(){="" i="" this="" stageheight+200,="" stagewidth="" animated="" }="">
Adesso abbiamo una funzione che crea una serie di bolle e le anima, ma mancano le immagini e ancora un’altra serie di codice. Scriviamo i pezzi mancanti:
jquery.bubbleSlideshow.js
$.fn.bubbleSlideshow = function(photos){

		if(!$.isArray(photos)){
			throw new Error("You need to pass an array of photo URLs as a parameter!");
		}

		photos = photos.reverse();

		var ul = this.addClass('bubbleSlideshow');

		$.each(photos,function(){
			ul.append('
');
		});

		// These methods are available externally and
		// can be used to control the bubble slideshow

		ul.showNext = function(){
			showNext(ul);
		};

		ul.showPrev = function(){
			showPrev(ul);
		};

		ul.autoAdvance = function(timeout){
			timeout = timeout || 6000;
			autoAdvance(ul,timeout);
		};

		ul.stopAutoAdvance = function(){
			stopAutoAdvance(ul);
		};

		return ul;
	};
Con questo codice definiamo una funzione bubbleSlideshow che aggiunge su un elemento UL e prende una serie di URL delle immagini come parametro.
All’interno dello stesso file viene creato un elemento LI per ciascuna immagine inserita nello Slideshow e aggiunge una funzione showNext e showPrev (img successiva, img precedente) e i metodi AutoAdvance e stopAutoAdvance all’elemento UL. Questa e’ l’altra porzione di codice del file jquery.bubbleSlideshow.js:
function autoAdvance(stage,timeout){
	stage.data('timeout',setTimeout(function(){
		showNext(stage);
		autoAdvance(stage,timeout);
	},timeout));
}

function stopAutoAdvance(stage){
	clearTimeout(stage.data('timeout'));
}

function showNext(stage){
	showFrame(stage, stage.find('li.bubbleImageFrame').first());
}

function showPrev(stage){
	showFrame(stage, stage.find('li.bubbleImageFrame').last().prev());
}

function showFrame(stage, frame ){

	// This function shows a frame,
	// passed as a jQuery object

	if(stage.data('working')){
		// Prevents starting more than
		// one animation at a time:
		return false;
	}
	stage.data('working',true);

	var frame = frame.hide().detach();

	// Using the showBubbles function, defined below.
	// The frame is showed after the bubble animation is over.

	showBubbles( stage, frame.find('img').attr('src'), function(){
		stage.append(frame);
		stage.data('working',false);

		// This returns a jQuery Promise object.
		return frame.fadeIn('slow');
	});

}
Tutta questa funzione viene richiamata quando finisce l’animazione della bolla.
Adesso passiamo ad analizzare la presentazione della bolla nel file script.js:
$(function(){
	var photos = [
		'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
		'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
		'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
		'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
		'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
		'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
	];

	var slideshow = $('#slideShow').bubbleSlideshow(photos);

	$(window).load(function(){
		slideshow.autoAdvance(5000);
	});

	// Other valid method calls:

	// slideshow.showNext();
	// slideshow.showPrev();
	// slideshow.stopAutoAdvance();
});
Questo e’ tutto ci manca solo il file CSS per definire le proprieta’ overflow; eccolo

jquery.bubbleSlideshow.css
ul.bubbleSlideshow{
	position:relative;
	list-style:none;
	overflow:hidden;
}

.bubbleSlideshow li{
	position:absolute;
	top:0;
	left:0;
}

.bubbleSlideshow li img{
	display:block;
}

.bubbleSlideshow li div.bubble{
	-moz-border-radius:50%;
	-webkit-border-raidus:50%;
	border-radius:50%;

	background-repeat:no-repeat;
	display:none;
	position:absolute;
}
Questo e’ tutto, abbiamo costruito uno Slideshow con effetto bolla e l’uso di jQuery. Spero che vi sia utile.
Alla prossima!