Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Xlider - Galeria de imagens na homepage

+14
fascicularia
erchima
naghi17787
Latysh
Hipster
ƒя1ѕ
Fnac
tibiaworldservers
Kyun
GyGu
[Dark]Doki-.
[K]oke
Nemo~
waghcwb
18 participantes

waghcwb waghcwb  • Qua 26 Fev 2014 - 13:12

Xlider - Galeria de imagens na homepage - Página 2 Empty Xlider - Galeria de imagens na homepage Qua 26 Fev 2014 - 13:12

Reputação da mensagem: 100% (3 votos)
Relembrando a primeira mensagem :

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Xlider - Galeria de imagens na homepage
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!


  • 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 Very Happy

Alexandre51 Alexandre51  • Ter 24 Nov 2015 - 9:03

Permissões neste sub-fórum
Não podes responder a tópicos