Xlider - Galeria de imagens na homepage Qua 26 Fev 2014 - 13:12
Relembrando a primeira mensagem :
Autor: Wagner
Funcionalidade: PunBB
Categoria: Recursos de Outros Autores
Xlider
Xlider é um script de galeria de imagens para a plataforma Forumeiros com várias opções para uso.
Preview:
Atenção: Por enquanto é possível visualizar o efeito neste fórum, mas não sei por quanto tempo manterei ele por lá..
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Porque não é open-source?
Ja me cansei de ficar horas fazendo scripts e ao visitar alguns fóruns ver estes mesmo scripts sendo postados com os créditos de quem postou e não de quem fez! Caso queira acesso ao código-fonte aberto entre em contato vip MP
Versões
Como ainda está uma versão BETA para testes não o adaptei para as demais versões, de inicio só está funcionando na versão PunBB, caso você tenha um fórum em outra versão e queira utilizar, comenta ai no tópico que eu vou adaptar!
Instalação
Para instalar é muito simples!
Primeiro adicione esse script com investimento No índice:
Depois, você precisa inserir uma lista (ul,ol) em algum local da sua homepage, eu recomendo que insira na mensagem da home
Visualização » Página inicial » Geral » Mensagem na Página Inicial
E inserir o seguinte conteúdo:
Ainda não mexa nele, faça o teste, veja se tudo está de acordo, e vamos prosseguir..
Configuração
Como o código ainda não é open-source e está na sua versão BETA ainda não temos uma grande gama de configurações disponíveis..
O que é possível alterar é a velocidade dos slides e o título do head dele, veja como:
Alterando a velocidade dos slides:
Note que logo no inicio do código Javascript cedido temos acesso a duas váriaveis, a que nos interessa é a speed
A única coisa que você deve fazer é alterar o 2700 que é o valor padrão para o valor desejado em milissegundos (1000ms equivale a 1s).
Caso sinta dificuldade use esse conversor
Alterando o título do widget
É tão simples como o passo anterior, basta alterar essa variável:
Altere apenas onde está escrito Xlider para o título desejado!
Pronto, fizemos a configuração do nosso script, agora vamos começar a configuração do HTML..
O Xlider trabalha com listas (ul,ol) para o seu funcionamento. Então basta você criar uma lista como no exemplo:
O Xlider não foi projetado para trabalhar com textos nos slides, então é interessante que você sempre insira alguma imagem..
Atenção: Para que ele funcione corretamente é necessário o uso do ID Xlide e os créditos no final da lista.
Você pode adicionar descrições as suas imagens (slides) com este código:
Basta inserir logo acima da sua imagem, na prática ficaria assim:
Você ainda pode trabalhar com sub-itens na descrição, como botões e etc... Se você fez o teste que eu falei com o código cedido la em cima, você notou que ao passar o mouse nas descrições apareciam determinados elementos, como botões, mensagens e etc..
Se você ainda não fez o teste, faça para comprovar o efeito!
Vamos ver como fazer agora:
Links
Basta usar a tag padrão dos link HTML
Se deseja usar links coloridos como mostrado na imagem, use este código:
Caso queira usar as demais cores, basta adicionar o nome da cor (são 8 disponíveis) logo após a class xButton, assim:
As cores disponíveis são:
Messages
Basta usar o seguinte código:
Elas também podem ser estilizadas com cores, basta usar o mesmo processo dos links
Icons
Deseja utilizar ícones nas mensagens ou links?
Simples, o Xlider usa a Font Awesome para adicionar ícones, então você pode usar os ícones disponíveis
Atualmente existem 369 ícones disponíveis (:
Reggae
Para usar o efeito reggae, use o mesmo sistema dos links e das messages só que com essa class
Você também pode usar a mensagem com as cores invertidas:
Alinhamento
Você ainda pode usar opções de alinhamento de texto com essas classes:
Texto alinhado a direita
Texto alinhado no centro
A esquerda já é o padrão...
Imagens
É possível ainda inserir imagens a descrição do slide.. O tamanho padrão é 240px x 100px, então para que sua imagem não fique desfocada, basta fazer a imagem nesse tamanho..
Conclusão
Acho que ficou bem explicado tudo que pode ser feito com o Xlider e como fazer sua configuração corretamente.. Breve estarei lançando atualizações com novas opções disponíveis, e quem sabe até fazer ele virar um plugin, o que facilitaria tudo mais ainda!
Qualquer dúvida relativa ao uso do mesmo, ou qualquer pedido de implementações e afins do Xlider, entre em contato comigo via MP!
Espero que seja útil a todos, e façam bom proveito
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Xlider - Galeria de imagens na homepageAutor: Wagner
Funcionalidade: PunBB
Categoria: Recursos de Outros Autores
Xlider
Xlider é um script de galeria de imagens para a plataforma Forumeiros com várias opções para uso.
Preview:
Atenção: Por enquanto é possível visualizar o efeito neste fórum, mas não sei por quanto tempo manterei ele por lá..
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Porque não é open-source?
Ja me cansei de ficar horas fazendo scripts e ao visitar alguns fóruns ver estes mesmo scripts sendo postados com os créditos de quem postou e não de quem fez! Caso queira acesso ao código-fonte aberto entre em contato vip MP
Versões
Como ainda está uma versão BETA para testes não o adaptei para as demais versões, de inicio só está funcionando na versão PunBB, caso você tenha um fórum em outra versão e queira utilizar, comenta ai no tópico que eu vou adaptar!
- PunBB
Instalação
Para instalar é muito simples!
Primeiro adicione esse script com investimento No índice:
Depois, você precisa inserir uma lista (ul,ol) em algum local da sua homepage, eu recomendo que insira na mensagem da home
Visualização » Página inicial » Geral » Mensagem na Página Inicial
E inserir o seguinte conteúdo:
Ainda não mexa nele, faça o teste, veja se tudo está de acordo, e vamos prosseguir..
Configuração
Como o código ainda não é open-source e está na sua versão BETA ainda não temos uma grande gama de configurações disponíveis..
O que é possível alterar é a velocidade dos slides e o título do head dele, veja como:
Alterando a velocidade dos slides:
Note que logo no inicio do código Javascript cedido temos acesso a duas váriaveis, a que nos interessa é a speed
A única coisa que você deve fazer é alterar o 2700 que é o valor padrão para o valor desejado em milissegundos (1000ms equivale a 1s).
Caso sinta dificuldade use esse conversor
Alterando o título do widget
É tão simples como o passo anterior, basta alterar essa variável:
Altere apenas onde está escrito Xlider para o título desejado!
Pronto, fizemos a configuração do nosso script, agora vamos começar a configuração do HTML..
O Xlider trabalha com listas (ul,ol) para o seu funcionamento. Então basta você criar uma lista como no exemplo:
O Xlider não foi projetado para trabalhar com textos nos slides, então é interessante que você sempre insira alguma imagem..
Atenção: Para que ele funcione corretamente é necessário o uso do ID Xlide e os créditos no final da lista.
Você pode adicionar descrições as suas imagens (slides) com este código:
Basta inserir logo acima da sua imagem, na prática ficaria assim:
Você ainda pode trabalhar com sub-itens na descrição, como botões e etc... Se você fez o teste que eu falei com o código cedido la em cima, você notou que ao passar o mouse nas descrições apareciam determinados elementos, como botões, mensagens e etc..
Se você ainda não fez o teste, faça para comprovar o efeito!
Vamos ver como fazer agora:
Links
Basta usar a tag padrão dos link HTML
Se deseja usar links coloridos como mostrado na imagem, use este código:
Caso queira usar as demais cores, basta adicionar o nome da cor (são 8 disponíveis) logo após a class xButton, assim:
As cores disponíveis são:
- orange
- yellow
- purple
- pink
- red
- blue
- white
Messages
Basta usar o seguinte código:
Elas também podem ser estilizadas com cores, basta usar o mesmo processo dos links
Icons
Deseja utilizar ícones nas mensagens ou links?
Simples, o Xlider usa a Font Awesome para adicionar ícones, então você pode usar os ícones disponíveis
Atualmente existem 369 ícones disponíveis (:
Reggae
Para usar o efeito reggae, use o mesmo sistema dos links e das messages só que com essa class
Você também pode usar a mensagem com as cores invertidas:
Alinhamento
Você ainda pode usar opções de alinhamento de texto com essas classes:
Texto alinhado a direita
Texto alinhado no centro
A esquerda já é o padrão...
Imagens
É possível ainda inserir imagens a descrição do slide.. O tamanho padrão é 240px x 100px, então para que sua imagem não fique desfocada, basta fazer a imagem nesse tamanho..
Conclusão
Acho que ficou bem explicado tudo que pode ser feito com o Xlider e como fazer sua configuração corretamente.. Breve estarei lançando atualizações com novas opções disponíveis, e quem sabe até fazer ele virar um plugin, o que facilitaria tudo mais ainda!
Qualquer dúvida relativa ao uso do mesmo, ou qualquer pedido de implementações e afins do Xlider, entre em contato comigo via MP!
Espero que seja útil a todos, e façam bom proveito