Flexslider applicato coi Rio: uno slider jquery davvero flessibile.

Pubblicato da Davide, lunedì 1 ottobre 2012 Nessun Commento »

Di slider e slideshow ce ne sono una infinità. Col tempo ne ho provati e utilizzati diversi, ma come flexslider ce ne sono pochi. Credo di aver finalmente trovato ciò che cercavo: flessibile, altamente configurabile ed adattabile, semplice, e soprattutto funzionante anche con dispositivi touch (iphone, ipad, android, ecc..). Si tratta di una creazione di Woothemes, rilasciata gratuitamente e utilizzabile da chiunque. Per vederlo subito all’opera, nel modo in cui l’ho impiegato, basta aprire il sito dei Rio o di Bluebeet Studio. Questo per dire che ho aggiornato il portfolio, ogni tanto è bene farlo. ;)

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. ;)

Nessun articolo correlato