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]
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
Ola, Mas uma coisa , funcionou mas algumas vezes em que eu atualizei a pagina se ocultou, E Também uso o campo de mensagem na home page para outro proposito seria posivel adicionar em outro local ?
@Nemo, estou fazendo um tuto aqui, enquanto isso pode me passar o endereço do seu fórum para que eu possa analisar esse tempo de atraso que você falou?
@Davisnatsu, Sim sou eu, inclusive se você acessar a Fox vai ver que eu sou programador lá! Apesar que o que estava em uso na Fox anteriormente era diferente deste, ele usava um plugin de slides da internet, esse eu mesmo programei, estilizei e etc...
Ola, Wagner ao remover a mensagem que havia agr ficou somente o " Desenvolvido por Wagner " Endereço do fórum: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
@Nemo: Use este código jQuery para adicionar a lista:
Código:
$(function(){ $('body').append('CÓDIGO DO SLIDE (O CÓDIGO DEVE ESTAR TODO EM UMA ÚNICA LINHA, USE ESSA FERRAMENTA PARA FAZER ISSO: http://www.textfixer.com/html/compress-html-compression.php'); });
Como está escrito ali, seu código deve estar todo em uma linha, então configure-o da maneira que achar melhor e acesse este site e faça a compressão do código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Ou você pode inserir diretamente nos seus templates...
Já há muito que eu pedia isso, isso faz imenso jeito seria nos tópicos, pois por vezes queremos colocar um montão de imagens nos tópicos e ele fica muito grande e feito. Assim com uma galeria dessas seria bem melhor.
Nemo~ escreveu:Ola, Wagner' Editei o código e quando fui aplicar não consegui mais visualizar o campo; Pode me ajudar com isso ?
Olá amigo, me registrei em seu fórum e constatei que você inseriu o código Javascript na mensagem da homepage e não na gestão de códigos Javascript! Me registrei em seu fórum, se não conseguir fazer, me conceda acesso ao Painel de Controle que eu instalo para você.
Xlider - Galeria de imagens na homepage Qua 26 Fev 2014 - 13:12
![[K]oke](https://i.imgur.com/07ALhxb.png)
![[Dark]Doki-.](https://2img.net/u/1717/45/34/10/avatars/20-0.jpg)
Fr1s
