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.
<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>
<body>
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
</ul>
</body>
<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>
<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>
<script>
function dimmi(mess)
{a=document.getElementById('divmess');
a.innerHTML=mess;}
</script>
<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.
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.
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
//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...
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:
<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.
Sì lo so! Si poggia pesantemente sull'attributo “id” ma nessuno è perfetto, a questo mondo.
Marco Bellomo
la formattazione del codice nell'articolo è illegibile.
RispondiEliminagrazie, la prossima volta faremo più attenzione... Non è che blogger permetta chissà quante evoluzioni, però concordo con la tua osservazione...
RispondiElimina