Como usar o EasySlider. How to use EasySlider.

Olá pessoal, hoje mostrarei como usar o EasySlider, ferramenta criada utilizando JQuery e que serve para criar albuns de imagens dinâmicos.

O primeiro passo é ter uma página web qualquer, pode ser uma .html mesmo.

Na sua página, importe o arquivo javascript + o css do easy slider que vc facilmente encontrará na net + o arquivo do jquery da seguinte forma.


<link rel="stylesheet" type="text/css" media="all" href="css/screen.css"/>
<script type="text/javascript" src="js/lib/easySlider1.7.js"/>
<script type="text/javascript" src="js/lib/jquery2.js"/>

O endereço no atributo 'src' fica a seu critério.

Agora temos que invocar o EasySlider, da seguinte form:

(Faça isso dentro da sua sessão '< head/>')

 <script type="text/javascript">  
   $(document).ready(function(){  
   $("#slider").easySlider({  
    auto: true,  
    continuous: true,  
    numeric: true  
   });  
 });  
 </script>  

Todos os atributos que podem ser configurados estão listados nesta página:
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

Por fim, mas não menos importante, precisamos incluir o código HTML onde o EasySlider irá "aterrisar".

Segue:

 <div id="container">  
   <div id="content">  
    <div id="slider">  
      <ul>  
       <li>  
         <a href="link para algum lugar">  
          <img src="endereco da sua imagem" alt="" />  
         </a>  
       </li>  
       <li>  
         <a href="link para algum lugar">  
          <img src="endereco da sua imagem" alt="" />  
         </a>  
       </li>  
       <li>  
         <a href="link para algum lugar">  
          <img src="endereco da sua imagem" alt="" />  
         </a>  
       </li>  
      </ul>  
    </div>  
   </div>  
 </div>  

Pontos importantes:

1º Os id's das div's devem ser exatamente os que estão acima.

2º Vc pode querer chamar alguma função javascript ao clicar na imagem, para isso, no lugar de "link para algun lugar" use: "javascript:void(suaFuncao())" .

3º Vc pode facilmente alterar o tamanho da imagem que quer mostrar ou até mesmo o formato do botões para escolher a imagem no arquivo css do EasySlider, que no caso é o screen.css.

4º Neste exemplo eu utilizei três imagens, mas vc pode usar quantas quiser, ou mesmo utilizar php para trazer do Banco de Dados uma lista de imagens com seus respectivos endereços nas pastas de imagens que vc venha a criar. Assim vc não precisa se preocupar em como salvar sua imagem no BD, e sim apenas salvar o caminho até ela.

Espero ter ajudado, qualquer dúvida vcs podem deixar um comentário ou até mesmo me adicionarem no FACEBOOK: http://www.facebook.com/profile.php?id=100000760795003

Até a próxima, tchau!!!