terça-feira, 7 de fevereiro de 2012

Banner rotativo no Joomla


Neste tutorial apresentarei o componente DJ-ImageSlider, uma extensão Joomla! para criação de banners de imagens em modo slide show e banners rotativos. Neste tutorial considero que o usuário já conheça os procedimentos de instalação de extensões no Joomla!.


O DJ - ImageSlider é uma extensão do CMS Joomla! composto por um componente e um módulo que permite a criação e o gerenciamento de galerias de imagens em slides. Distribuído gratuitamente é um componente bastante flexível e, apesar de ter parte da folha de estilo definida em seu código é possível realizar um refatoramento e extender o código afim de adaptar ao seu projeto.

O DJ - ImageSlider pode ser obtido no diretório de extensões do Joomla. Será necessário a instalação do componente (com_djimageslider_vX.X.X.zip) e do módulo (mod_djimageslider_vX.X.X.zip).

Nota: O DJ-ImageSlider é baseado na biblioteca javascript  mootools, é preciso estar ciente de que poderá ocorrer conflitos com o JQuery se o mesmo estiver sendo utilizado em seu projeto, esteja preparado neste sentido ;).

1. Gerenciando Categorias

Vamos aprender a criar e gerenciar categorias e slides no DJ-ImageSlider. Com categorias e slides é possível adicionar informação textual a cada uma das imagens melhorando o SEO e a indexação de imagens em motores de busca.

Se deseja criar um slide show com imagens aleatórias a partir de um diretório você pode pular para o item: 2. Configuração do Módulo.

1.1. Categorias

Nesta seção você poderá criar ou gerenciar as categorias existentes. O uso de categorias no DJ-ImageSlider permite agrupar os slides facilitando a  gestão de suas galerias .


Acesse: Componentes > DJ Image Slider > Categorias, em seguida clique no botão Novo.
a. Identifique sua categoria especificando um nome, este será exibido na lista de categorias no gerenciador do módulo. Atribua um apelido a esta categoria.

b. Salve a sua categoria.

1.2. Slides

A criação de Slides permite atribuir a cada imagem links (target URL) ou vincular a um componente. O DJ-ImageSlider possibilita a integração com o Virtuemart com o Módulo de Menus nativo do Joomla, com o Administrador de Artigos e com um módulo próprio para criação de galeria de produtos o DJCatalog2.

Acesse: Componentes > DJ Image Slider > Slides, em seguida clique no botão Novo.


Cadastro de Slide no DJ Image Slider - Clique para ampliar.

  1. Informe o Título do slide e o apelido;
  2. Selecione uma das categorias que você criou previamente.
  3. Clique sobre o botão imagem para localizar a imagem do slide;
  4. Escolha um Target (Select Target), ação a ser executada ao clicar sobre este slide durante a apresentação;
  5. Informe uma descrição, se desejar.
  6. Salve.
Após a criação das Categorias e dos Slides vamos aprender a configurar o módulo responsável pela exibição dos slides. 

2. Configuração do Módulo

A configuração do módulo é o ponto de partida para a definição da sua galeria de imagens possibilitando a exibição em seu site, nele você especifica desde a posição onde deverá ser exibido em seu template aos efeitos de transição das imagens.

Acesse: Extensões > Administrar Módulo

Clique sobre um dos módulos do tipo (mod_djimageslider) disponíveis, conforme a imagem abaixo.

Clique para ampliar
Caso não tenha um módulo disponível crie um novo módulo e escolha o tipo DJ Image Slider.

2.1. Detalhes do módulo

Nesta área serão definidos os parâmetros básicos de um módulo do CMS Joomla! Tais como a posição de exibição no seu template e título. Certifique-se que a opção Habilitado esteja marcada como sim para que sua galeria seja exibida.


2.2. Atribuição de Menu

A todo módulo do CMS Joomla! deve ser atribuído itens de menu. Esta definição permite ao usuário controlar em que páginas o módulo deverá ser exibido. Escolha em qual página seu slider deve ser apresentado na opção Seleção de Menu.


2.3. Parâmetros

Esta seção é a responsável pela forma de apresentação dos slides e de controle do DJ  ImageSlider.


2.3.1. Slider Source

O Slider Source define o modo como o módulo DJ - ImageSlider obtém as imagens a serem exibidas no módulo.

2.3.2. Slider Type

Permite definir o comportamento da apresentação dos slides, a saber, Horizontal, Vertical e Fade.

2.3.3. Mootools Version

Permite escolher a versão do mootools utilizada, pode ser utilizada para evitar conflitos, mas recomendo deixar a opção “auto”.

2.3.4. Link Image

Esta opção permite que a cada imagem seja atribuído um link a imagem ou que seja exibida em modal estilo light Box.

2.3.5. Modo Folder

Estas configurações se aplicam quando o Slider Source “Folder” for selecionado. Neste modo é possível lançar automaticamente imagens de um diretório sem a necessidade de criação de Slides e Categorias e atribuindo a todas uma configuração padrão.

2.3.5.1. Image Folder

Especifique a pasta onde as imagens a serem utilizadas na apresentação de slides estão armazenadas tomando como diretório raiz o diretório “images” do Joomla!.
Caso seja selecionada o Slider Source do tipo Folder qualquer imagem na pasta indicada serão exibidas automaticamente.

2.3.5.2. Link

Especifique um link padrão para ser exibido ao clicar sobre a imagem, necessita que a opção Link Image esteja configurada como Hyperlink. Caso deseje aplicar um link diferente para cada imagem será necessário criar categorias e slides, saberemos como mais adiante.

2.3.6. Modo Component

O modo Componente permite que se associe ao módulo do banner uma categoria de slides criada no Componente DJ - ImageSlider. A criação de categorias será explicada mais a diante.

2.3.6.1. Slider Category

Selecione a categoria de slides que deseja ser exibida. Caso este

2.3.6.2. Opções

Específica a apresentação das informações cadastradas nos Slides através do componente DJ Image Slider, a ser apresentado mais adiante.
  • Exibir Título: Exibir o titulo dos slides;
  • Show description: Exibir as descrição dos slides;
  • Show readmore: Exibir um link ao final da descrição “leia mais”;
  • Link Title: Atribuir link ao título;
  • Link description: Atribuir link a descrição do slide;
  • Limit description: Limitar o número de caracteres da descrição.
2.3.7. Basic Slider Settings

Configuração de exibição do Slider responsável pela exibição das imagens.

  • Slide Width  - Largura da galeria de slides;
  • Slide Height  - Altura da galeria de slides;
  • Fit a size of image to - Ajuste da imagem a largura, a altura ou auto;
  • Visible Images – Define quantas imagens são visíveis, ou seja, permite visualização lado a lado ou empilhado;
  • Space between images – Espaço entre as imagens;
  • Max images – Quantidade máxima de imagens a serem exibidas/carregadas por vez.
  • Sort by – Método de ordenção no carregamento, por nome ou aletório (randomize);
  • Slide effect – Efeito de transição das images;
Nota: É necessário critério ao alterar o Slide Effect sob pena de prejudicar a usabilidade do site, uma vez que efeitos complexos demandam muito processamento no cliente verifique o consumo de processamento utilizando o Monitor de Tarefas do sistema antes de decidir qual o perfil de cliente espera para seu site.
  • Autoplay – Iniciar automáticamente a transição, ou seja, o slider pode ficar parado e só passar as imagens após uma ação do usuário;
  • Show play/pause – Exibir botão de play/pause (necessário definir a imagem);
  • Show next/prev – Exibir botões de navegação;
  • Show custom navigation – Exibir botões indicadores de slides;

2.4. Parâmetros Avançados

Personaliza a apresentação dos slides e a exibição de controles.

2.4.1. Customize Slide Description

Com estas opções é possível posicionar a descrição ao lado, em baixo, acima ou sobre a imagem para todos os slides.
  • Description width – Define a largura da descrição;
  • Description vertical position  - Define a posição da vertical da descrição;
  • Description horizontal position  - Define a posição horizontal;

2.4.2. Customize Button

Configurações personalizadas para os controles do Slider. Informe o direitório onde encontra-se a imagem juntamente com o nome e extensão da mesma para cada uma das funções abaixo.

Nota: É necessário critério ao alterar os seguintes parâmetros sob pena de quebra do layout, recomendo que anote as configurações originais antes de realizar testes.
  • Prev Button – Botão de navegação para a direita;
  • Next Button – Botão de navegação para a esquerda;
  • Play Button
  • Pause Button

As seguintes opções permitem controlar o loca de exibição da barra de navegação:
  • Navigation bar vertical position 
  • Navigation bar horizontal position
2.4.3. Slider Effects

Configurações adicionais do efeito de transição dos slides.

Nota: É necessário critério ao alterar os seguintes parâmetros sob pena de prejudicar a usabilidade do site, uma vez que os efeitos demandam processamento no cliente.

  • Slide effect type – Efeito de entrada das imagens;
  • Slide duration – Tempo que cada imagem deve ser exibida;
  • Next slide delay – Tempo de espera entre a exibição das imagens;
  • Preload delay time – Tempo de espera antes de apresentar os slides, em galerias com muitas imagens, páginas extensas ou que demandam o carregamento de recursos externos como plugins de redes sociais, configure o tempo necessário para que todo a página tenha sido carrega e evite que as imagens sejam exibidas parcialmente.

2.5. Outros Parâmetros

Nesta seção você pode especificar a classe CSS aplicada ao módulo o que lhe dará a possibilidade de melhorar o design da sua galeria adaptando ao seu template, também é possível escolher se o mesmo pode realizar cache.

Pronto! Após as configurações clique em Salvar. Sua galeria de slides já deverá estar visível no Fron-end do site. Confira abaixo duas aplicações do DJ ImageSlide (Realização e Áreas).



Referências:

http://extensions.joomla.org/extensions/photos-a-images/images-slideshow/image-mootools-slideshow/13119

Gostou do post? Dúvidas quanto ao Joomla! ou DJ ImageSlider, deixe seu comentário!


Atualizações