Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pinoc

Carousel width 100%

Por , em Javascript

Recommended Posts

pinoc    2

pinoc
Postado

Bom dia.

 

Estou desesperado a umas 3 semana procurando como fazer um carousel com width 100%, por exemplo aparecer a imagem anterios e proxima do carousel com uma opacidade reduzida, tenho certeza que existe algum plugin pra jquery que faz isso facil mais não achei nem um até agora.

 

Alguem poderia pelo amor de deus me dar uma luz??

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Não entendi muito bem...

Tipo assim, você quer que seja exibida 3 imagens? uma sendo a anterior, com opacidade reduzida, outra sendo a atual, sem opacidade, e a outra sendo a próxima, também com opacidade reduzida...

é isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

pinoc    2

pinoc
Postado

Não entendi muito bem...

Tipo assim, você quer que seja exibida 3 imagens? uma sendo a anterior, com opacidade reduzida, outra sendo a atual, sem opacidade, e a outra sendo a próxima, também com opacidade reduzida...

é isso?

 

Olá Ismaeldm

 

Correto isso mesmo. Saberia algum plugin?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Olá Ismaeldm

 

Correto isso mesmo. Saberia algum plugin?

Você utiliza JQuery não é?

ja tentou fazer algo do tipo assim...

 

$('img').click(function(){
 $(this).prev().css('opacity', '0.5');
 $(this).css('opacity', '1');
 $(this).next().css('opacity', '0.5');
});

 

não sei no que você esta imaginando, mas eu penso em algo como uma galeria de fotos, onde você tem uma miniatura na imagem anterior e da próxima com opacidade diferente...

se eu estiver errado me avise que tento te ajudar melhor :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

pinoc    2

pinoc
Postado

Você utiliza JQuery não é?

ja tentou fazer algo do tipo assim...

 

$('img').click(function(){
 $(this).prev().css('opacity', '0.5');
 $(this).css('opacity', '1');
 $(this).next().css('opacity', '0.5');
});

 

não sei no que você esta imaginando, mas eu penso em algo como uma galeria de fotos, onde você tem uma miniatura na imagem anterior e da próxima com opacidade diferente...

se eu estiver errado me avise que tento te ajudar melhor :thumbsup:

 

 

Penso em alguma coisa desse tipo veja http://www.harvard.edu/

 

Obrigado por ajudar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Penso em alguma coisa desse tipo veja http://www.harvard.edu/

 

Obrigado por ajudar

 

Fiz um código aqui, ficou até legal \o 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {
background-color:#000000; 
height:200px; 
width: 900px; 
padding:10px; 
overflow:hidden;
}
img {
width: 300px;
height: 200px;
opacity: 0.5;
float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">  
$(document).ready(function(){
$('img').load(function(){
	$('img:first').attr('id', 'img1');
	$('img:first').next().attr('id', 'img2');
	$('img:first').next().next().attr('id', 'img3');
});
$('img:first').click(function(){
	$(this).fadeTo(400, 1);
	$(this).next().fadeTo(400, 0.5);
});
$('img:last').click(function(){
	$(this).fadeTo(400, 1);
	$(this).prev().fadeTo(400, 0.5);
});
$('img:not(:first)').click(function(){
	var last = $(this).next().attr('src');
	if (last==undefined) return false;
	var id = $(this).attr('id');
	if (id=='img1') {
		$(this).prev().attr('id', 'img1').animate({width:'show'}, 400).fadeIn(400);
		$(this).attr('id', 'img2').fadeTo(400, 1);
		$(this).next().attr('id', 'img3').fadeTo(400, 0.5);
		$(this).next().next().animate({width:'hide'}, 400).removeAttr('id');
	};
	if (id=='img2') {
		$(this).prev().fadeTo(400, 0.5);
		$(this).fadeTo(400, 1);
		$(this).next().fadeTo(400, 0.5);	
	};
	if (id=='img3') {
		$(this).prev().prev().removeAttr('id').animate({width:'hide'}, 400);
		$(this).prev().attr('id', 'img1').fadeTo(400, 0.5);
		$(this).attr('id', 'img2').fadeTo(400, 1);
		$(this).next().attr('id', 'img3').animate({width:'show'}, 400).fadeIn(400);
	};
});
});
</script>
</head>
<body>
<div>
<img src="http://www.harvard.edu/sites/default/files/home_features/SambergFrank_522.jpg" style="display:block;" />
<img src="http://www.harvard.edu/sites/default/files/home_features/050312_Features_0219.jpg" style="opacity:1; display:block;" />
<img src="http://www.harvard.edu/sites/default/files/home_features/Jonathan_Walton_522.jpg" style="display:block;" />
<img src="http://www.harvard.edu/sites/default/files/home_features/CabotHouse_522.jpg" style="display:none;" />
<img src="http://www.harvard.edu/sites/default/files/home_features/Faust_Hockfield_522.jpg" style="display:none;" />
<img src="http://www.harvard.edu/sites/default/files/home_features/Lithgow_Jones_522.jpg" style="display:none;" />
</div>
</body>
</html>

Usei as imagens do site da Harvard

Compartilhar este post

Link para o post
Compartilhar em outros sites

pinoc    2

pinoc
Postado

Seu codigo ficou legal mas.

eu preciso que fique em 100% da pagina e tenha rolagem altomatica e tenha como passar de imagem quando quizer.

 

Mas muito obrigado pelo trabalho de estar me ajudando irei estudar seu codigo para aprende-lo mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ismaeldm    5

Ismaeldm
Postado

Seu codigo ficou legal mas.

eu preciso que fique em 100% da pagina e tenha rolagem altomatica e tenha como passar de imagem quando quizer.

 

Mas muito obrigado pelo trabalho de estar me ajudando irei estudar seu codigo para aprende-lo mais.

 

Bem, aí é só você fazer o seguinte...

eu acrescentei ali um padding de 10px, então temos 10px de espaço no lado esquerdo e no lado direito da tela...

são sempre 3 imagens mostradas...

Então você irá capturar a largura da pagina, aí você coloca essa largura na DIV, aí faz a largura-20 (dos espaços) e divide por 3 (tres imagens), e pega essa nova largura para colocar em cada imagem...

aí seu problema está resolvido :grin:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito