La demo? Eccola! Provare è sempre più rapido che leggere.. ;) Attenzione che la cosa funziona bene la prima volta, poi la pagina viene messa nella cache e l’immagine di caricamento sparirà in fretta. Per chi vuole scaricare l’esempio completo e guardarlo in santa pace, basta fare il download.

DEMO DOWNLOAD

Per fare ciò, la prima cosa necessaria è l’immagine di caricamento, una gif animata è l’ideale. Si possono generare con le proprie preferenze  tramite tools on line come ad esempio Preloaders o Animizer, col primo si ha a disposizione una nutrita serie di immagini eleganti e predefinite, col secondo si possono creare gif animate a partire da proprie immagini.

Ora veniamo all’HTML, al CSS e al caro jquery. Il riferimento principale è la documentazione del $(document).ready().

Per fare le cose fatte bene, ho utilizzato l’HTML5 Boilerplate, un blasonato framework di frontend che agevola la scrittura del codice ma soprattutto ci da una solida guida per scriverlo bene. Nel template responsivo generato su Initializr ho inserito flexslider, il famoso slider di woothemes. Ho scelto di impostare l’ambiente di demo in questo modo per avere a disposizione uno slider con alcune immagini ad alta risoluzione che impieghino un po’ di tempo per caricarsi, ma ovviamente la parte di javascript e html che riguarda il caricamento può essere utilizzata su qualsiasi sito web.

Vediamo nel dettaglio la tecnica utilizzata, partendo dall’HTML. Basta inserire questo div subito dopo il tag <body>:

<div class="loader">LOADING...</div>

Visualizziamo la scritta loading, a tutto il resto penserà il foglio di stile.

Questo il CSS:

.loader {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #fafafa url(../img/page-loader.gif) no-repeat center center;
text-align: center;
color: #999;
}

Mettiamo a tutta pagina il div, per coprire tutto il contenuto, con una immagine di caricamento come sfondo. Questo blocco verrà rimosso tramite javascript una volta che il caricamento è avvenuto.

Ecco appunto la parte javascript (utilizzando jquery):

$( document ).ready(function() {
//una volta caricato il DOM esegui questo codice
//console.log( "DOM ready!" );
$(window).load(function() {
//una volta caricata l'intera pagina (immagini e i frames..) esegui questo codice
//console.log( "Page ready!" );
//faccio scomparire l'immagine di caricamento
$(".loader").fadeOut("slow");
});
});

Il costrutto $( document ).ready(function() { .. } ci serve per far eseguire “qualcosa” una volta caricato tutto l’albero (DOM), in questo caso scriviamo semplicemente due righe sulla console del browser; mentre il costrutto  $(window).load(function() { .. } ci serve per fare eseguire “qualcosa” una volta caricata l’intera pagina, comprese appunto le immagini o roba contenuta negli iframe. E’ qui, che oltre a scrivere un log sulla console, andiamo a rimuovere il div di caricamento che copriva tutto il contenuto della pagina.

E’ tutto ciò che serve!

NB: ovviamente, se si vuole iniziare a far vedere la pagina e i suoi contenuti durante il caricamento, la stessa tecnica può essere applicata a un div che non copra tutta la pagina, ma ad esempio solo il box dello slider dove si caricheranno le immagini..

Per capire come utilizzare lo slideshow di immagini si può dare un’occhiata alle demo sul sito ufficiale, ma credo che il meglio di questo slider sia nelle possibilità di utilizzo con pezzi di codice formattato (con testo e immagini), per poter creare fluide e accattivanti presentazioni di news o quant’altro.

Andiamo subito al sodo e vediamo come si può utilizzare all’interno di un tema wordpress per presentare articoli o elementi di altro tipo.

Ci sono tre cose fondamentali: il codice javascript, il codice html e il codice CSS. Partiamo con javascript; all’interno del tag <head> dovremo mettere questo pezzo di codice:

<script type="text/javascript">
$(window).load(function() {
$('#flexslider').flexslider({
animation: "slide",
controlsContainer: "#flex-container",
prevText: "Prec",
nextText: "Succ"    });
});


Mentre nel codice php che presenta gli articoli, ad esempio nel file home.php, dovremo utilizzare questo:


<?php query_posts('showposts=6&cat=3'); //prendo gli ultimi 6 articoli delle top news ?>
<?php if (have_posts()) : ?>
<div>
<div id="flex-container">
<div id="flexslider">
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<div>
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium', array('class' => 'img-news')); ?>
<?php endif; ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Leggi tutto...</a>
<div><div data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="lucida grande"></div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
</div>
<?php endif; ?>
<?php // Reset Query
wp_reset_query(); ?>


Il mestiere di questo pezzo di codice non è altro che recuperare gli ultimi 6 articoli di una determinata categoria (con ID=3), tramite la function query_posts(); per poi presentare ogni articolo con la sua immagine in evidenza e il suo riassunto. Al di là delle classi css attribuite agli elementi, che sono comunque poco rilevanti per il nostro esempio, ciò che mi preme far notare è che tutti questi elementi stanno racchiusi in un elemento di lista <li>, che sarà uno dei 6 slide che ruoteranno.

Veniamo ora al bello: il foglio di stile. Di seguito il mio CSS riadattato partendo da quello di default.

/* jQuery FlexSlider v2.0 */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
/*.flexslider .slides img {width: 100%; display: block;} */
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flex-container { position: relative;}
.flexslider {margin: 0 0 5px 0; position: relative;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav { display: block; position: absolute; top: 50%; background: transparent; width: 100%;
opacity: 0.2;
transition:opacity 1s;
-moz-transition:opacity 1s; /* Firefox 4 */
-webkit-transition:opacity 1s; /* Safari and Chrome */
-o-transition:opacity 1s; /* Opera */ }
.flex-container .flex-direction-nav:hover { opacity: 1; }
.flex-direction-nav a {width: 30px; height: 30px; margin: -30px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; cursor: pointer; text-indent: -9999px; }
.flex-direction-nav .next {background-position: 100% 0; right: 5px;}
.flex-direction-nav .prev {left: 5px;}
/* Control Nav */
.flex-control-nav {width: 100%; position: relative; bottom: 0px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-nav li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-nav li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .active {opacity: 1; cursor: default;}


Con un pizzico di CSS3 è possibile fare in modo che le frecce di navigazione appaiano evidenti solo al passaggio del mouse, mentre rimangano in trasparenza mentre scorrono le notizie. Il risultato finale si può vedere qui.

Buono slideshow a tutti. ;)