Pages Menu

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

Ajax Gallery, ottima galleria dinamica (Parte I)

Ajax Gallery, ottima galleria dinamica (Parte I)

ajax-gallery
Oggi vi voglio segnalare una galleria chiamata Easy Slider. E’ un plugin per jQuery davvero carino e molto semplice da implementare. Potete visualizzare subito una demo cliccando qui.

L’installazione è semplice:
1- Scaricate l’ultima versione sul sito dell’autore.
2- 
Scompattate il file .zip, all’interno troverete 5 diversi esempi già pronti all’uso.

Questo è l’effetto che mi piace di più…basta fare copia/incolla del codice sotto riportato e salvarlo come file .html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
 <title>Galleria</title>
 <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />   
 <script type=”text/javascript” src=”js/jquery.js”></script>
 <script type=”text/javascript” src=”js/easySlider1.5.js”></script>
 <script type=”text/javascript”>
  $(document).ready(function(){ 
   $(”#slider”).easySlider();
  }); 
 </script>
<style type=”text/css”>
 body {
  background:#FFFFFF;
  font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
  color:#333;
  line-height:180%;
  margin:0;
  padding:0;
  text-align:center;
 }
 img{border:none;}
 } 
  .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
  #container{ 
  margin:0 auto;
  position:relative;
  text-align:left;
  width:500px;
  background:#fff;  
  margin-bottom:2em;
  } 
 #header{
  height:80px;
  background:#5DC9E1;
  color:#fff;
  }    
 #content{
  position:relative;
  }   
 #slider{} 
 #slider ul, #slider li{
  margin:0;
  padding:0;
  list-style:none;
  }
 #slider li{
  /*
   define width and height of list item (slide)
   entire slider area will adjust according to the parameters provided here
  */
  width:500px;
  height:430px;
  overflow:hidden;
  } 
 #prevBtn, #nextBtn{
  display:block;
  width:30px;
  height:77px;
  position:absolute;
  left:-30px;
  top:71px;
  } 
 #nextBtn{
  left:500px;
  }              
 #prevBtn a, #nextBtn a{ 
  display:block;
  width:30px;
  height:77px;
  background:url(images/btn_prev.gif) no-repeat 0 0; 
  } 
 #nextBtn a{
  background:url(images/btn_next.gif) no-repeat 0 0; 
  }            
</style></head>
<body><div id=”container”><div id=”content”><div id=”slider”>
   <ul>    
    <li><img src=”./mostre/galleria1/1.jpg” alt=”Testo a piacere” /></li>
    <li><img src=”./mostre/galleria1/2.jpg” alt=”Testo a piacere” /></li>
    <li><img src=”./mostre/galleria1/3.jpg” alt=”Testo a piacere” /></li>
  </ul>
  </div></div></div></body></html>

0 Comments

Trackbacks/Pingbacks

  1. WebNet » Ajax Gallery, ottima galleria dinamica (Parte II) - [...] ulteriori gallerie, vedere anche: http://www.webnet-italia.it/29/ajax-gallery-ottima-galleria-dinamica-parte-i/ Questo articolo è stato pubblicato lunedì 30 marzo…

Post a Reply

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