Pages Menu

Posted by on 30 / 03 / 2009 in AJAX | 0 comments

Ajax Gallery, ottima galleria dinamica (Parte II)

Ajax Gallery, ottima galleria dinamica (Parte II)

noobslide
Ecco qui un altro esempio di galleria dinamica scritta utilizzando la libreria “mootools”. Con poche e semplici righe di codice si riesce a creare vari effetti “slideshow”.
Il sito web di riferimento da dove poter scaricare i files è questo:
http://www.efectorelativo.net/laboratory/noobSlide/
Qui di seguito riporto un esempio di codice già pronto, basta fare copia/incolla all’interno di un file .html.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es”>
<head>
 <title>noobSlide - mootools</title>
 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
 <link rel=”stylesheet” href=”_web.css” type=”text/css” media=”screen” />
 <link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
 <script type=”text/javascript” src=”mootools-1.2-core.js”></script>
 <script type=”text/javascript” src=”_class.noobSlide.packed.js”></script>
 <script type=”text/javascript”>
 window.addEvent(’domready’,function(){
 
  var startItem = 3; //or   0   or any
  var thumbs_mask7 = $(’thumbs_mask7′).setStyle(’left’,(startItem*60-568)+’px’).set(’opacity’,0.8);
  var fxOptions7 = {property:’left’,duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
  var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
  var nS7 = new noobSlide({
   box: $(’box7′),
   items: [0,1,2,3,4,5,6,7],
   handles: $$(’#thumbs_handles7 span’),
   fxOptions: fxOptions7,
   onWalk: function(currentItem){
    thumbsFx.start(currentItem*60-568);
   },
   startItem: startItem
  });
  //walk to first with fx
  nS7.walk(0);
 
 });
 </script>
</head>
<body>
<div id=”cont”>
 
<div class=”sample”>
 <div class=”mask6″>
  <div id=”box7″>
   <span><img src=”img1.jpg” alt=”Photo” /></span>
   <span><img src=”img2.jpg” alt=”Photo” /></span>
   <span><img src=”img3.jpg” alt=”Photo” /></span>
   <span><img src=”img4.jpg” alt=”Photo” /></span>
   <span><img src=”img5.jpg” alt=”Photo” /></span>
   <span><img src=”img6.jpg” alt=”Photo” /></span>
   <span><img src=”img7.jpg” alt=”Photo” /></span>
   <span><img src=”img8.jpg” alt=”Photo” /></span>
  </div>
 </div>
 
 <div id=”thumbs7″>
  <div class=”thumbs”>
   <div><img src=”img1.jpg” alt=”Photo Thumb” /></div>
   <div><img src=”img2.jpg” alt=”Photo Thumb” /></div>
   <div><img src=”img3.jpg” alt=”Photo Thumb” /></div>
   <div><img src=”img4.jpg” alt=”Photo Thumb” /></div>
   <div><img src=”img5.jpg” alt=”Photo Thumb” /></div>
   <div><img src=”img6.jpg” alt=”Photo Thumb” /></div>
   <div><img src=”img7.jpg” alt=”Photo Thumb” /></div>
   <div><img src=”img8.jpg” alt=”Photo Thumb” /></div>
  </div>
 
  <div id=”thumbs_mask7″></div>
 
  <p id=”thumbs_handles7″>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
  </p>
 </div>
</div>
</div>
</body>
</html>

Per ulteriori gallerie, vedere anche:
http://www.webnet-italia.it/29/ajax-gallery-ottima-galleria-dinamica-parte-i/

0 Comments

Trackbacks/Pingbacks

  1. WebNet » Ajax Gallery, ottima galleria dinamica (Parte III) - [...] ulteriori gallerie, vedere anche: http://www.webnet-italia.it/114/ajax-gallery-ottima-galleria-dinamica-parte-ii/ http://www.webnet-italia.it/29/ajax-gallery-ottima-galleria-dinamica-parte-i/ Questo articolo [...]

Post a Reply

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