Neste post vou mostrar como incluir um banner rotativo no seu site.
As imagens deste post foram escolhidas aleatoriamente apenas para título de demonstração.
Em primeiro lugar, baixe o arquivo banner.zip contendo todas as pastas e códigos que utilizaremos.
Descompacte as pastas na mesma pasta raiz onde está o arquivo html que será incluido o banner.
Abra o arquivo banner.html e copie o código conforme descrição abaixo.
No cabeçalho da sua página, será necessário incluir as seguintes linhas de código:
<link href="css/camera.css" rel="stylesheet"></link><i> <script src="js/jquery.js"></script> <script src="js/jquery-migrate-1.2.1.js"></script> <script src="js/script.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.ui.totop.js"></script> <script src="js/jquery.mobilemenu.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.tooltipster.js"></script> <script src="js/camera.js"></script> <!--[if (gt IE 9)|!(IE)]><!--> <script src="js/jquery.mobile.customized.min.js"></script> <!--<![endif]--> <script src="js/modernizr.custom.js"></script> <script> $(document).ready(function(){ jQuery('#camera_wrap').camera({ loader: 'pie', pagination: true , minHeight: '200', thumbnails: true, height: '40.85106382978723%', caption: true, navigation: true, fx: 'mosaic' }); $().UItoTop({ easingType: 'easeOutQuart' }); $('.tooltip').tooltipster(); }); </script>
As imagens deste post foram escolhidas aleatoriamente apenas para título de demonstração.
Em primeiro lugar, baixe o arquivo banner.zip contendo todas as pastas e códigos que utilizaremos.
Descompacte as pastas na mesma pasta raiz onde está o arquivo html que será incluido o banner.
Abra o arquivo banner.html e copie o código conforme descrição abaixo.
No cabeçalho da sua página, será necessário incluir as seguintes linhas de código:
<link href="css/camera.css" rel="stylesheet"></link><i> <script src="js/jquery.js"></script> <script src="js/jquery-migrate-1.2.1.js"></script> <script src="js/script.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.ui.totop.js"></script> <script src="js/jquery.mobilemenu.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.tooltipster.js"></script> <script src="js/camera.js"></script> <!--[if (gt IE 9)|!(IE)]><!--> <script src="js/jquery.mobile.customized.min.js"></script> <!--<![endif]--> <script src="js/modernizr.custom.js"></script> <script> $(document).ready(function(){ jQuery('#camera_wrap').camera({ loader: 'pie', pagination: true , minHeight: '200', thumbnails: true, height: '40.85106382978723%', caption: true, navigation: true, fx: 'mosaic' }); $().UItoTop({ easingType: 'easeOutQuart' }); $('.tooltip').tooltipster(); }); </script>
No código html após as tags <body> inclua o texto abaixo:
<div class="slider">
<div class="camera_wrap" id="camera_wrap">
<div data-thumb="images/thumb.png" data-src="images/slide.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 1
</div>
</div>
<div data-thumb="images/thumb1.jpg" data-src="images/slide1.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 2
</div>
</div>
<div data-thumb="images/thumb2.png" data-src="images/slide2.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 3
</div>
</div>
<div data-thumb="images/thumb3.png" data-src="images/slide3.jpg">
<div class="caption fadeFromBottom">
Descrição Banner 4
</div>
</div>
</div>
</div>
<script src="js/classie.js"></script>
<script src="js/thumbnailGridEffects.js"></script>
Salve os arquivos e caso seja necessário, altere as propriedades da classe slider, a qual tem as proporções do banner configuradas.
Muito bom amigo OBG!!!
ResponderExcluirBoa tarde, como faço para diminuir o tamanho do banner?
ResponderExcluirNo banner.html, está o tamanho do banner...
ExcluirOlá, você pode colocá-lo dentro de outro div com tamanho fixo que ele automaticamente assumirá o tamanho.
Excluirnao consegui alterar o tamanho do banner,
ResponderExcluirstyle
#slider{
width:980px;
height:309px;
}
/style
ele até altera a lagura, mas o problema é a largura, como faço pra mexer na largura?
ResponderExcluirobrigada
Na parte reservada ao HEAD, tem height: '40.85106382978723%',
ExcluirVocê deverá alterar para o tamanho da sua altura em percentual sobre o o tamanho da largura. Exemplo: Banner de 1000px por 300px, informar 30%
desculpe, escrevi errado, ele altera a largura e o problema é na altura, que nao diminui
ResponderExcluirOi amigo, consegui fazer... muito bom esse tutorial... Parabéns!!! Gostaria de fazer um outro efeito tipo quando banner passa da direita para esquerda. Obrigada, Regiany
ResponderExcluirMuito bom este tutorial, gostaria de saber aonde devo colocar um href para redirecionar os banners? Obrigado
ResponderExcluirpoxa como sai a veificação de segurança negocio chato pra fazer download
ResponderExcluirGrato pelo excelente banner. Como colocar links nas imagens que direcionem para uma página?
ResponderExcluirprecisando de um assim, sem flash, mas n tenho acesso ao código fonte do site. E n sei fazer no photofiltre nem no fireworks. Só no flash que n aceitam mais. danado
ResponderExcluirNão consegui baixar o arquivo zip. Fica pedindo o número do telefone, alguem me ajuda. HELP ME!!
ResponderExcluirNão consegui baixar o arquivo zip. Fica pedindo o número do telefone, alguem me ajuda. HELP ME!!
ResponderExcluirObservo que o autor não ajudou quanto ao dimensionamento do painel, seja mais claro, pois somente no html não será possível ...ajude
ResponderExcluirO link ta quebrado, não baixa, fica pedindo telefone
ResponderExcluirEstarei mudando o link para o arquivo. Aos que ainda não respondi quanto ao redimensionamento, basta alterar o tamanho do dia onde o banner se encontra. Para utilizá-lo é necessário ter um conhecimento mínimo em css e HTML. Abraços
ResponderExcluirEste comentário foi removido pelo autor.
ExcluirGostaria de saber se posso utilizar esse código em um trabalho da escola, obrigado e esperando resposta
ExcluirPode sim, sem problemas.
ExcluirO problema é na altura, que nao diminui
ResponderExcluirhttp://jfcimports.blogspot.com.br
Faltou só conseguir ajustar o tamanho do banner pra ficar perfeito
ResponderExcluirJá mudei o height do slider e até diminui a altura do próprio banner, mas essa fixo naquele tamanho :(
ExcluirMuito bom gostei.
ResponderExcluirMuito Bom. Mais como faço para colocar links nas imagens que direcionem para uma página?
ResponderExcluirEle não funciona com href. Então você precisa criar:
Excluirdata-link='seulinkaqui' ao lado do data-src='suaimagemaqui'
Como faz pra alterar o tempo de transição entre uma foto e outra ?
ResponderExcluirNão consegui localizar.
Gostei do banner. Funcionou ok. Gostaria de saber se posso usá-lo para quaisquer fins, como ambiente intranet de empresa para fins informativos por exemplo. Obrigado.
ResponderExcluirOlá! Não consigo fazer rodar no IE9. Só aparecem os botões.
ResponderExcluirObrigado!
ResponderExcluirAlguém sabe como eu consigo remover aquela bolinha de tempo que fica no canto direito?
ResponderExcluirBoa tarde amigo onde altero a cor preta do fundo do texto. Obrigado
ResponderExcluir