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.
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. |
- Informe o Título do slide e o apelido;
- Selecione uma das categorias que você criou previamente.
- Clique sobre o botão imagem para localizar a imagem do slide;
- Escolha um Target (Select Target), ação a ser executada ao clicar sobre este slide durante a apresentação;
- Informe uma descrição, se desejar.
- 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 |
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.
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;
- 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.
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
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!