Dúvida em Auto-playing Slideshow

AndreLC · June 4, 2012 at 02:47 PM

Boa tarde a todos,

Estou a tentar implementar um slideshow com auto-play automatico em que as imagens vão rodando, mas só me está a funcionar o primeiro. Podem visualizar aqui: http://andre-lc.webuda.com/index2.php

Porque é que só está a aplicar no primeiro bloco de imagens do primeiro imóvel? Pois a ideia seria ser em todos. Como resolvo isto?

Retirei daqu o script: http://css-tricks.co...impleSlideshow/

o código:

<?php
require("config/connect.php");
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Imoveis</title>
<meta name="description" content="Loren Ipsum" />
<meta name="keywords" content="Loren Ipsum." />
<meta name="author" content="AndreLC" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="css/template.css" rel="stylesheet" type="text/css" />
<link href="css/pages.css" rel="stylesheet" type="text/css" />
<style>
#slideshow {
  position: relative;
  height: 150px;
  padding: 11px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){	

  $("#slideshow > div:gt(0)").hide();

  setInterval(function() {
$('#slideshow > div:first')
   .fadeOut(1000)
   .next()
   .fadeIn(1000)
   .end()
   .appendTo('#slideshow');
  },  3000);

 });
</script>
</head>
<body>
<?php
  //A quantidade de valor a ser exibida
  $quantidade = 5;
  //a pagina actual
  $pagina	 = (isset($_GET['pagina'])) ? (int)$_GET['pagina'] : 1;
  //Calcula a pagina de qual valor será exibido
  $inicio	 = ($quantidade * $pagina) - $quantidade;

  //Query em SQL com o LIMIT para exibição dos dados
  $sql = "SELECT * FROM imoveis WHERE estado=1 ORDER BY id DESC LIMIT $inicio, $quantidade";
  //Executa o SQL
  $qr  = mysql_query($sql) or die(mysql_error());
  //Percorre os campos da tabela
  while($ln = mysql_fetch_assoc($qr)){
$Imagem1		 = $ln['Imagem1'];
$Imagem2		 = $ln['Imagem2'];
$Imagem3		 = $ln['Imagem3'];
$Imagem4		 = $ln['Imagem4'];
$Imagem5		 = $ln['Imagem5'];
$Imagem6		 = $ln['Imagem6'];
$Imagem7		 = $ln['Imagem7'];
$Imagem8		 = $ln['Imagem8'];
$Imagem9		 = $ln['Imagem9'];
$Imagem10		 = $ln['Imagem10'];
echo "<div class=\"content_pesquisa_txt4\">";

if ($Imagem1 != ""){
echo "<div id='slideshow'>
	<div>
	 <img width='150' height='150' src='area/img/Imoveis/$Imagem1' alt='' />
	   </div>
	<div>
	 <img width='150' height='150' src='area/img/Imoveis/$Imagem2' alt='' />
	</div>
   </div>";

}else{

echo "<img width='150' height='150' src='area/img/Imoveis/default.png' alt='' />";


}

echo "</div>";  

?>
</body>
</html>

Obrigado pela ajuda.

Edited June 4, 2012 at 02:48 PM by AndreLC

pikax · June 4, 2012 at 03:28 PM

em vez de utilizares id=slideshow, faz o codigo para class, id e' suposto para ser para um elemento.

Nao sei se isto funcionara, mas acho que vale a pena experimentares.

AndreLC · June 4, 2012 at 04:00 PM

Por id ainda continua aqui: http://andre-lc.webuda.com/index2.php

Por class ainda está mais estranho, está a repetir as imagens todas: http://andre-lc.webuda.com/index2_.php

pikax · June 4, 2012 at 04:17 PM

tens que adaptar a funcao para aceitar a class, porque que nao percorres todos os elementos da class e executas a o codigo para cada um deles?

AndreLC · June 4, 2012 at 04:30 PM

Não ficou adaptada?

Como assim?

MASNathan · June 4, 2012 at 04:38 PM

tens ai o código original do slide?

AndreLC · June 4, 2012 at 04:58 PM

É este: http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

pikax · June 4, 2012 at 07:27 PM

Não ficou adaptada?

Como assim?

Nao esta adaptada, o que deves ter feito foi substituir o '#' por '.', se perceberes o codigo, veras que ele vai aceder ao primeiro elemento que tem a class slideshow, e vai por a imagem seguinte a todos os elementos que tem a class slideshow. O que deves fazer e' um ciclo que percorra os elementos que sao da class slideshow e mudar a imagem de cada um.

AndreLC · June 4, 2012 at 08:45 PM

Podes exemplificar, por favor?

Obrigado pela ajuda.

pikax · June 4, 2012 at 08:55 PM

modifiquei um exemplo do w3schools http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getElements()
{
 var x=document.getElementsByName("x");


 for(var i=0;i<x.length;i++)
 {
   alert(x[i].value);
 }

}
</script>
</head>
<body>

Cats:
<input name="x" type="radio" value="Cats" />
Dogs:
<input name="x" type="radio" value="Dogs" />

<input type="button" onclick="getElements()" value="How many elements named 'x'?" />

</body>
</html>

AndreLC · June 4, 2012 at 09:10 PM

Percebi o que quiseste transmitir, mas mesmo assim não percebo como adapto ao que já tenho...

pikax · June 4, 2012 at 09:15 PM

tens que perceber o codigo que estas a utilizar, e' o que da' copiar codigo 😕

sabes o que faz isto?

 $("#slideshow");

AndreLC · June 4, 2012 at 09:28 PM

Tens razão, mas está disponível e aberto a discussão. Pelo que vi é open source.

Não sei muito de jQuery, mas sim, selecciona o elemento cujo id é slideshow.

Edited June 4, 2012 at 09:29 PM by AndreLC

pikax · June 4, 2012 at 09:34 PM

Sim, mas tens que ter nocao que nao e' copiar, deves sempre perceber como funciona, assim aprendes como funciona.

Não sei muito de jQuery, mas sim, selecciona o elemento cujo id é slideshow.

Sim, seleciona SO' 1, porque o 'id' e' suposto ter so' haver 1, se meteres

$(".slideshow");

ele vai fazer o codigo para todos, mas so que igual!

entao, o que queres fazer e' percorrer os objectos com a class "slidshow" e fazer a animacao a cada um deles, isso ja tens o codigo, agora basta pensares um bocado que chegas la 😉

PS: jQuery tambem nao e' o meu forte, prefiro fazer em javascript, cheguei a fazer um slideshow em JS so' que nao ficou tao bom 😛

Edited June 4, 2012 at 09:36 PM by pikax

AndreLC · June 4, 2012 at 09:39 PM

Se chegasse lá não solicitaria ajuda aqui no fórum!

Não estou a perceber, porque tenho isso dentro do while, não deveria de aplicar em todos?

Tenho que usar um for na parte de jquery? Desculpa a confusão.

PS: Deve ser algo simples, mas a estas horas está complicado...

Edited June 4, 2012 at 09:51 PM by AndreLC

pikax · June 4, 2012 at 11:21 PM

Se chegasse lá não solicitaria ajuda aqui no fórum!

Nao te vou te dar a "papinha" toda feita, porque e' contra as regras do forum.

Nao digo que seja facil de se fazer mas e' possivel.

//teres
$(".slideshow");
//e' quase como teres
var x=document.getElementsByClassName("slideshow");
for(var i=0;i<x.length;i++)
{
 $(x[i]);//acedes ao objecto, podes utilizares funcoes do jQuery, digamos que "cria um objecto jQuery"
}

O codigo de baixo, como tem nos comentarios e' muito parecido com o de cima, so' que com o codigo debaixo tens muito mais controlo, e podes fazer o slideshow para todos os elementos.

O que deves fazer e' um ciclo que percorra os elementos que sao da class slideshow e mudar a imagem de cada um.

tu ja tens a parte de mudar as imagens, agora e' so' adaptar

Edited June 4, 2012 at 11:21 PM by pikax

AndreLC · June 5, 2012 at 08:57 AM

Bom dia,

Obrigado pela explicação.

Como disse não sei muito de jQuery é natural que tenha dificuldade em passar para js.

Já percebi que tenho que fazer um for para percorrer todos os elementos, mas não é só esta parte:

$(".slideshow");

mas sim:

  $("#slideshow > div:gt(0)").hide();

  setInterval(function() {
 $('#slideshow > div:first')
   .fadeOut(1000)
   .next()
   .fadeIn(1000)
   .end()
   .appendTo('#slideshow');
  },  3000);

Por isso, está difícil de adaptar.

Obrigado pela ajuda.

Edited June 5, 2012 at 08:59 AM by AndreLC

brunoais · June 5, 2012 at 09:10 AM

Como disse não sei muito de jQuery é natural que tenha dificuldade em passar para js.

Não cometas o erro grave de considerares que jQuery não é js. jQuery é js, jQuery é só uma biblioteca bem completa escrita em js, para ser usada por programas js.

Para a parte de fadein() e fadeout()...

O código não é propriamente fácil e, pessoalmente, uso o jQuery para esse tipo de coisas.

Há funcionalidades do CSS3 para executar isso do fading mas o IE8 não o conhece. Para essas coisas mais complicadas aconselho-te mesmo usar o jQuery.

//teres
$(".slideshow");
//e' quase como teres
var x=document.getElementsByClassName("slideshow");
for(var i=0;i<x.length;i++)
{
 $(x[i]);//acedes ao objecto, podes utilizares funcoes do jQuery, digamos que "cria um objecto jQuery"
}

Pessoalmente, uso a 2ª opção (com o getElementsByClassName). Uso as bibliotecas para o complicado, não para o simples 🙂

Eu usaria o forEach(), de qq modo (https://developer.mo...s/Array/forEach), mais uma vez, o IE8 n o suporta .

Edited June 5, 2012 at 09:13 AM by brunoais
melhorar o pt.

AndreLC · June 5, 2012 at 09:38 AM

Para a parte de fadein() e fadeout()...

O código não é propriamente fácil e, pessoalmente, uso o jQuery para esse tipo de coisas.

Mas em jQuery já ele está...

Eu usaria o forEach(), de qq modo (https://developer.mo...s/Array/forEach), mais uma vez, o IE8 n o suporta .

E não há nada a fazer em alternativa, por exemplo, em ajax para que dê também em IE8?

brunoais · June 5, 2012 at 09:56 AM

E não há nada a fazer em alternativa, por exemplo, em ajax para que dê também em IE8?

AJAX nada tem a ver com o assunto. AJAX é comunicar com o servidor a partir de javascript.

Se o IE8 não o tem implementado, nada podes fazer para resolver.

A tua única hipotese é usar o que é usado há anos. Um ciclo for como o pikax escreveu.

Edited June 5, 2012 at 09:56 AM by brunoais

Dúvida em Auto-playing Slideshow

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information