Olá turma do bem! Ando meio devagar com o blog porque graças a Deus estou lotado de trabalho. Sabe quando você começa a jornada diária as 07 da manhã e para as 02 ou mais da madrugada? Tá desse jeito. Graças ao nosso glorioso Deus.
Mas vamos lá. Hoje estarei postando algo já conhecido por alguns e até visto em alguns templates que distribuem por aí.
Algo bacana, fácil de implementa no site: Banner Slider largura total.
Como quase todas as vezes será necessário editar alguns arquivos. Aconselho usar o Notepad++ , que pode ser baixado gratuitamente clicando aqui.
Você também precisará baixar alguns arquivos necessários. Baixe o arquivo compactado clicando aqui de descompacte em um local no seu computador.
Dentro do arquivo compactado tem tres pastas:
css
images
js
cada qual com seu conteúdo necessário para nosso banner funcionar.
Hoje vou explicar não apenas implantar o banner no seu projeto, mas também um truque para você por em cada página um banner passando as imagens relacionadas ao assunto da página.
Por exemplo:
Supomos que faremos um site para um boteco, neste site terá as seguintes páginas:
a) - Página principal que será a apresentação do boteco
b) - Especialidades da casa (que vai falar dos tira gostos e pratos da casa)
c) - Golos e gorós (que será sobre a parte de bebida | banner referente a página
d) - Programação e Eventos (que fala sobre a programação de eventos que tem no boteco) |
e) - Unidades ( o boteco do site possui várias unidades (matriz e filias) , nesta pagina falará de cada uma e sua localização e contato
-
Então na página principal haverá banner referente a todas as páginas e nas demais cada qual passando banners sobre o assunto da página.
Então mãos a obra:
1) CRIAR AS IMAGENS DOS BANNERS
Sugiro criar imagens com as dimensões 1500 px de largura e 600 px de altura
Então para a página a) criarei 5 banners sendo:
banner-pg-a-1.jpg
banner-pg-b-1.jpg (este banner tb será usado como o primeiro da pag b)
banner-pg-c-1.jpg (este banner tb será usado como o primeiro da pag c)
banner-pg-d-1.jpg (este banner tb será usado como o primeiro da pag d)
banner-pg-e-1.jpg (este banner tb será usado como o primeiro da pag e)
Para a página b) terei os seguintes banners
banner-pg-b-1.jpg > banner que foi usado tb na pagina a)
banner-pg-b-2.jpg
banner-pg-b-3.jpg
banner-pg-b-4.jpg
Para a página c) serão:
banner-pg-c-1.jpg > banner que foi usado tb na pagina a)
banner-pg-c-2.jpg
banner-pg-c-3.jpg
Para a página d) os seguintes:
banner-pg-c-1.jpg > banner que foi usado tb na pagina a)
banner-pg-c-2.jpg
banner-pg-c-3.jpg
banner-pg-c-4.jpg
Para a página d) serão:
banner-pg-d-1.jpg > banner que foi usado tb na pagina a)
banner-pg-d-2.jpg
banner-pg-d-3.jpg
E para finalizar os banners criei os da página e):
banner-pg-e-1.jpg
banner-pg-e-2.jpg
banner-pg-e-3.jpg
Agora vamos criar nossas setas que serão as que ficarão uma apontando para direita e outra para esquerda, estas setas ao clicar fará a transição manual dos banners
Estas terão que ser criadas dentro de um quadro na medida de 42 px de largura e 80 px de altura e devem ser imagens png de fundo transparente.
salve a seta apontado para direita como seta-direita.png
e a que aponta para a esquerda como seta-esquerda.png
Agora que todas as imagens foram criadas, crie uma pasta na raiz de public_html de sua hospedagem com o nome de "images" e hospede todas as imagens criadas acima dentro desta pasta.
2) PERSONALIZANDO OS BANNERS
No arquivo descompactado que você baixou terá a pasta "js", dentro da mesma vai encontrar o arquivo padrão.js
Então agora vamos fazer tudo com muita cautela e atenção.
Vamos criar nosso arquivo para a página a)
Edite o arquivo padrão.js com o notepad++
Observe os trechos como abaixo:
{
"image" : "img.jpg",
"url" : "link_url",
"firstline" : "frase1",
"secondline" : "fraselink"
}
Para cada imagen do slider banner receberá um trecho deste, Sendo que o primeiro trecho é para a primeira imagen do banner a aparecer e assim por diante;
Sendo se o seu banner tiver apenas 3 imagens, vc manterá 3 trechos, apagando os dois restantes. Se tiver mais imagens do que contém no código vc acrescenta um trecho destes.
As palavras em vermelho vamos substituir seguindo as seguintes condiçoes:
img.jp : nome da imagem do banner criada
link_url: será o link para onde vai redirecionar
frasr1: A primeira frase a aparecer
fraselink: A segunda frase a aparecer a qual receberá o link definido na link_url
Então, seguindo o exemplo deste artigo vamos preparar o arquivo "js" para nossa página a)
Os trechos que irei modificar estão entre as linhas 10 e 35 do arquivo padrão.js
Alterados ficaram assim:
var photos = [ {
"image" : "banner-pg-a-1.jpg",
"url" : "http://www.webacappellashow.com.br/templates/boteco/index.html",
"firstline" : "BuTeKo WAS",
"secondline" : "Você aqui"
}, {
"image" : "banner-pg-b-1.jpg",
"url" : "http://www.webacappellashow.com.br/templates/boteco/especialidades.html",
"firstline" : "Os MeLhOrEs TiRa GoStOs",
"secondline" : "Experimente"
}, {
"image" : "banner-pg-c-1.jpg",
"url" : "http://www.webacappellashow.com.br/templates/boteco/golosgoros.html",
"firstline" : "GoLoS & GoRóS",
"secondline" : "Embebede-se"
}, {
"image" : "banner-pg-d-1.jpg,
"url" : "http://www.webacappellashow.com.br/templates/boteco/eventos.html",
"firstline" : "NoSSaS FeStAs",
"secondline" : "Falta você"
}, {
"image" : "banner-pg-e-1.jpg",
"url" : "http://www.webacappellashow.com.br/templates/boteco/filiais.html",
"firstline" : "NoSSaS FiLhAs",
"secondline" : "Unidades BuTeKo WAS"
}
Não esqueça que você terá que criar cada página no Webacappella e nomeá-la de acordo com os links informados.:
Feito as alterações salve o arquivo com a opção salvar como e dê o nome do arquivo com o mesmo nome de sua página com a extensão "js". Salvando com o mesmo nome da página facilitará como referência no seu projeto.
No caso deste exemplo editado acima vou salvar como home.js pois vou utilizar na página index.html. Que é a pagina principal do site.
Para assimilar melhor a explicação, farei também o exemplo para nossa página b, que será a página especialidades.html
Ná pagina especialidades.html o banner terá apenas 4 imagens rotativas.
Abrimos novamente o arquivo padrão.js e localizamos o seguinte trecho:
var photos = [ {
"image" : "img.jpg",
"url" : "link_url",
"firstline" : "frase1",
"secondline" : "fraselink"
}, {
"image" : "img.jpg",
"url" : "link_url",
"firstline" : "frase1",
"secondline" : "fraselink"
}, {
"image" : "img.jpg",
"url" : "link_url",
"firstline" : "frase1",
"secondline" : "fraselink"
}, {
"image" : "img.jpg",
"url" : "link_url",
"firstline" : "frase1",
"secondline" : "fraselink"
}, {
"image" : "img.jpg",
"url" : "link_url",
"firstline" : "frase1",
"secondline" : "fraselink"
}
];
No trecho apresentado está para utilizar 5 imagens, então eu apago o trecho com o qual marquei com o fundo amarelo. E faço as modificações como já explicado anteriormente.
Vai ficar assim:
var photos = [ {
"image" : "banner-pg-b-1.jpg ",
"url" : "http://www.webacappellashow.com.br/templates/boteco/delivery.html",
"firstline" : "Bife acebolado ao molho grego e farofa",
"secondline" : "Delivery"
}, {
"image" : "banner-pg-b-2.jpg ",
"url" : "http://www.webacappellashow.com.br/templates/boteco/delivery.html",
"firstline" : "Carne de Sol foleada a mussarela",
"secondline" : "Delivery"
}, {
"image" : "banner-pg-b-3.jpg ",
"url" : "http://www.webacappellashow.com.br/templates/boteco/delivery.html",
"firstline" : "Tira gostos na assados ",
"secondline" : "Delivery"
}, {
"image" : "banner-pg-b-4.jpg ",
"url" : "http://www.webacappellashow.com.br/templates/boteco/delivery.html",
"firstline" : "Bolinhos de arroz a carne moída",
"secondline" : "Delivery"
},
Como é só um exemplo coloquei todos redirecionando para um link para a página de pedido Delivery.
Mas logico que poderia ser para uma receita ou qualquer outra coisa. Vai da criatividade de cada um e do tema do projeto.
Depois de feito as alterações , com a opção de salvar como do NOTEPAD ++ , salvei o arquivo com o nome especialidades.js
Faça estes procedimentos para cada página que irá receber o banner com suas características individuais da página.
No caso do exemplo foram criados os arquivos:
home.js
especialidades.js
eventos.js
filiais.js
golosgoros.js
Com todos os arquivos de extensão "js" criados, dentro da sua pasta public_html na sua hospedagem, crie a pasta js e publique os arquivos com extensão "js" dentro desta pasta.
Agora copie as pastas descompactadas:
- css
- js
- images
para dentro de public_html da sua hospedagem.
3) Aplicando no Webacappella
A cada página que vai inserir o banner você fará o seguinte:
Com a opção do Webacappella PAGINAS/MATRIZES>>PROPRIEDADES DA PÁGINA, clique na CATRACA e cole o seguinte código abaixo.
Porém é importante que: Substituir o trecho em vermelho padrao.js pelo nome do arquivo "js" referente a página que vai utilizar.
Explicando melhor:
Na minha página index.html vou substituir o trecho em vermelho pela palavra home.js
Na minha página especialidades.html vou substituir o trecho em vermelho pela palavra especialidades.js
e assim por diante
<link rel="stylesheet" type="text/css" href="css/bannerstyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/padrao.js"></script>
<!-- jQuery handles to place the header background images -->
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<!-- Top navigation on top of the images -->
</div>
<!-- Slideshow controls -->
<div id="headernav-outer">
<div id="headernav">
<div id="back" class="btn"></div>
<div id="control" class="btn"></div>
<div id="next" class="btn"></div>
</div>
</div>
<!-- jQuery handles for the text displayed on top of the images -->
<div id="headertxt">
<p class="caption">
<span id="firstline"></span>
<a href="#" id="secondline"></a>
</p>
</div>
</div>
Faça para cada página que vai conter o banner.
Para quem tem conhecimento pode personalizar melhor os elementos do banner editando o arquivo bannerstyle.css dentro da pasta css.
Os créditos dese artigo vai para Marco kuiper
