Tutorial MooTools: BarackSlideshow

Creato il 01 luglio 2012 da Iwebdesigner @Iwebdesigner_it

Ecco uno slider ispirato a quello che si trova nel sito di Barack Obama, da cui il nome e realizzato in MooTools, molto pratico ed elegante per organizzare gli sliders dei nostri siti.

In download troviamo tutti i files suddivisi per cartelle e le immagini: andiamo innanzitutto a vedere quali collegamenti creare nell’<head>, per quanto riguarda la parte Javascript e Css.

MooTools BarackSlideshow

Javascript:

<script charset="utf-8" type="text/javascript" src="js/core.js"></script><script charset="utf-8" type="text/javascript" src="js/more.js"></script>
<script charset="utf-8" type="text/javascript" src="js/morphlist.js"></script><script charset="utf-8" type="text/javascript" src="js/barackslideshow.js"></script>
<script charset="utf-8" type="text/javascript" src="js/demo.js"></script>

CSS:

    <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" title="Stylesheet" charset="utf-8" />
    <link rel="stylesheet" href="css/barackslideshow.css" type="text/css" media="screen" title="Stylesheet" charset="utf-8" />

E passiamo all’HTML, col solito <ul> a contenere gli elementi della lista che andranno alternandosi nella cornice, posizionati all’interno dei <li>: in questo caso si tratta di immagini, richiamate con <img src=”#”>. Il secondo <ul> contiene i collegamenti ipertestuali per attivare lo slider manualmente.

<div id="slideshow"><span id="loading">Loading</span>
<ul id="pictures">
	<li><img title="Melbourne" src="images/melbourne.jpg" alt="Melbourne" /></li>
	<li><img title="Buenos Aires" src="images/buenos_aires.jpg" alt="Buenos Aires" /></li>
	<li><img title="Urubamba" src="images/urubamba.jpg" alt="Urubamba" /></li>
	<li><img title="London" src="images/london.jpg" alt="London" /></li>
	<li><img title="Venice" src="images/venice.jpg" alt="Venice" /></li>
	<li><img title="Paris" src="images/paris.jpg" alt="Paris" /></li>
	<li><img title="Osaka" src="images/osaka.jpg" alt="Osaka" /></li>
</ul>
<ul id="menu">
	<li><a href="images/melbourne.jpg">Melbourne</a></li>
	<li><a href="images/buenos_aires.jpg">Buenos Aires</a></li>
	<li><a href="images/urubamba.jpg">Urubamba</a></li>
	<li><a href="images/london.jpg">London</a></li>
	<li><a href="images/venice.jpg">Venice</a></li>
	<li><a href="images/paris.jpg">Paris</a></li>
	<li><a href="images/osaka.jpg">Osaka</a></li>
</ul>
</div>

Al di sotto dei due <ul> troviamo una serie di <input> che ci permettono una selezione in tempo reale del tipo di transizione che vogliamo visualizzare. Cancelliamo pure questa parte se non ci serve, e apriamo demo.js. Nella seguente riga, possiamo decidere quali tipi di transizione permettere:

var slideAvailable = ['slide-left', 'slide-right', 'slide-top', 'slide-bottom', 'fade'];

Nell’esempio sono tutte implementate. Se vogliamo che le immagini appaiano con un fade, modifichiamo la riga in questo modo:

  var slideAvailable = ['fade'];

Ed eccoci al download, e al link degli sviluppatori di questa pregevole risorsa:

FONTE


Potrebbero interessarti anche :

Possono interessarti anche questi articoli :