NOTA BENE: Il Bloggatore ha rilevato dei problemi di collegamento con il blog indicato come fonte originale dell'articolo. Pertanto, al fine di consentire agli utenti di leggere questo articolo, se possibile, viene reso temporaneamente disponibile il post completo.
Nuovo giro con jQuery, finirà mai di stupirmi? probabilmente sì.. eheh ma per ora riesce a sorprendermi sempre! Con blogger abbiamo la possibilità di utilizzare JSON per effettuare le ricerche su posts o commenti fatti. Ora non ho verificato bene quali sono i dati che si possono tirar fuori.A tal proposito ci dovrebbe essere una pagina proprio sul sito di Blogger se non ricordo male.In ogni caso, sfruttando questo protocollo opensearch e json è possibile recuperare gli articoli che corrispondono a una certa o più parole chiave (tags) e visualizzarli con un semplice slideshow.
In questo tutorial si vedranno due fasi: la prima quella di realizzo del plugin, sicuramente per molti di voi molto banale e la seconda quella di applicazione sul proprio blogger.
Ok, iniziamo: l'idea di base è quella di non dover gestire cosa metterci dentro in maniera statica... questo ha dei vantaggi, primo fra tutti l'auto aggiornamento in base a cosa scriviamo. In pratica pensandoci quasi tutti i blog (quasi certo) hanno una particolarità .. ossia una immagine (a volte anche abbastanza grande) dentro al post e le prime righe solitamente sono una sorta di cappello all'articolo che segue, quasi a invogliare a leggere.
Se avete questi requisiti lo script che vedremo da adesso dovrà avere davvero poche modifiche, nel caso chiedete e vedremo come applicarlo alla vostra situazione.
Ho intenzione di inserire una demo in fondo a questo articolo quindi per chi volesse vederlo in azione, scorra la pagina.. ma tornate poi a leggere da qui mi raccomando!!
Premesse: Di query ho usato soprattutto gli effetti, il metodo id selezione davvero veloce e la sua grande caratteristica di chaining ossia l'incatenamento dei metodi.. fai questo quando finisci questa azione etc all'infinito. Di javascript ho usato il DOM per recuperare l'element e quello per gestire il timeout (non l'interval per paura che per qualche motivo non si interrompesse e anzi iniziassero a esserci n chiamate contemporanee).
Codice script jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
var fadeInTime = 1000;
var fadeOutTime = 2000;
var showInTime = 2500;
var showOutTime = 1000;
var intervalTime = 6000;
var numchars = 250;
var cur;
var cur2;
var intid;
function cstfade(direction) {
clearTimeout(intid);
if (cur) {
if (direction == 'right') {
cur2.hide();
if ( cur2.attr('class') == 'last' ) cur2 = $('#ppt2 li:first');
else cur2 = cur2.next();
cur2.show();
}
else {
cur2.hide();
if ( cur2.attr('class') == 'first' ) cur2 = $('#ppt2 li:last');
else cur2 = cur2.prev();
cur2.show();
}
$('#ppt2').animate({"z-index": 1, "opacity":1 }, showInTime, "linear", function() {});
//fadeOut
cur.slideUp(fadeOutTime, function () {
if (direction == 'right') {
if ( cur.attr('class') == 'last' ) cur = $('#ppt li:first');
else cur = cur.next();
//fadeIn
cur.slideDown(fadeInTime, function() { intid = setTimeout( "right()", intervalTime ); });
}
else {
if ( cur.attr('class') == 'first' ) cur = $('#ppt li:last');
else cur = cur.prev();
//fadeIn
cur.slideDown(fadeInTime, function() { intid = setTimeout( "left()", intervalTime ); });
}
$('#ppt2').animate({"z-index": 0, "opacity":0 }, showOutTime, "linear", function() {});
});
}
}
function right() { cstfade('right'); }
function left() { cstfade('left'); }
function slidenews(json)
{
var divppt = document.getElementById('ppt');
divppt.innerHTML = '';
var divppt2 = document.getElementById('ppt2');
divppt2.innerHTML = '';
for (var i = 0; i < json.feed.entry.length; i++)
{
var entry = json.feed.entry[i];
var link = '';
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
link = entry.link[k].href;
break; } }
divppt.innerHTML = divppt.innerHTML + '<li><span>' + entry.title.$t + '</span><br/>'
+ '<br/>'+ entry.content.$t.replace(/(<([^>]+)>)/ig,"").substr(0,numchars)+'..'
+ ' <a class="linkart" href="'+link+'">continua a leggere</a>'
+ '</li>';
//find "src=blabla" and store everything after it (up to a space)
var geturl = new RegExp(/src=([^ ]+)/i);
//run the regex on z and return the stored result
var url = geturl.exec(entry.content.$t)[1];
// remove domain
//url = url.replace(/http:\/\/[^\/]+/i,"");
divppt2.innerHTML = divppt2.innerHTML + '<li><img src='+url+'></li>';
}
$('#ppt li:gt(0)').hide();
$('#ppt li:last').addClass('last');
cur = $('#ppt li:first');
cur.addClass('first');
$('#ppt2 li:gt(0)').hide();
$('#ppt2 li:last').addClass('last');
cur2 = $('#ppt2 li:first');
cur2.addClass('first');
clearTimeout(intid);
intid = setTimeout( "right()", intervalTime);
}
</script>
Dando uno sguardo veloce sicuramente avrete notato due metodi importanti:- cstfade: che si occupa dell'aspetto grafico viene chiamato in modo ciclico, ossia ogni volta che viene cambiato articolo o che viene premuto su avanti o indietro.
- slidenews: che viene richiamato quando vengono recuperati gli articoli da visualizzare, naturalmente tramite json come dicevamo e opensearch. Attenzione che viene richiamato solitamente una sola volta.
- fadeInTime: apparizione dell'articolo nuovo (default 1000 ms)
- fadeOutTime: dissolvenza dell'articolo a video (default 2000 ms )
- showInTime: tempo di apparizione immagine (default 2500 ms )
- showOutTime: tempo di dissolvenza immagine (default 1000 ms )
- intervalTime: intervallo fra un articolo e l'altro (default 6000 ms )
Bene questa era la parte difficile, davvero!!
Passiamo al blocco HTML: per far funzionare il tutto, ovviamente, abbiamo bisogno dei vari elementi.. ossia di queste 7 righe.
<div id="news">
<a id="lefta" href="javascript:left();"></a>
<a id="righta" href="javascript:right();"></a>
<ul id="ppt"><!--- NOTHING HERE, VOID ---></ul>
<ul id="ppt2"><!--- NOTHING HERE, VOID ---></ul>
</div>
<script src='http://ondare.blogspot.com/feeds/posts/default/-/jQuery?alt=json-in-script&callback=slidenews&max-results=4' type='text/javascript'></script>
Come si vede, c'è un div news contenitore, due anchors lefta e righta (ossia per andare avanti e indietro), e due elementi ul che conterranno la lista di articoli e immagini da alternare.La riga script ovviamente identifica la chiamata (opensearch / json) e deve essere posizionata dopo il blocco div news.
Se volete modificare il numero di articoli che visualizza dovete cambiare il numero che segue a max-results nella riga script precedente. Di default è max-results=4.
Bene ora non resta che impostare il blocco CSS così da concludere questa prima parte di realizzo:
<style type="text/css">
div#news { /* box padre */
border:1px solid #D38561;
background-color:white;
width:370px;
height:160px;
padding:0;
margin:0;
overflow:hidden;
position:relative;
}
ul#ppt { /* box articolo */
width:290px;
height:160px;
background-color:white;
padding:0;
margin:0;
overflow:hidden;
float:right;
position;absolute;top:0;left:40px;
z-index:1;
}
#ppt li { /* corpo articolo */
list-style-type: none;
font-size:12px;
width:100%;
height:100%;
padding:0;
color:#333333;
background-color:white;
position;absolute;top:0;left:40px;
}
#ppt2 li { /* corpo articolo */
list-style-type: none;
font-size:12px;
width:100%;
height:100%;
padding:0;
margin:auto;
color:#333333;
background-color:white;
position;absolute;top:0;left:40px;
}
#ppt li span { /* titolo articolo */
position;absolute;top:0;left:40px;
font-weight:bold;
font-size:14px;
color:#D38561;
}
#ppt2 {
/*z-index:2;*/
position:absolute;top:0;left:40px;
width:290px;
height:160px;
padding:0;
margin:0;
/*float:right;*/
overflow:hidden;
filter:alpha(opacity=25);
-moz-opacity:.0;
opacity:.0;
background-color:white;
/* background-image:url(sfondo.png); */
}
#ppt2 img {
display:block; /*allows the element to take auto margins*/
margin:0 auto; /*centers in compliant browsers*/
text-align:center; /*centers in old versions of IE*/
}
#lefta { /* pulsante sx */
float:left;
width:35px;height:160px;border:0;margin:0;padding:0;
background-image:url(left.png);
}
#lefta:hover { background-image:url(lefta.png); }
#righta { /* pulsante dx */
float:right;
width:35px;height:160px;border:0;margin:0;padding:0;
background-image:url(right.png);
}
#righta:hover { background-image:url(righta.png); }
.linkart {
color:#D38561;
}
</style>
Ok, di questo ultimo blocco possiamo cambiare tutte le parti grafiche. Background, border, margin, dimensioni, facendo attenzione a non toccare i vari float e i position (a meno di non voler cambiare il flusso degli oggetti, nel caso sperimentate pure).Per i più smanettoni che vogliono mettere subito le mani in pasta a tutto qui c'è tutto html+script+css (ossia i pezzi precedenti) ovviamente mancano le immagini.
<html>
<head>
<style type="text/css">
div#news { /* box padre */
border:1px solid #D38561;
background-color:white;
width:370px;
height:160px;
padding:0;
margin:0;
overflow:hidden;
position:relative;
}
ul#ppt { /* box articolo */
width:290px;
height:160px;
background-color:white;
padding:0;
margin:0;
overflow:hidden;
float:right;
position;absolute;top:0;left:40px;
z-index:1;
}
#ppt li { /* corpo articolo */
list-style-type: none;
font-size:12px;
width:100%;
height:100%;
padding:0;
color:#333333;
background-color:white;
position;absolute;top:0;left:40px;
}
#ppt2 li { /* corpo articolo */
list-style-type: none;
font-size:12px;
width:100%;
height:100%;
padding:0;
margin:auto;
color:#333333;
background-color:white;
position;absolute;top:0;left:40px;
}
#ppt li span { /* titolo articolo */
position;absolute;top:0;left:40px;
font-weight:bold;
font-size:14px;
color:#D38561;
}
#ppt2 {
/*z-index:2;*/
position:absolute;top:0;left:40px;
width:290px;
height:160px;
padding:0;
margin:0;
/*float:right;*/
overflow:hidden;
filter:alpha(opacity=25);
-moz-opacity:.0;
opacity:.0;
background-color:white;
/* background-image:url(sfondo.png); */
}
#ppt2 img {
display:block; /*allows the element to take auto margins*/
margin:0 auto; /*centers in compliant browsers*/
text-align:center; /*centers in old versions of IE*/
}
#lefta { /* pulsante sx */
float:left;
width:35px;height:160px;border:0;margin:0;padding:0;
background-image:url(left.png);
}
#lefta:hover { background-image:url(lefta.png); }
#righta { /* pulsante dx */
float:right;
width:35px;height:160px;border:0;margin:0;padding:0;
background-image:url(right.png);
}
#righta:hover { background-image:url(righta.png); }
.linkart {
color:#D38561;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
var fadeInTime = 1000;
var fadeOutTime = 2000;
var showInTime = 2500;
var showOutTime = 1000;
var intervalTime = 6000;
var numchars = 250;
var cur;
var cur2;
var intid;
function cstfade(direction) {
clearTimeout(intid);
if (cur) {
if (direction == 'right') {
cur2.hide();
if ( cur2.attr('class') == 'last' ) cur2 = $('#ppt2 li:first');
else cur2 = cur2.next();
cur2.show();
}
else {
cur2.hide();
if ( cur2.attr('class') == 'first' ) cur2 = $('#ppt2 li:last');
else cur2 = cur2.prev();
cur2.show();
}
$('#ppt2').animate({"z-index": 1, "opacity":1 }, showInTime, "linear", function() {});
//fadeOut
cur.slideUp(fadeOutTime, function () {
if (direction == 'right') {
if ( cur.attr('class') == 'last' ) cur = $('#ppt li:first');
else cur = cur.next();
//fadeIn
cur.slideDown(fadeInTime, function() { intid = setTimeout( "right()", intervalTime ); });
}
else {
if ( cur.attr('class') == 'first' ) cur = $('#ppt li:last');
else cur = cur.prev();
//fadeIn
cur.slideDown(fadeInTime, function() { intid = setTimeout( "left()", intervalTime ); });
}
$('#ppt2').animate({"z-index": 0, "opacity":0 }, showOutTime, "linear", function() {});
});
}
}
function right() { cstfade('right'); }
function left() { cstfade('left'); }
function slidenews(json)
{
var divppt = document.getElementById('ppt');
divppt.innerHTML = '';
var divppt2 = document.getElementById('ppt2');
divppt2.innerHTML = '';
for (var i = 0; i < json.feed.entry.length; i++)
{
var entry = json.feed.entry[i];
var link = '';
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
link = entry.link[k].href;
break; } }
divppt.innerHTML = divppt.innerHTML + '<li><span>' + entry.title.$t + '</span><br/>'
+ '<br/>'+ entry.content.$t.replace(/(<([^>]+)>)/ig,"").substr(0,numchars)+'..'
+ ' <a class="linkart" href="'+link+'">continua a leggere</a>'
+ '</li>';
//find "src=blabla" and store everything after it (up to a space)
var geturl = new RegExp(/src=([^ ]+)/i);
//run the regex on z and return the stored result
var url = geturl.exec(entry.content.$t)[1];
// remove domain
//url = url.replace(/http:\/\/[^\/]+/i,"");
divppt2.innerHTML = divppt2.innerHTML + '<li><img src='+url+'></li>';
}
$('#ppt li:gt(0)').hide();
$('#ppt li:last').addClass('last');
cur = $('#ppt li:first');
cur.addClass('first');
$('#ppt2 li:gt(0)').hide();
$('#ppt2 li:last').addClass('last');
cur2 = $('#ppt2 li:first');
cur2.addClass('first');
clearTimeout(intid);
intid = setTimeout( "right()", intervalTime );
}
</script>
</head>
<body>
<div id="news">
<a id="lefta" href="javascript:left();"></a>
<a id="righta" href="javascript:right();"></a>
<ul id="ppt"><!--- NOTHING HERE, VOID ---></ul>
<ul id="ppt2"><!--- NOTHING HERE, VOID ---></ul>
</div>
<script src='http://ondare.blogspot.com/feeds/posts/default/-/jQuery?alt=json-in-script&callback=slidenews&max-results=4' type='text/javascript'></script>
</body>
</html>
Bene, ora per chi volesse integrarlo in posti diverso da blogger o comunque in modo proprio l'articolo è finito qui, per gli altri che come me hanno blogger bisogna fare ancora un'ultimo sforzo.Integrazione in blogger: ovviamente per integrarlo ci saranno da fare gli stessi passi che avevo descritto nell'articolo jQuery - lightBox e Blogger anche in galleria.
Per evitarvi lo sforzo però vi elenco i passi da fare, per fortuna sono semplici ma bisogna fare attenzione! Valgono le avvertenze di salvare tutto (commenti, stili, colonna, parti custom, posts, js etc etc giusto per evitarmi grane).
var fadeInTime = 1000; var fadeOutTime = 2000; var showInTime = 2500; var showOutTime = 1000; var intervalTime = 6000; var numchars = 200; var cur; var cur2; var intid; function cstfade(direction) { clearTimeout(intid); if (cur) { if (direction == 'right') { cur2.hide(); if ( cur2.attr('class') == 'last' ) cur2 = $('#ppt2 li:first'); else cur2 = cur2.next(); cur2.show(); } else { cur2.hide(); if ( cur2.attr('class') == 'first' ) cur2 = $('#ppt2 li:last'); else cur2 = cur2.prev(); cur2.show(); } $('#ppt2').animate({"z-index": 1, "opacity":1 }, showInTime, "linear", function() {}); //fadeOut cur.slideUp(fadeOutTime, function () { if (direction == 'right') { if ( cur.attr('class') == 'last' ) cur = $('#ppt li:first'); else cur = cur.next(); //fadeIn cur.slideDown(fadeInTime, function() { intid = setTimeout( "right()", intervalTime ); }); } else { if ( cur.attr('class') == 'first' ) cur = $('#ppt li:last'); else cur = cur.prev(); //fadeIn cur.slideDown(fadeInTime, function() { intid = setTimeout( "left()", intervalTime ); }); } $('#ppt2').animate({"z-index": 0, "opacity":0 }, showOutTime, "linear", function() {}); }); } } function right() { cstfade('right'); } function left() { cstfade('left'); } function slidenews(json) { var divppt = document.getElementById('ppt'); divppt.innerHTML = ''; var divppt2 = document.getElementById('ppt2'); divppt2.innerHTML = ''; for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; var link = ''; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { link = entry.link[k].href; break; } } divppt.innerHTML = divppt.innerHTML + '
' + '
'+ entry.content.$t.replace(/(< ([^>]+)>)/ig,"").substr(0,numchars)+'..' + ' continua a leggere' + ''; //find "src=blabla" and store everything after it (up to a space) var geturl = new RegExp(/src=([^ ]+)/i); //run the regex on z and return the stored result var url = geturl.exec(entry.content.$t)[1]; // remove domain //url = url.replace(/http:\/\/[^\/]+/i,""); divppt2.innerHTML = divppt2.innerHTML + '
Cercate nella parte di head dove ci sono altri script e copiatelo subito dopo.
Ora fate lo stesso con il blocco CSS copiandolo nell'elemento:
<b:skin><![CDATA[/* .... ]]></b:skin>Dove ci sono i puntini ovvimanete avrete il codice e proprio lì dentro facendo attenzione a non metterlo a casaccio copierete le righe del blocco.
Bene, questa era la parte più delicata.
Ora prendete il blocco HTML e copiatelo dovunque vogliate, ad esempio in un elemento della colonna (sempre tramite draft Blogger > Layout > Elementi) ossia aggiungendo un gadget HTML/JavaScript. Oppure in uno o più articoli etc. Ok il tutto è pronto e se abbiamo cambiato i percorsi delle immagini e la stringa di chiamata JSON a questo punto è tutto pronto.
Complimenti, anche voi avrete uno slideshow su blogger proprio come questo che segue:
Collegamenti esterni: jQuery
- Articolo precedente: Video della modalità online Live Tournament di Tiger Woods PGA Tour 10
- Articolo successivo: Le periferiche USB più strane – Parte 1
SEGNALA / INVIA QUESTO POST:
Hai trovato questo articolo interessante? Iscriviti GRATIS ai nostri feeds!
