Modificare CarouFredSel per creare Slideshow

I programmatori di ogni Web Agency che si rispetti devono necessariamente tenersi sempre aggiornati, specialmente di questi periodi che stiamo passando (più o meno) lentamente all'HTML5 e CSS3. Visto che la bellezza di Internet è la suo forza di condivisione, riteniamo necessario condividere con voi, web designer interessati, uno dei tanti modi per creare slide mutlimediali senza ricorrere all'odiato Flash! Parola a Marco!!!

Il mio primo post, su questo blog, nasce da una tranquilla serata davanti alla TV ahimè mancata.
Si, lo so, è lavoro e dovrei esser serio, ma mettiamo tra gli attributi della serietà anche l'esser sincero, e cominciamo con questa pillola che riguarda un po' di programmazione web.

Chi tra noi smanettoni del web non conosce CarouFredSel?
Mai sentito parlare di questo gioiellino?
Male!
Esistono miglia di post illuminanti, che arrivano tutti a una seria conclusione: programmare da soli lunghe funzioni javascript per creare sliders di immagini, o “scrolling div” è un lavoro inutile, oltre che poco appagante!!!

Grazie a CarouFredSel infatti, è facilissimo creare slider orizzontali o verticali di contenuti html.
In questo modo potete mostrare una dietro l'altra immagini, video e qualsiasi altro contenuto multimediale vi passi per la mente. Con pochissimo sforzo in più, non sarà poi difficile creare applicazioni di qualsiasi tipo utilizzando la vostra creatività di sviluppatori. Ovunque ci siano contenuti in movimento,  CarouFredSel, plugin della straordinaria jQuery, può darvi una mano.

Con un po' di Css poi, è possibile manipolarne l'aspetto grafico oltre le più roboanti fantasie.

Cosa ci serve, per includerla nei nostri progetti? Vediamo un po' di esempi:

Tra head e head

<head>
//includiamo jQuery, ovviamente senza il plugin non funzionerebbe
<script type="text/javascript" language="javascript" src="jquery.js">
</script>
//la nostra caroufredsel, versione packed
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-2.4.3-packed.js"></script>
<script type="text/javascript" language="javascript"> //appena il document è pronto, settiamo sul contenitore, con id
//item1 un oggetto caroufredsel. Questo è il settaggio più basilare
$(document).ready(function()
{
$("#item1").carouFredSel();
});
</script>
</head>


nel body

<body>
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
</ul>
</body>


e il gioco è fatto!!!
Senza un po' di css, però, tutto questo lavoro sarebbe inutile. Quindi vediamo come fare...

<style type="text/css" media="all">
html, body {padding: 0;
margin: 0;
height: 100%;}
body, div, p {
font-family: Arial, Helvetica, Verdana;
color: #333;}
body {
background-color: #eee;}
h1 {font-size: 60px;}a, a:link, a:active, a:visited {color: black;
text-decoration: underline;}
a:hover {color: #9E1F63;}
#intro {
width: 580px;
margin: 0 auto;}.
wrapper {background-color: white;

width: 480px;
margin: 40px auto;
padding: 50px;
box-shadow: 0 0 5px #999;}
.list_carousel {background-color: #ccc;
margin: 0 0 30px 60px;
width: 360px;}
.list_carousel ul {margin: 0;padding: 0;
list-style: none;
display: block;}
.list_carousel li {font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 50px;
height: 50px;
padding: 0;
margin: 6px;
display: block;
float: left;}
.clearfix {float: none;
clear: both;}
.prev {float: left;
margin-left: 10px;}
.next {float: right;
margin-right: 10px;}
.pager {float: left;
width: 300px;
text-align: center;}
.pager a {margin: 0 5px;
text-decoration: none;}
.pager a.selected {
text-decoration: underline;}
.timer {background-color: #999;
height: 6px;
width: 0px;}
</style>

Questo però, oggettivamente sono capaci di dirvelo un po' tutti qui sul Web. Quindi qual'è la cosa che mi preme ricordarvi? ...Che i prodotti standardizzati, non bastano mai, per qualsiasi banalissimo progetto e che se si pensa di essere dei buoni sviluppatori Web e far felice il cliente è sempre meglio cercare di "cucire" il prodotto su misura senza omologarlo.

Tra i propri settaggi, CarouFredSel permette qualcosa di simile:

<head>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.0.7-packed.js"></script>
//un 'plugin' per l'uso del mouse con altri “oggetti” jquery. Lo troverete facilmente, cercandone il nome su google, se non lo conoscete, iniziate a usarlo.
<script type="text/javascript" language="javascript" src="jquery.mousewheel.js"></script>
$(function() {
// Basic carousel
// Scrolled by user interaction
$('#foo2').carouFredSel({
prev: '#prev2', // questi sono link ad ancore (<a>) o bottoni( button) per andare avanti o indietro.
next: '#next2',
direction : "up", // settando questo, lo mandi da su a giù,
pagination: {
container: "#pager2"},
scroll : {mousewheel:true, //inserisci il mouse tra i controlli},
auto: false //elimina lo scrolling automatico};
</head>


Ovvero, ci permette di impostare due bottoni o due link che corrispondo ad avanti e indietro, per i contenuti, e l'uso della rotellina del mouse, per “scrollare” il contenuto.
Abbiamo in mano il mondo, siamo web developer con i fiocchi, non ci batte nessuno e Yeah! 

Non esiste limite alla fantasia umana e nemmeno a quella dei clienti (e ci fa molto piacere...). Una delle prime cose che il cliente vi chiederà di cambiare? Il comportamento delle frecce per esempio. Orrore! Già tremiamo. Il comportamento delle frecce è quello, e se i tizi di CarouFredSel non ci hanno pensato, cosa potremo fare? Come si fa a controllare “esternamente” il funzionamento di questo accrocchio? Cavolo, ci siamo ricordati proprio ora che noi odiamo le cose programmate da altri... soprattutto perché non abbiamo la minima di idea di come siano fatte!

Come fare???
Usiamo delle semplici Function!

jQuery, è una straordinaria risorsa, che ci permette di “fare di più”, scrivendo meno. Oltre a ciò, è una oramai indispensabile “interfaccia” tra noi e javascript.

In javascript possiamo tranquillamente scrivere una funzione che cambia dinamicamente il contenuto di un div...

<script>
function dimmi(mess)
{a=document.getElementById('divmess');
a.innerHTML=mess;}
</script>


cosa ci impedisce di farlo con jQuery ?

<script>
function dimmi(mess)
{$('#divmess').html(mess);}
</script>


jQuery può infatti sostituire molto di quello che facciamo in puro javascript. Il $ è un selettore incredibilmente utile, per tutto ciò che necessitiamo.

Tornando a CarouFredSel, perché lo amo così tanto?
Perché chi l'ha programmata, ha previsto funzioni per controllarla esternamente.
A noi basta usare la Trigger(), che ci permette di scoprire la “paginazione” e di andare a a una determinata pagina.

Riassumendo tutto, per controllare esternamente CarouFredSel, ci basterà scrivere 3 funzioni:

function pagina0()
{$("#foo2").trigger("slideTo", 0); //.trigger( vai a , 0) dove #foo2, ovviamente è il contenitore su cui “gira” caroufredsel}
function interroga()
{return $("#foo2").triggerHandler("currentPage"); // return numero di pagina}
function avanza()
{$("#foo2").trigger("next"); }
function indietro()
{$("#foo2").trigger("prev");}


e il gioco è fatto!
Ora che abbiamo imparato il giochetto, possiamo, spulciando un po' la documentazione di CarouFredSel, fare di tutto... Se avessimo affrontato prima jQuery, seriamente, prima di disperarci dopo aver letto poche righe della guida di html.it (rigorosa e preziosa, come sempre), non avremmo perso tempo nel disperarci, pregare in aramaico antico e “googlare” come matti.  

Ma le sorprese non finiscono mai....

In un recente progetto, dovevo inserire CarouFredSel in una pop-up (orrore!!!) fatta tramite jQuery, ovvero un div nascosto, che attivato da un evento, viene mostrato in primo piano.
E' stato doloroso, scoprire che CarouFredSel , si bloccava e non ne voleva più sapere. Come ho risolto? Me ne sono costruita una io, scoprendo quanto sia facile e potente da usare. Nel prossimo tutorial vi parlerò del mio modo di fare le scrolling div, con jQuery .

Lo faccio solo perché il mio esempio, magari un poco più rozzo di altri sofisticati tutorial sulla rete, sia maggiormente adattabile, e comprensibile (spero).
Sì lo so! Si poggia pesantemente sull'attributo “id” ma nessuno è perfetto, a questo mondo.
Marco Bellomo

Post più popolari