Tutorial MooTools: Slimbox gallery

Proseguiamo con l’assemblaggio di plugin all’interno del nostro layout a tema spionistico (qui e qui potete trovare i precedenti tutorial) con questa semplice variante del celebre Lightbox, questa volta in salsa MooTools. Scaricate la seguente immagine, clickando l’anteprima per visualizzarne la risoluzione originale:

Tutorial Mootools Slimbox

Isolate con Adobe Photoshop i 4 rettangoli, salvandoli e cambiandone la dimensione e l’opacità per la fase rollover come abbiamo già visto: in alternativa sfruttate le precedenti risorse. Scomodiamo in ogni caso il Re della fotomanipolazione per creare 4 immagini di grandi dimensioni, quelle che al click sull’anteprima saranno mostrate all’interno dello Slimbox. Salviamole come [numero]_big.jpg. Abbiamo dunque una pagina index.html col seguente Css:

<style type="text/css">

			html,body{
			background-color: #fff;
			height: 100%;
			width: 100%;
			margin: 0;
			overflow: hidden;

			}

			div#container{
			margin:0px auto;
			text-align:center;
			background-color: #fff;
			}

			#content{
			position: absolute;
			margin:0 auto;
			width:960px;
			height:800px;
			top: 50%;
			left: 50%;
			margin-top: -147px;
			margin-left: -480px;
			background-color: #fff;
			}

			#footer{
			position:absolute;
			bottom:0;
			}

			ul{
			list-style: none;
			margin: 0;
			padding: 0;
			padding-bottom: 9px;

			}

			li {
			display: inline;
			margin:0px auto;
			padding:10px;
			}

			/*Contenuto suddiviso in 4 parti*/

			div#contentsplit{
			width:50%;
			margin:0px auto;
			text-align:center;
			}

			div.split4 div{
			float: left;
			}

			p{
			padding:10px;
			}

		</style>

Aggiungiamo nell’<head> il richiamo ai 2 files javascript necessari per attivare Slimbox, e al file Css:

<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript" src="js/slimbox.js"></script>
	<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

I tre files si trovano nelle risorse in download. Da notare che Slimbox risulta operativo solo con questa versione di MooTools, l’integrazione di altre versioni lo renderà inutilizzabile (ed ecco spiegata la rimozione dell’effetto Accordion visto nel tutorial precedente).

Non resta che attivare le funzioni della galleria all’interno del nostro <div> di contenuto:

<div>

	<p><a href="images/1_big.jpg" rel="lightbox" title="Beautiful, isn't it?"><img alt="1" src="images/1.jpg" onmouseover="this.src='images/1_over.jpg';" onmouseout="this.src='images/1.jpg';"/></a></p></div>

Nel tag <a href> è contenuta l’immagine ingrandita da Slimbox, col percorso specifico che avete scelto. Di seguito trovate il download con tutte le risorse necessarie. Alla prossima!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *