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

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


Portfolio image slider com CSS e JQuery Portfolio image slider com CSS e JQuery Portfolio image slider com CSS e JQuery Portfolio image slider com CSS e JQuery
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

Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, comente:
Carregar comentários
O que é mais importante em um smartphone?
Bateria(28,05%)
Câmera(10,20%)
Performance(57,32%)
Aparência(2,01%)
Tela(2,43%)