Portfolio image slider com CSS e JQuery

Comentário SWX: Na medida do possível, tentamos melhorar a tradução padrão “google translator”

Depois do lançamento do IPAD e sua falta de suporte para flash, que despertou uma série de debates sobre o futuro do flash. Com isto em mente, eu acredito que é prudente criar widgets simples como o controle deslizante de imagem usando HTML / CSS / Javascript, e deixar aplicações mais interativas para o flash, se necessário.

HTML

Comece com um div chamado main_view,  e duas seções aninhada chamadas image_reel e paging . O image_reel irá conter as imagens deslizantes e paging contém os controles de paginação. Dê uma olhada na imagem abaixo.

<div class="main_view">
 <div class="window">
 <div class="image_reel">
 <a href="#"><img src="reel_1.jpg" alt="" /></a>
 <a href="#"><img src="reel_2.jpg" alt="" /></a>
 <a href="#"><img src="reel_3.jpg" alt="" /></a>
 <a href="#"><img src="reel_4.jpg" alt="" /></a>
 </div>
 </div>
 <div class="paging">
 <a href="#" rel="1">1</a>
 <a href="#" rel="2">2</a>
 <a href="#" rel="3">3</a>
 <a href="#" rel="4">4</a>
 </div>
 </div>

CSS

Dê uma olhada nos comentários abaixo para uma explicação dos estilos.

/*-- Container Principal --*/
 .main_view {
 float: left;
 position: relative;
 }
 /*--Janela / Masking Estilos--*/
 .window {
 height:286px;	width: 790px;
 overflow: hidden; /*--Hides anything outside of the set width/height--*/
 position: relative;
 }
 .image_reel {
 position: absolute;
 top: 0; left: 0;
 }
 .image_reel img {float: left;}

 /*--Paginação de Estilos--*/
 .paging {
 position: absolute;
 bottom: 40px; right: -7px;
 width: 178px; height:47px;
 z-index: 100; / *-- Garante a paginação fica na camada superior - * /
 text-align: center;
 line-height: 40px;
 background: url(paging_bg2.png) no-repeat;
 display: none; / *-- escondido por padrão, será mostrado mais tarde com jQuery - * /
 }
 .paging a {
 padding: 5px;
 text-decoration: none;
 color: #fff;
 }
 .paging a.active {
 font-weight: bold;
 background: #920000;
 border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
 }
 .paging a:hover {font-weight: bold;}

Etapa 3.  jQuery

Para aqueles que não estão familiarizados com jQuery , fazer check-out o seu primeiro site e obter uma visão geral de como ele funciona. Eu compartilhei um alguns truques que eu acumulei ao longo do caminho, você pode verificar os para fora também.

Etapa inicial – Chame o arquivo jQuery

Você pode optar por baixar o arquivo do site do jQuery, ou você pode usar o que está hospedado no Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Logo após a linha onde você linkou o seu jQuery, iniciar uma nova tag < script > com o evento $(document).ready. Isso faz seu código jQuery ser executado somente após o DOM estar pronto para ser manipulado. Todo o código que você vai escrever no próximos passos estará aqui dentro.

$(document).ready(function() {
       //Code goes here
 });

Etapa 4. Trazendo-a para a vida – jQuery

O script a seguir contém comentários explicando que ações JQuery estão sendo realizadas.

Configurando a imagem do Slide

Comece mostrando a paginação e ativando o primeiro link. Então vamos calcular e ajustar a largura do image_reel de acordo com quantos slides existem.

//Paginação e Função Slider
 rotate = function(){
 var triggerID = $active.attr("rel") - 1; //Obtém o número de vezes para deslizar
 var image_reelPosition = triggerID * imageWidth; Determina a distância que a image reel precisa de slides
  
 $(".paging a").removeClass('active'); //Remove a classe CSS active de todos os links de paginação
 $active.addClass('active'); //Adicionar classe ativa ($active é declarado na função rotateSwith)
  
 //Slider Animação
 $(".image_reel").animate({
 left: -image_reelPosition
 }, 500 );
  
 };
  
 //Rotação e Tempo de eventos
 rotateSwitch = function(){
    play = setInterval(function(){ //temporizador - isso vai se repetir a cada 7 segundos
    $active = $('.paging a.active').next(); //Mover para proxima paginação
    if ( $active.length === 0) { //Se a paginação acabar...
      $active = $('.paging a:first'); //voltar para a primeira.
    }
    rotate(); //Dispara o paging e função deslizante;
    }, 7000); //velocidade Timer em milissegundos (7 segundos)
 };
  
 rotateSwitch(); //lançamento

Clique Hover e Eventos

No caso de o usuário desejar exibir o slide por um longo período de tempo, permitirá o controle deslizante parar. Outra coisa a considerar é que devemos zerar o cronômetro a cada vez que a paginação for clicada. Isto irá prevenir mudanças inesperado e permitir uma experiência mais suave.

//On Hover
 $(".image_reel a").hover(
     function() { clearInterval(play); //Stop the rotation }, 
     function() { rotateSwitch(); //Resume rotation timer  }
  );  
 //On Click
 $(".paging a").click(
     function() { $active = $(this); //Activate the clicked paging
                 //Reset Timer
                 clearInterval(play); //Stop the rotation
                 rotate(); //Trigger rotation immediately
                 rotateSwitch(); // Resume rotation timer
                 return false; //Prevent browser jump to link anchor
                }
 );

Fonte: Thauan Braga/OficinadaNet

Redes Sociais

• 

Tags | css, html, javascript, jquery, SEO, Sites, slider