Portfolio image slider com CSS e JQuery

Com o lançamento do IPAD e da 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 mais aplicações interativas para o flash, se necessário.

Por Programação Pular para comentários
Portfolio image slider com CSS e JQuery

Com o lançamento do IPAD e da 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 mais aplicações interativas para o flash, se necessário. O controle deslizante de imagem html baseado terá seus benefícios com SEO e também irá degradar normalmente para aqueles códigos javascript externos.

http://www.oficinadanet.com.br//imagens/coluna/3287/demo.jpg



HTML


Comece com ter um div container embrulho chamado main_view , e duas seções aninhada chamada 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 para uma visual.
http://www.oficinadanet.com.br//imagens/coluna/3287/1.jpg


1 2 3 4



CSS


Dê uma olhada nos comentários abaixo para uma explicação dos estilos.
/*-- Container Principal --*/
.main_view {
	float: left; margin-right:15px;
	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; margin-right:15px;}

/*--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. Criação de 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 esta hospedado no Google.



Logo após a linha onde você ligou o seu jQuery, iniciar uma nova tag < script > e iniciar o seu código usando o $(document).ready event. Isso permite que seu código jQuery para executar o instante em que o DOM está pronto para ser manipulado. O código que você vai ser escrito no próximos passos serão todos ocorrem 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 as ações estão sendo realizadas jQuery.

Configurando o Slider Imagem


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.

// Mostra a paginação e ativar a sua primeira ligação
$(".paging").show();
$(".paging a:first").addClass("active");

// Pega o tamanho da imagem, quantas imagens existem, então deter o tamanho do rolo de imagem.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

// Ajustar a bobina de imagem para o seu novo tamanho
$(".image_reel").css({'width' : imageReelWidth});



Configurando a função de Slider e Timer


Primeiro criamos a função para o evento de slides por si só (rotate). Em seguida, crie outra função (rotateSwitch) que irá rodar e repetir esse evento slide (rotate).

//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 todos os ativos de classe
    $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 Set - 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 deseja exibir o slide por um longo período de tempo, que permitirá o controle deslizante para parar quando ele é pairou. Outra coisa a considerar é que devemos zerar o cronômetro cada vez que a paginação for clicado. Isto irá prevenir comutadores 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
});


http://www.oficinadanet.com.br//imagens/coluna/3287/demo.jpg


portfolio_image_rotator.rar

Leia também: Como segurar uma câmera para fotos com velocidade do obturador lenta?. Acompanhe as últimas notícias de tecnologia aqui no Oficina da Net. Sempre trazendo conteúdos novos e produtos interessantes.

Compartilhe com seus amigos:
Comentários:
Carregar comentários