Grazie a questo fantastico script in jquery possiamo realizzare abbastanza facilmente un muro animato contenente tutti i nostri sponsor o partner. Ad ogni clic sullo sponsor potremo far “flippare” l’immagine selezionata mostrando una breve descrizione con link.

• Assembliamo il codice HTML

<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<img alt="More about google" src="img/sponsors/google.png">
</div>

<div class="sponsorData"><div class="sponsorDescription">
  The company that redefined web search.
</div>
<div class="sponsorURL">
<a href="http://www.google.com/">http://www.google.com/ </a>
</div>
</div>
</div>

• Aggiungiamo un pò di stile

body{
	/* Setting default text color, background and a font stack */
	font-size:0.825em;
	color:#666;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
	margin-bottom:30px;
}

.sponsor{
	width:180px;
	height:180px;
	float:left;
	margin:4px;

	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}

.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */

	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
	border:1px solid #999;

	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset;
}

.sponsorFlip img{
	/* Centering the logo image in the middle of the .sponsorFlip div */

	position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
}

.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}

.sponsorDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:italic;
}

.sponsorURL{
	font-size:10px;
	font-weight:bold;
	padding-left:20px;
}

.clear{
	/* This class clears the floats */
	clear:both;
}

• Un pò di Php

A questo punto abbiamo imbastito la grafica e la pagina che conterra’ il nostro “muro” degli sponsor. Non ci resta che programmare grazie a php cosa deve essere visualizzato una volta che si clicca su uno sponsor (breve descrizione e link).

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
	array('facebook','The biggest social..','http://www.facebook.com/'),
	array('adobe','The leading software de..','http://www.adobe.com/'),
	array('microsoft','One of the top software c..','http://www.microsoft.com/'),
	array('sony','A global multibillion electronics..','http://www.sony.com/'),
	array('dell','One of the biggest computer develo..','http://www.dell.com/'),
	array('ebay','The biggest online auction and..','http://www.ebay.com/'),
	array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
	array('google','The company that redefined w..','http://www.google.com/'),
	array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
	array('mysql','The most popular open source dat..','http://www.mysql.com/'),
	array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
	array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
	array('cisco','The biggest networking and co..','http://www.cisco.com/'),
	array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
	array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

Tutti gli sponsor con relativi link vengono mandati a un array chiamato “sponsors” che può essere richiamato in qualsiasi momento molto facilmente.

// Looping through the array:

foreach($sponsors as $company)
{
	echo'
		<div class="sponsor" title="Click to flip">
			<div class="sponsorFlip">
				<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
			</div>

			<div class="sponsorData">
				<div class="sponsorDescription">
					'.$company[1].'
				</div>
				<div class="sponsorURL">
					<a href="'.$company[2].'">'.$company[2].'</a>
				</div>
			</div>
		</div>

	';
}

• Animiamo il nostro “muro” con Jquery

$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */

	$('.sponsorFlip').bind("click",function(){

		// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

		var elem = $(this);

		// data('flipped') is a flag we set when we flip the element:

		if(elem.data('flipped'))
		{
			// If the element has already been flipped, use the revertFlip method
			// defined by the plug-in to revert to the default state automatically:

			elem.revertFlip();

			// Unsetting the flag:
			elem.data('flipped',false)
		}
		else
		{
			// Using the flip method defined by the plugin:

			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					// Insert the contents of the .sponsorData div (hidden
					// from view with display:none) into the clicked
					// .sponsorFlip div before the flipping animation starts:

					elem.html(elem.siblings('.sponsorData').html());
				}
			});

			// Setting the flag:
			elem.data('flipped',true);
		}
	});

});

Ecco fatto il nostro muro e’ pronto per essere visualizzato! Guarda la demo dello sponsor wall , oppure visita il sito/tutorial del creatore.

Si ringrazia TutorialZine per  il tutorial. Restate collegati con Targetweb.it per altri tutorial e risorse su Jquery e sul mondo del WebDesign!