SLIDE SHOW NO AJAX

JANDER 07/07/2011 16:30:16
#378694
Boa tarde,

estou precisando colocar no meu site um slide show com fotos.

iqual do link abaixo:
http://www.electricprism.com/aeron/slideshow/example5.html

alguem sabe como faço isso?

Obrigado desde já.
KERPLUNK 07/07/2011 23:27:19
#378725 Resposta escolhida
Tem exemplos e tudo mais no próprio site....
JANDER 08/07/2011 13:10:55
#378776
Mais precisa da explicação de como fazer.
KERPLUNK 08/07/2011 14:02:27
#378785
Inclua os javascripts e CSS necessários:
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/slideshow.css[Ô] media=[Ô]screen[Ô] />
<style type=[Ô]text/css[Ô]>
a { color: #404040; }
a:hover { text-decoration: none; }
code { color: #404040; font: normal 10px Monaco, monospace; }
em { color: #808080; font-style: normal; }
h1 { color: #000; font: normal 12px/16px Arial, sans-serif; padding: 0 20px 16px; text-transform: lowercase; }
h1:before { content: [ô].[ô]; }
p { color: #404040; font: normal 12px/16px Arial, sans-serif; padding: 0 20px 16px; }

/* Overriding the default Slideshow thumbnails for the vertical presentation */

.slideshow-thumbnails {
height: 300px;
left: auto;
right: -80px;
top: 0;
width: 70px;
}
.slideshow-thumbnails ul {
height: 500px;
width: 70px;
}
</style>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/mootools.js[Ô]></script>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/slideshow.js[Ô]></script>
<script type=[Ô]text/javascript[Ô]>
//<![CDATA[
window.addEvent([ô]domready[ô], function(){
var data = [[txt-color=#0000f0][ô]1.jpg[ô], [ô]2.jpg[ô], [ô]3.jpg[ô], [ô]4.jpg[ô], [ô]5.jpg[ô], [ô]6.jpg[ô], [ô]7.jpg[ô], [ô]8.jpg[ô], [ô]9.jpg[ô], [ô]10.jpg[ô][/txt-color]];
var myShow = new Slideshow([ô][txt-color=#e80000]show[/txt-color][ô], data, { controller: true, height: 300, hu: [ô]examples/[ô], thumbnails: true, width: 400 });
});
//]]>
</script>

O que está em azul aí em cima são as fotos propriamente ditas, vc pode indicar tb um caminho:
var data = [[txt-color=#0000f0][ô]produtos/sapato.jpg[ô], [ô]produtos/casaco.jpg[ô], [ô]clientes/cliente1.jpg[ô], [ô]4.jpg[ô], [ô]5.jpg[ô], [ô]6.jpg[ô], [ô]7.jpg[ô], [ô]8.jpg[ô], [ô]9.jpg[ô], [ô]10.jpg[ô][/txt-color]];

O que está em vermelho aí em cima é o id da div que vai conter as fotos:
<div id=[Ô][txt-color=#e80000]show[/txt-color][Ô] class=[Ô]slideshow[Ô]>
<img src=[Ô]examples/1.jpg[Ô] width=[Ô]396[Ô] height=[Ô]300[Ô] alt=[Ô]Slideshow 2! Example 5: Vertical thumbnails[Ô] />
</div>
JANDER 08/07/2011 16:01:39
#378792
Consegui, porém a imagem que aparece ao lado está quebrada, sabe me dizer onde conserto isso?
KERPLUNK 08/07/2011 16:18:53
#378799
var myShow = new Slideshow([ô]show[ô], data, { controller: true, height: 300, hu: [ô][txt-color=#e80000]examples[/txt-color]/[ô], thumbnails: true, width: 400 });

O que está em vermelho aí em cima, é uma pasta onde a procura dos arquivos vai começar, ou seja, os caminhos das imagens, vão concatenar o valor que estiver ali.
Digamos que o caminho das suas imagens seja [Ô]/imagens/cliente[ô], especificando o caminho [Ô]examples[Ô], como no comando acima, os caminhos das imagens ficariam: [Ô]/examples/imagens/cliente[Ô]. Se todas as fotos estiverem numa mesma pasta, basta colocar o nome dessa pasta na parte em azul do comando acima e na variável [Ô]data[Ô] apenas os nomes delas. Deve funcionar
JANDER 08/07/2011 16:26:09
#378803
Então as imagens estão sendo trocadas automaticamente já, e quando clico em casa imagen exibe normamente.

porém as imagens que fica no guadro menor que estão quebradas.
KERPLUNK 08/07/2011 16:29:45
#378805
Clica com o botão direito nas imagens [Ô]quebradas[Ô] e veja o caminho que está apontando pra elas...
JANDER 08/07/2011 16:43:48
#378808
Meu amigo muito obirgado pela sua ajuda.

funcionou perfeitamente agora. é que precisa ter a imagem grande e a pequena eu estava colocando na pasta apenas a pequena.
Tópico encerrado , respostas não são mais permitidas
Voltar