Como Colocar Slide no Web Acappella

Você deve esta se perguntando e se matando para saber como colocar esses slide o Slideshowsno porgrama Web Acappella é também estava desse jeito agora. Porisso resolvi passar todo conteúdo de como criar esse slide e colocar em seu site. Vamos lá.
O slide show é um elemento importantíssimo em nosso site, para dar mais movimento e beleza a eles e principalmente apresentar algo na primeira página em grande estilo. É um prática muito usada em grandes sites, que atrai a tenção do usuário para um produto ou serviço em destaque, pensado nisso que hoje vou apresentar uma forma fácil e muito elegante de se fazer com que seu site exponha esta ferramenta.

 

Vasculhado a internet encontrei um script muito simples em Java script e HTML que pode ser facilmente incorporado no web Acappella, este script exibe imagens em forma de slide com contagem de imagens e possibilidade de navegação pelas imagens. O resultado final é este: http://fellon.com.br/slide/slide.html
Como eu já disse é muito fácil de ser incorporado ao Web Acappella. Veja como:
Primeiramente baixamos o plugin neste link: http://fellon.com.br/slide/slide.rar
Nele contém algumas pastas que devem ser extraídas ao local que seu site será publicado, são as pastas js e imagens, e os arquivos style.css e slide.html, eu subdividi os códigos para ficar mais fácil ainda a instalação.
Depois das pastas JS e imagens e o arquivo style.css serem copiados ao local de publicação de seu projeto, usando o filezila ou qualquer outro programa FTP, o códigos abaixo serão usados no Web Acappella e em seguida direi como mudar as imagens.
Este código deve ser colocado na sessão head da página, basta clicar duas vezes sobre um espaço em branco selecionar a opção avançado, (uma engrenagem) e colar o seguinte código na caixa em branco.

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
<script type=”text/javascript”>var _siteRoot=’index.html’,_root=’index.html’;</script>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/scripts.js”></script>

Este tem a função de chamar os arquivos em Java script e css para o funcionamento do plugin.

Feito isso, este outro código será colocado no corpo da página através de uma código HTML, uma ferramenta do próprio Web Acappella, vá em inserir e escolha o código HTML, e cole o código a seguir dentro e posicione onde preferir.

<div id=”header”><div>
<div id=”slide-holder”>
<div id=”slide-runner”>
<a href=”"><img id=”slide-img-1″ src=”images/nature-photo.png” alt=”" /></a>
<a href=”"><img id=”slide-img-2″ src=”images/nature-photo1.png” alt=”" /></a>
<a href=”"><img id=”slide-img-3″ src=”images/nature-photo2.png” alt=”" /></a>
<a href=”"><img id=”slide-img-4″ src=”images/nature-photo3.png” alt=”" /></a>
<a href=”"><img id=”slide-img-5″ src=”images/nature-photo4.png” alt=”" /></a>
<a href=”"><img id=”slide-img-6″ src=”images/nature-photo4.png” alt=”" /></a>
<a href=”"><img id=”slide-img-7″ src=”images/nature-photo6.png” alt=”" /></a>
<div id=”slide-controls”>
<p id=”slide-client”><strong>post: </strong><span></span></p>
<p id=”slide-desc”></p>
<p id=”slide-nav”></p>
</div>
</div>
<!–Aqui começa o código da descrição as imagens –>
</div>
<script type=”text/javascript”>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>
</div></div><!–/header–>

Este código é responsável pela exibição das imagens, é através dele que é feita a troca das imagens, por isso muita atenção nesta parte. Neste código temos os caminhos das imagens, no qual temos duas formas de trocá-las, a primeira é diretamente no código, alterando o seu nome, mas antes temos que hospedar as imagens que queremos. É recomendado que tenha a mesma dimensão das imagens já existentes na pasta imagens, então escolha as imagens que deseja colocar no seu slideshow, passe-as para a pasta imagens, uma das pastas que hospedamos a pouco, no código, trocamos o nome e a extensão das imagens.

Alterando as imagens

Por exemplo:

<a href=”"><img id=”slide-img-1″ src=”images/nature-photo.png” alt=”" /></a>

Cada linha desta no código representa uma imagem que aparece no slide, onde a parte que alteramos é: src=”imagens/nature-photo.png”, apenas trocando o nome e a extensão da imagem que hospedamos. Supondo que uma das imagens que você colocou na pasta tenha o nome foto1 e a extensão jpg, então o código ficaria desta forma: src=”imagens/foto1.jpg”, assim o comando irá buscar a imagem foto1.jpg hospedada na pasta imagens, que está no mesmo diretório que seu site será publicado. Repita isso em cada linha deste código, caso queira acrescentar imagens basta acrescentar mais uma linha, ou retire uma linha para retirar uma imagem.

Alterando o texto das imagens

Logo abaixo do código das imagens existe um código em Java script que é responsável pela exibição das mensagens referentes a cada imagem, pode identificar a descrição pelo id no código da imagem que vimos acima há uma parte: <img id”slide-img-1” que no caso refere-se a uma identificação para colocação de estilo e principalmente a nossa descrição, desta forma podemos alterar a descrição de acordo com o id. Veja:

if(!window.slider) var slider={};slider.data=[{“id”:”slide-img-1″,”client”:”nature beauty”,”desc”:”nature beauty photography”}

Temos o ID da primeira imagem, o nome da imagem e a descrição, respectivamente são: “slide-img-1”,”nature beauty, “nature beauty photography”, com exceção do id as outras prtes devem ser alteradas de acordo com o que você queira, repita isso em cada parte deste código. Existe uma linha dessas para cada imagem a exemplo do código HTML mostrado na etapa anterior, se desejar não exibir descrições nas imagens basta apagar esta parte no código.
Uma coisa simples que pode mudar a cara de seu projeto. Aproveitem!