Pois talvez venham dados dinâmicos de banco de dados, gostaria de saber isso!
Galeria Slideshow + Carrosel No Jquery
#1
Posted 04/06/2009, 11:53
Pois talvez venham dados dinâmicos de banco de dados, gostaria de saber isso!
Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!
#2
Posted 04/06/2009, 12:34
veja os exemplos mais avançados.
EDITADO:
Putz, é um carrosel, e não um botão de nex e previous certo...
bem, dá para juntar com um outro plugin, mas talves fique meio gambistico...
pesquisa rapida...
http://www.gmarwaha..../jcarousellite/
nunca usei.
Edição feita por: Édipo Costa Rebouças, 04/06/2009, 13:34.
#3
Posted 04/06/2009, 14:13
Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!
#4
Posted 04/06/2009, 15:43
pelo que sei do cycle, vc vai ter que dar um parametro(um seletor indicando onde estão as fotos "#nav" por exemplo) a ele que ele vai colocando e tirando uma classe activeSlide nas fotos.
talvez o problema seja dar o scroll no carrosel quando vc passar as fotos visiveis.
Edição feita por: Édipo Costa Rebouças, 04/06/2009, 15:56.
#5
Posted 04/06/2009, 16:09
agora o que tenho que fazer, é através de um parâmetro, fazer aparecer a imagem grande. Ela nao precisa mudar quando aperta o next, nem o previous, somente quando clica na própria imagem!
como posso fazer?
Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!
#6
Posted 04/06/2009, 16:25
$(".anyClass img").click(function(){ $("#tamReal").attr("src", $(this).attr("src")); });Adicionado o evento em todas as imagens que dispara uma função que pega o src da miniatura e adiciona no src de uma imagem com id #tamReal.
Isso é só um exemplo básico. No seu caso, talvez isso não funcione direito, porque ele vai pegar a url da miniatura e adicionar na imagem maior. Se você tiver duas imagens (thumb e real), esse script terá que ser melhor formulado. Coisa simples também, qualquer coisa posta aí.
#8
Posted 05/06/2009, 09:02
[codebox]
<style>
/**** Slideshow ****/
#slideshow{
width:840px;
}
#boxNav{
margin-top:14px;
background-color:#12101b;
padding-top:6px;
padding-bottom:6px;
margin-bottom:14px;
}
#imgMaior img{
border: 1px solid #a1a0a5;
}
.thumbs img{
margin: 0 6px 0 6px;
_margin: 0 5px 0 5px; /* Hack IE6 */
}
.prev, .next{
background-color:#23212b;
padding: 33px 7px 33px 7px;
}
#slideshow #anterior{
float:left;
}
#slideshow .thumbs{
float:left;
}
.next{
margin-left:4px;
_margin-left:7px;
}
</style>
<script src="../libs/jquery/jquery.js" type="text/javascript"></script>
<script src="../libs/jquery/jcarousellite_1.0.1.js" type="text/javascript"></script>
<script>
$(function() {
$(".thumbs").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
<div id="slideshow">
<div id="imgMaior"><img src="../imagens/img1.jpg"></div>
<div id="boxNav">
<div id="anterior">
<button class="prev"><img src="../imagens/setaEsq.jpg" width="17" height="17" /></button>
</div>
<div class="thumbs">
<ul>
<li><img src="../imagens/img1_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img2_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img3_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img4_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img5_peq.jpg" alt="" width="115" height="85" ></li>
<li><img src="../imagens/img6_peq.jpg" alt="" width="115" height="85" ></li>
</ul>
</div>
<div id="proximo">
<button class="next"><img src="../imagens/setadir.jpg" width="17" height="17"/></button>
</div>
</div>
</div>
[/codebox]
Tenho já as imagens no thumb, mas não sei que tipo de parâmetro posso passar, e como fazer para a div "imgMaior" trazer a imagem selecionada. Sou muito leigo no javascript, mal sei fazer history.back nessa joça kkkkkkkk não precisa obrigatóriamente ter uma imagem só, posso recortar as 2, já que o sistema não é dinâmico por enquanto, não há necessidade de um thumb dinâmico!
Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!
#9
Posted 05/06/2009, 09:55
o bom desse script é que ele gera os thumbs a partir das imagem maiores, eliminando assim ter que criar thumbs....
se for seguir o exemplo do alex, você pode por exemplo colocar outro atributo tag img com a url da imagem real.
Talvez o jquery.cylcle seja disnecessario para o neu caso.
$(".anyClass img").click(function(){ $("#tamReal").attr("src", $(this).attr("realsrc")); });
mas o cycle é bem util, tem bastante efeito, fica como dica para um proximo projeto.
Edição feita por: Édipo Costa Rebouças, 05/06/2009, 10:04.
- TaTo likes this
#10
Posted 05/06/2009, 10:04
Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!
#11
Posted 05/06/2009, 10:30
$(".anyClass img")
ai você esta selecionando todas as imagens que estajam por exemplo, nessa estrutura html:
<div>
<div class="anyClass"> < img src... /> < img src... /> < img src... /> </div>
Aqui estamos atribuindo uma acão para o click nas imagem
$(".anyClass img").click(function(){ //código });
assumindo que os images tenham o atriibuto src, e realsrc
<div id="imgMaior"> <img src="primeiraImagem.jpg" /> <div> <div class="anyClass"> <img src="thumb.jpg" realsrc="imagemreal.jpg" /> <img src="thumb.jpg" realsrc="imagemreal.jpg" /> <img src="thumb.jpg" realsrc="imagemreal.jpg" /> <img src="thumb.jpg" realsrc="imagemreal.jpg" /> <img src="thumb.jpg" realsrc="imagemreal.jpg" /> </div>
$(".anyClass img").click(function(){ //this é a imagem que foi clicada em qualquer momento $("#imgMaior img").attr("src", $(this).attr("realsrc")); });
só lembrando, tem que colocar o js dentro do $(document).ready()
$(document).ready(function(){ $(".anyClass img").click(function(){ //this é a imagem que foi clicada em qualquer momento $("#imgMaior img").attr("src", $(this).attr("realsrc")); }); })
seria bom você colocar de fundo no #imgMaior um gif de loading , pois a imagem pode demorar a carregar um poquinho.
no caso , para integrar com o carousel, você teria que selecionar a div onde as imagens estão no carousel.
$(".divCarousel img")
Edição feita por: Édipo Costa Rebouças, 05/06/2009, 10:35.
#13
Posted 05/06/2009, 17:25
[codebox]<script>
$(function() {
$(".thumbs").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
$(document).ready(function(){
$(".thumbs img").click(function(){
$("#imgMaior img").attr("src", $(this).attr("realsrc")); // faz com que, ao clicar, troque a img grande
});
})
</script>
[/codebox]
Consegui entender um pouco mais... realmente essas coisas facilitam nossa vida, hein?!
Valeu mesmo!!!!!
OBS: Alguns dos scripts desse Kahor são interessantes, hein!
Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!
#14
Posted 05/06/2009, 23:14
http://www.dhteumeul...deshow-img.html
é quase o que vc quer...
#15
Posted 08/06/2009, 15:09
esse aí é esquisito oO, enfim...
Agora quero só enfeitar o negócio. Quero colocar um fadeout e um fadein quando trocar a imagem... fiz assim, deu certo, mas ficou esquisito:
[codebox]<script>
$(function() {
$(".thumbs").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
$(document).ready(function(){
$(".thumbs img").click(function(){
$("#imgMaior img").fadeOut("slow"); // apaga o fade
$("#imgMaior img").attr("src", $(this).attr("realsrc")); // faz com que, ao clicar, troque a img grande
$("#imgMaior img").fadeIn("slow"); // aparece o fade
});
})
</script>
[/codebox]
Tem hora que dá certo, porém depende do carregamento da imagem, ele troca a imagem antes do fade terminar, mesmo se eu acelerar o processo colocando ("fast") nos negócios acho que estou fazendo na ordem errada, ahahah, alguma dica?
Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens!
0 user(s) are reading this topic
0 membro(s), 0 visitante(s) e 0 membros anônimo(s)