Jump to content


Photo

[Resolvido] Slideshow Em Tabela


  • Faça o login para participar
11 replies to this topic

#1 Greyce

Greyce

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Feminino

Posted 28/04/2010, 17:32

Boa tarde a todos!
Eu sou nova aqui.
Preciso de ajuda em relação a um site que estou criando de uma loja.
Eu fiz o site pelo dreamweaver em tabelas, tem uma página do site onde aparece imagens do produto, sendo que eu criei uma tabela onde terão 3 imagens diferentes em baixo cujo serão links para que a imagem apareça maior dentro da mesma tabela em uma célula a cima das 3 imagens.
Eu acredito que eu tenha que usar uma div, porém eu não lembro como se faz div, pois é o meu primeiro site.

Estou postando o cód como está pra vcs terem uma idéia.

Esse é o cód de onde ficam as miniaturas:

<td width="33%" height="70" align="center"><a href="#"><img src="../imagens/balde.png" width="34" height="50" border="0"</a></td>

E esse é o cód. da célula onde entrará a div:
<td width="35%" rowspan="6" align="center"><div></div></td>

Onde tá a div não tem nada, pois eu não sei classificar

Só pra finalizar e resumir eu gostaria de clicar na imagem em miniatura e queria que ela aparecesse maior na div e quando clicasse em outra imagem em miniatura eu gostaria que a imagem dessa outra miniatura aparecesse na mesma div tb maior como a anterior.

Edição feita por: Édipo Costa Rebouças, 29/04/2010, 00:20.


#2 André Manoel

André Manoel

    Doutor

  • Usuários
  • 996 posts
  • Sexo:Masculino
  • Localidade:Brasilia

Posted 28/04/2010, 17:50

Olá Greyce!

Seja bem vinda!

Vamos aprender muito aqui juntos!

Bem... como é o seu primeiro site, posso imaginar o seu desespero para fazer algo que realmente atenda as necessidades do seu cliente.

Você está fazendo o site todo em HTML?
Tem alguma linguagem que vc está usando?
PHP ? Ou Javascript?
Iniciando na Ajuda On line...

Posted Image Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.

#3 Greyce

Greyce

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Feminino

Posted 28/04/2010, 23:02

Oi André!

Estou fazendo o site em HTML mesmo e chegei a usar algumas class para texto em javascrip, nada muito além disso.
Na verdade estou usando todos os recursos do dreamweaver e quando eu não entendo algo eu busco na net pra melhorar o site.
Até que ta ficando bem legal, estou fazendo todo ele em tabelas, já que foi a forma mais fácil que eu lembrei pra fazer.
O site na verdade é pra minha mesmo, mas depois que eu fizer esse vou começar a oferecer o serviço para alguns amigos e ir me aperfeiçoando até chegar a algo bem profissional.

PS: vc ter respondido ao meu tópico já me deixou muito feliz, achei que ninguém iria responder.
caso vc não tenha entendido o que eu quero fazer, da uma olhadinha no site do mercado livre, quando a gente clica em um produto já no topo aparece as imagens do lado esquerdo com as miniaturas em baixo e a maior em cima, é aquilo que gostaria de fazer.
se puder me ajudar agradeço muito se não puder eu agradeço tb a atenção.

Edição feita por: Greyce, 28/04/2010, 23:04.


#4 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 29/04/2010, 00:18

Bom dia Grayce, tem um script chamado JQuery Cycle, que acredito que atenda a sua necessidade:

um demo: http://jquery.malsup...cle/pager2.html

Abraço, e por favor, não post a mensagem toda com letra maiúscula.

Qualquer dúvida só perguntar.

Edição feita por: Édipo Costa Rebouças, 29/04/2010, 00:18.


#5 André Manoel

André Manoel

    Doutor

  • Usuários
  • 996 posts
  • Sexo:Masculino
  • Localidade:Brasilia

Posted 29/04/2010, 09:22

Se o site é para você mesmo... então as coisas mudam!!!!
É através dele que vc irá conseguir outros clientes...! Então ele tem que ser bem atraente...!
Bem esse script que o Édipo deixou linkado aí é muito bom!

Você consegue utilizar esses scripts... ?
Já usou alguma vez javascript no seu site?
Tem conhecimentos de javascript?
Iniciando na Ajuda On line...

Posted Image Meu post lhe ajudou? Reputar/votar é uma das formas de agradecer.

#6 Greyce

Greyce

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Feminino

Posted 29/04/2010, 18:29

Oi André!

O link que o Édipo enviou realmente é ótimo, mas vou ser sincera... sou péssima em javascript, mas sei que preciso dele para fazer o que desejo fazer e o que quero fazer é exatamente como no link que o Édipo postou, só que eu não consegui, pois o que eu teria que colocar pra abrir dentro de uma célula da tabela, e é exatamente isso que não consigo fazer.
Vc sabe me dizer se tem como eu fazer isso?

Muito obrigada a todos pela ajuda.

#7 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 30/04/2010, 01:00

Greyce, exemplo:


Código HTML
[codebox]
//resto da tabela
<td>
<div id="slideshow">
<img src="produtos/01/imagem1.jpg" alt="Carrinho de Controle Remoto">
<img src="produtos/01/imagem2.jpg" alt="Carrinho de Controle Remoto">
<img src="produtos/01/imagem3.jpg" alt="Carrinho de Controle Remoto">
</div>
</td>
<td>
<div id="nav">

</div>
</td>
[/codebox]


Antes de fechar a tag body, você chama os scripts

[codebox]
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',

// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<a href="#"><img src="' + slide.src + '" width="50" height="50" /></a>';
}
});
});
</script>
</body>
</html>
[/codebox]

Com isso você jpa consegue fazer a animação, ai vc vai precisar ler um pouco aprender um pouco de css talvez para formatar melhor os thumbs.

Abraço.

#8 Greyce

Greyce

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Feminino

Posted 30/04/2010, 18:20

Oi Édipo!

Muito obrigada pela ajuda.
Consegui fazer, só ficou com as miniaturas em cima e o slide em baixo, mas não tem problema, ficou ótimo.
Muito obrigada mesmo pela ajuda.

Abçs.

#9 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 15385 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 22/09/2017, 06:04

Cialis Versand Kosten cialis Qualityrxpharmacy
Pharmacie En Ligne Du Canada Cialis Cephalexin Canine Dog
Cialis Generika Bankuberweisung <a href=http://cialtobuy.com>viagra cialis</a> Buy Claravis Doxycycline
Cialis Without Prescription Canada cialis price Productos Kamagra
Forum Cialis Effetti Collaterali Rx One Pharmacy Canada Non Generic Generic Isotretinoin Pills Best Website Cheapeast Saturday Delivery
Estrogen Pills From Indian Pharmacy <a href=http://cialtobuy.com>buy cialis</a> Viagra Gold 800mg
Valtrex Buy Online Canada cialis buy online Fstest Delivery Of Online Viagr
Acheter Propecia Generique Canadian Healthcare Uso De Kamagra
Generic Tadalafil Best Prices <a href=http://cialtobuy.com>viagra cialis</a> Cialis Vente Libre Canada

#10 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 15385 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 13/10/2017, 23:36

Price Of 500mg Of Keflex Comprar De Propecia Levitra In Canada Discount Code viagra prescription Comprar Cialis En Sevilla

#11 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 15385 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 31/10/2017, 11:12

Generic Real Isotretinoin Best Website C.o.d. Cheapeast Shop Viagra Soft Tabs viagra Genaric Viagra Gold
Priligy Valor Prix Viagra Pas Cher En Saint Propecia Treatment Hair Loss generic levitra 20mg Propecia Veneno

#12 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 15385 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 27/11/2017, 08:42

Cialis Non Funziona Che Fare Kamagra Is It Legal In Uk online pharmacy Macrobid Mail Order




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq