jQuery - Usando o plugin Carousel

jQuery - Usando o plugin Carousel

Você já deve saber que jQuery é uma biblioteca JavaScript muito usada em aplicações web que têm feito muito sucesso justamente por facilitar a vida do desenvolvedor permitindo criar funções, efeitos, animações além da boa integração com AJAX.(Para saber mais sobre jQuery veja os artigos nas referências.)

Para incrementar ainda mais os recursos do jQuery existem centenas de plugins que podemos usar em conjunto com o jQuery para obter efeitos e usar recursos fantásticos para melhorar a interação com o usuário. Visite a página dos plugins para o jQuery no link: http://www.jqueryplugins.com/

Hoje eu vou apresentar um plugin do jQuery conhecido como jCarousel que permite controlar uma lista de itens de forma horizontal ou vertical. Os itens, que podem ser conteúdo estático HTML ou podem ser carregados com(ou sem) AJAX, podem ser visualizados navegando para trás e para a frente (com ou sem animação).

Eu vou começar com uma apresentação bem simples em uma página HTML e depois veremos como usá-lo em uma página ASP .NET.

O jCarousel possui somente um dependência; sendo um plugin jQuery, ele utiliza muitos dos recursos que o jQuery fornece portanto ele depende da biblioteca jQuery para funcionar.

Para começar temos que baixar primeiro a biblioteca jQuery e depois o plugin jCarousel nos links abaixo.

jQuery
jCarousel (estou usando a versão 0.2.8)
Estilo CSS (podemos usar qualquer arquivo de estilo)

Após baixar descompacte o copie os recursos em uma pasta da sua máquina local. Recomenda-se ler o arquivo README e a Documentação para a versão 0.3.0.

Para habilitar o uso do jCarousel em sua página você precisa primeiro incluir a referência a biblioteca JavaScript em sua página usando a tag <SCRIPT> para carregar o arquivo JavaScript.

Isso pode ser feito pela inclusão do seguinte código na tag <HEAD> do documento HTML:

<script type="text/javascript" charset="utf-8" src="/Scripts/jquery.jcarousel.js"></script>

A primeira linha faz referência a library do jQuery (geralmente usamos a última versão).

A segunda linha referencia ao plugin jcarousel usando a sua versão compactada jquery.jcarousel.min.js. Podemos usar também a versão padrão não compactada jquery.jcarousel.js em desenvolvimento.

A aplicação de um estilo geralmente depende do seu objetivo final e as possibilidades podem ser infinitas sendo que junto com o pacote jcarousel existem muitos exemplos de arquivos .css que podem ser usados.

Para usar um estilo CSS basta incluir o código a seguir na tag <HEAD> do seu documento HTML:

<link rel="stylesheet" type="text/css" href="Styles/jcarousel.simple.css">

ou ainda usando a seguinte sintaxe:

Agora só falta ativar o plugin usando o código jQuery conforme abaixo:

Se você já usou jQuery antes, ja sabe que a linha de código acima usa seletor jQuery para obter uma referência para o plugin jcarousel.

Você pode acessar e estudar os diversos exemplos para este plugin neste link: http://sorgalla.com/jcarousel/

Usando jCarousel na prática

Vamos mostrar agora um exemplo prático e explicado em detalhes de utilização do jcarousel em uma página HTML. (Esse exemplo é baseado em um dos exemplos baixados do site do carousel.)

Primeiro crie uma pasta de trabalho, vou criar uma pasta chamada MacCarousel, que irá conter o arquivo HTML e no interior desta pasta crie as subpastas: Scripts, Styles e Imagens:

Na pasta Scripts copie os arquivos javascript do jQuery e do plugin jcarousel; na pasta Styles coloque os arquivos de estilos que você deseja usar e na pasta Imagens as imagens usadas.

Obs: Lembrando que todas as referências podem ser remotas.

O código HTML mínimo exigido pelo carousel deve possuir a seguinte estrutura básica:

Podemos identificar os elementos root, list e item conforme abaixo:

<div class="jcarousel"> <------------------------------------| Root element
    <ul> <-----------------------------------| List element |
        <li>...</li> <--| Item element |                       |
        <li>...</li> <--| Item element |                       |
    </ul> <--------------------------------|                       |
</div> <---------------------

A existência dos elementos root, list e item são obrigatórios mas a estrutura pode ser diferente conforme exemplo a seguir que usa outras tags HTML:

<div class="mycarousel"> <-------------------------------| Root element
    <div> <------------------------------| List element |
        <p>...</p> <-----| Item element |                 |
        <p>...</p> <-----| Item element |                 |
    </div> <-----------------------------|                      |
</div> <----------------------------------------------------|

Como primeiro exemplo eu vou criar um exemplo mais simples possível usando uma biblioteca jcarousel Lite que pode ser obtida neste site: http://www.gmarwaha.com/jquery/jcarousellite/

O código do arquivo HTML chamado Teste.html pode ser visto abaixo:

<html>
    <head>
        <meta charset="utf-8">
        <title>Usando o plugin Carousel do jQuery</title>
	<!-- referência ao jquery -->
        <script type="text/javascript" src="Scripts/jquery.js"></script>
	<!-- referência ao jcarousel -->
        <script type="text/javascript" src="Scripts/jcarousellite_1.0.1.min.js"></script>
	<!-- carrega o script jquery -->
        <script type="text/javascript" src="Scripts/carrossel.js"></script>
	<!-- carrega o estilo -->
	<link rel="stylesheet" type="text/css" href="Styles/style.css">
       </head>
       <body>
       <div id="container">
       <br><br> 
       <p>paisagens</p>
	  <br>
	     <!-- define a imagem para o botão anterior -->
		 <div><a href="#" class="prev"><img src="Imagens/anterior.png" border="0" /></a></div> 
		 <div id="carrossel" style="float:left">
		           <ul>
			<!-- arquivos das imagens na pasta Imagens -->
		 	 <li><img src="Imagens/paisagem1.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem2.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem3.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem4.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem5.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem6.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem7.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem8.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem9.jpg" width="800" height="600" alt=""/></li>
			<li><img src="Imagens/paisagem10.jpg" width="800" height="600" alt=""/></li>
		         </ul>
		  </div>	
		  <!-- define a imagem para o botão proximo -->
		  <div><a href="#" class="next"><img src="Imagens/proximo.png" border="0" /></a></div>
                              </div>
	</body>
</html>

O código esta comentado e creio que o único comentário que precisa ser feito é referente a carga do arquivo carrousel.js feito via javascript que contém o seguinte conteúdo:

$(function(){
$("#carrossel").jCarouselLite({
btnPrev : '.prev',
btnNext : '.next',
auto : 4000,
speed : 2000,
visible : 1
})
})

Vamos entender o código jQuery:

- btnPrev e btnNext - define dois botões aos quais atribuímos as imagens prev.jpg e next.jpg
- auto - propriedade auto determina em quanto tempo ocorre o auto-scroll do conteúdo. Se for definido como 0 (padrão), então o auto-scroll estará desligado.
- speed - define a velocidade do scroll do conteúdo;
- visible - determina quantas imagens serão exibidas por vez;

O arquivo de estilo style.css também é muito simples:

@charset "utf-8";
*{
margin:0;
padding:0;
}

#container{
width: 950px;
}

#carrossel{
   width:800px;
   height:600px;
   overflow:hidden;
   margin:0 auto;
}

#carrossel ul{
   list-style:none;
   float:left
}
#carrossel ul li{
   float:left;
   display:inline;
   margin-left:4px;
}

.prev{
float: left;
margin-left:0px;
}

.next{
float: right;
margin-left:0px;
}

Abrindo o arquivo Teste.html em um navegador teremos o resultado abaixo:

Muito simples e prático...

Vamos criar agora um exemplo mais elaborado usando a biblioteca completa do jcarousel.

Agora eu vou criar um arquivo chamado MacCarousel.htm na pasta principal MacCarousel criada. O código do arquivo HTML pode ser visto abaixo:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Usando o plugin Carousel do jQuery</title>

        <script type="text/javascript" src="Scripts/jquery.js"></script>
        <script type="text/javascript" src="Scripts/jquery.jcarousel.min.js"></script>
        <link rel="stylesheet" type="text/css" href="Styles/style.css">
        <link rel="stylesheet" type="text/css" href="Styles/jcarousel.simple.css">

		<script type="text/javascript">  
			(function($) {
				$(function() {
					$('[data-jcarousel]').each(function() {
						var el = $(this);
						el.jcarousel(el.data());
					});
					$('[data-jcarousel-control]').each(function() {
						var el = $(this);
						el.jcarouselControl(el.data());
					});
				});
			})(jQuery);
		</script> 

	</head>
	<body>
	 <div class="wrapper">
           <h1>Usando jcarousel</h1>
            <p>Este exemplo mostrar como usar o plugin jcarousel do jQuery</p>
			 <div class="carousel-wrapper">
                            <div data-jcarousel="true" data-wrap="circular" class="carousel">
					<ul id="exemplo">   
						<li><img src="Imagens/paisagem1.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem2.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem3.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem4.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem5.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem6.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem7.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem8.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem9.jpg" width="800" height="600" alt=""/></li>
						<li><img src="Imagens/paisagem10.jpg" width="800" height="600" alt=""/></li>
					</ul>
				</div>
				<p>
				Fotos obtidas na internet
				</p>
				<a data-jcarousel-control="true" data-target="-=1" href="#" class="carousel-control-prev">&lsaquo;</a>
				<a data-jcarousel-control="true" data-target="+=1" href="#" class="carousel-control-next">&rsaquo;</a>
            </div>
	</div>		
	</body>
</html>

Note que usamos a mesma estrutura: referências ao jquery, ao carousel, aos arquivos de estilo, a definição do código jQuery e a montagem do código HTML que inclui as imagens que estamos usando.

O resultado da abertura do arquivo HTML acima em um navegador pode ser visto abaixo:

O exemplo acima usa os recursos de configuração dos atributos data-* para criar uma exibição de slides das imagens onde podemos navegar pelas imagens.

Você encontra muitos outros exemplos na página do jQuery. Vamos agora mostrar como usar os recursos do jcarousel em uma página ASP .NET.

Usando carousel em uma página ASP .NET

Abra o Visual Studio 2012 Express for web e no menu File clique em New Web Site;

Selecione o template Visual Basic -> ASP .NET Empty Web Site e informe o nome jcarousel_ASPNET e clique no botão OK;

Agora clique com o botão direito sobre o nome do web site criado e selecione Add -> New Folder informando o nome Scripts;

Em seguida vamos incluir a biblioteca do jQuery na pasta Scripts clicando com o botão direito sobre a pasta e a seguir em Add Existing Item;

Selecione a biblioteca jQuery mais atual. No exemplo eu vou usar a versão minimizada 1.3.2.min.js

A seguir, usando o mesmo procedimento, copie na pasta Scripts os arquivos do plugin jcarousel.

Agora clique com o botão direito sobre o nome do web site criado e selecione Add -> New Folder informando o nome Imagens;

Nesta pasta coloque as imagens que você pretende exibir na página.

Neste exemplo eu vou usar o controle ASP .NET Repeater para carregar as imagens na página a partir de um objeto DataTable que iremos criar código.

No menu WEBSITE clique em Add New Item e selecione o template Web Form informando o nome Default.aspx e clicando no botão Add;

Abra o arquivo Default.aspx no modo Source e inclua um controle Repeater com ID igual a rptImagens e na propriedade ItemTemplate do controle inclua um controle img onde a função Eval irá obter os dados do DataTable definido no campo ImagemUrl conforme código mostrado a seguir:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Usando o plugin carousel </title>
</head>
<body>
    <form id="form1" runat="server">
     <script type="text/javascript" src="Scripts/jquery.js"></script>
     <script type="text/javascript" src="Scripts/jquery.jcarousel.min.js"></script>
     <link rel="stylesheet" type="text/css" href="Styles/skin.css" />
     <script type="text/javascript">
        $(function () {
            $('#Macjcarousel').jcarousel();
        });
    </script>
    <ul id="Macjcarousel" class="jcarousel-skin-tango">
        <asp:Repeater ID="rptImagens" runat="server">
            <ItemTemplate>
                <li>
                    <img alt="" style='height: 150px; width: 250px' src='<%# Eval("ImagemUrl")%>' /></li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
    </form>
</body>
</html>

Note que definimos o script JavaScript para a biblioteca jQuery, o plugin jcarousel e o arquivo de estilo usando na tag <Head>

e a função JavaScript jQuery que ativa os recursos do plugin:

Definimos uma tag ul com id igual a Macjcarousel e o controle Repeater:

 <ul id="Macjcarousel" class="jcarousel-skin-tango">
        <asp:Repeater ID="rptImagens" runat="server">
            <ItemTemplate>
                <li>
                    <img alt="" style='height: 150px; width: 250px' src='<%# Eval("ImagemUrl")%>' /></li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>

Agora abra o arquivo code-behind Default.aspx.vb e no evento Load da página

Imports System.Data

Partial Class _Default
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(0) {New DataColumn("ImagemUrl")})
        dt.Rows.Add("/Imagens/paisagem1.jpg")
        dt.Rows.Add("/Imagens/paisagem2.jpg")
        dt.Rows.Add("/Imagens/paisagem3.jpg")
        dt.Rows.Add("/Imagens/paisagem4.jpg")
        dt.Rows.Add("/Imagens/paisagem5.jpg")
        dt.Rows.Add("/Imagens/paisagem6.jpg")
        dt.Rows.Add("/Imagens/paisagem7.jpg")
        dt.Rows.Add("/Imagens/paisagem8.jpg")
        dt.Rows.Add("/Imagens/paisagem9.jpg")
        dt.Rows.Add("/Imagens/paisagem10.jpg")

        rptImagens.DataSource = dt
        rptImagens.DataBind()

    End Sub
End Class

O código defina um objeto DataTable com uma coluna de nome ImagemUrl e inclui as imagens da pasta Imagens no datatable que servirá como datasource para popular o controle DataRepeater - rptImagens.

Agora é só executa o projeto web site...

Pegue o projeto completo aqui: MacCarousel.zip (HTML) e jcarousel_ASPNET.zip

Efs_2:1 Ele (Jesus) vos vivificou (aos que creêm), estando vós mortos nos vossos delitos e pecados,

Efs 2:2 nos quais outrora andastes, segundo o curso deste mundo, segundo o príncipe das potestades do ar, do espírito que agora opera nos filhos de desobediência,

Referências:

José Carlos Macoratti

ASP .NET - Apresentando JQuery - Macoratti.net

jQuery- Usando jQuery com ASP .NET - Macoratti.net

ASP .NET - Recurso autocompletar com jQuery - Macoratti.net

jQuery - Filtrando dados no GridView - Macoratti.net