While em Slide

[Andre Cristhian 3]

Gente boa tarde tenho a seguinte dúvida:

 

tenho um banco com 18 imagens, e tenho um slider que quero que exiba as imagens de 6 em 6, tipo aparece 6 ai clica em next e aparece mais 6 e depois mais 6 e assim vai...

 

mais como eu poderia fazer para puxar do banco sendo que tenho que repetir a div junto...

exemplo:

 

<div id="slide">
  <img src="slide-1.jpg" width="70" height="70">
  <img src="slide-2.jpg" width="70" height="70">
  <img src="slide-3.jpg" width="70" height="70">
  <img src="slide-4.jpg" width="70" height="70">
  <img src="slide-5.jpg" width="70" height="70">
  <img src="slide-6.jpg" width="70" height="70">
</div>

 

a div id="slide" tem 6 imagens dentro dela, mais como vou fazer para repetir ela e aparecer mais 6 imagens dentro dela e depois mais 6 e assim sucessivamente.

 

uma div

6 imagens

 

uma div

6 imagens

 

.....

 

mais não posso repeti-las, teria como ou alguem conhece algum slide que da pra colocar as imagens diretas sem precisar estar dentro de nenhuma tag, e que contenha um botao next?

 

Obrigado pela atenção!

[wolfphw 60]

você vai utilizar o seu SQL o comando LIMIT ele fala o ponto inicial e quando mais registro dakele ponto você quer trazer...

 

exemplo

 

SELECT * FROM slide WHERE status='ativo' LIMIT 0, 6

 

Dai digamos que você queira trazer os próximos 6

SELECT * FROM slide WHERE status='ativo' LIMIT 6, 6

 

e por ai vai

SELECT * FROM slide WHERE status='ativo' LIMIT 12, 6

[Andre Cristhian 3]

Mais como vou fazer pra esse

0, 6

 

ser incrementado igual você fez ai?

0,6

6,6

12,6

 

....

 

 

???

[wolfphw 60]

você tem que passar parâmetro.. esse eh o mesmo principio de paginação de sites...

 

exemplo

<?php
if (!isset($_GET["inicio"])) {
	$inicio = 0;
	$anterior = 0;
} else {
	$inicio = $_GET["inicio"];
	if ($inicio == 0) {
		$anterior = 0;
	} else {
		$anterior = $inicio - 6;
	}
}

$proximo = $inicio + 6;

$sql = mysql_query("SELECT * FROM slide LIMIT $inicio, 6");

echo "<a href='?inicio=$anterior'>Anterior</a>";

while ($row = mysql_fetch_array($sql)) {
	echo $row["imagem"]." - ";
}

echo "<a href='?inicio=$proximo'>Proximo</a>";
?>

[Andre Cristhian 3]

Nesse:

 

while ($row = mysql_fetch_array($sql)) {
  echo $row["imagem"]." - ";
}

 

Aqui no caso eu colocaria a div dentro? para que ela repita e contenha as 6 imagens?

pq entendi tudo ai o que você postou mais não entendi onde eu coloco aquela div acima que lhe passei de exemplo...

para que dentro dela sempre contenha 6 imagens...

 

No caso a:

 

<div id="slide">

[wolfphw 60]

Esse eh um exemplo.. dentro desse while pelo que dah para notar no que você postou.. você estaria colocando os IMG

[Bruno Augusto 417]

Você não entendeu ou entendeu só uma parte do que o wolf disse.

 

Pelo que deu pra entender o cenário em que você se encontra é algo similar à uma pinacoteca, onde cada "página" desse slider seria uma parede do museu e em cada parede haveriam 6 quadros.

 

Sendo assim você tem algumas opções para trabalhar:

 

Trabalhando com AJAX cada vez que você clicar numa das setas você carregaria os quadros sob demanda, o que é ideal para trabalhar com a forma que o wolf disse.

 

Nessa abordagem você precisará ter acesso, via JavaScript, claro, à tag da seta. Pode ser uma âncora, um <span>, um <img>, enfim. E precisará também de armazenar o número da parede atual para servir o programa PHP:

 

<div id="slider">

   <a href="#" rel="page-1">Previous</a>

   <div id="frames">

       <img src="slide-7.jpg" width="70" height="70" />
       <img src="slide-8.jpg" width="70" height="70" />
       <img src="slide-9.jpg" width="70" height="70" />
       <img src="slide-10.jpg" width="70" height="70" />
       <img src="slide-11.jpg" width="70" height="70" />
       <img src="slide-12.jpg" width="70" height="70" />

   </div>

   <a href="#" rel="page-3">Next</a>
</div>

Estou assumindo, aqui, estar na página 2 para demonstrar melhor.

 

Aqui eu usei o atributo rel para armazenar os dados que você precisará na paginação. Mude se necessário.

 

Agora, cada vez que a seta for clicada você dispara uma requisição AJAX. Não vou entrar e detalhes sobre a implementação pois aqui é a sala de PHP. O único senão é a URL que você usará nessa requisição:

 

http://www.domain.com/slider/page/X

Onde X é o valor, no exemplo, daquele atributo rel.

 

No programa PHP você recebe esse valor, verifica a integridade dos dados e consulta o banco.

 

Destaquei esse termo pois você não vai APENAS verificar se o parâmetro $_GET['page'] existe e não está vazio como de costume, mas vai também verificar se ele realmente é válido por não ser negativo.

 

Isso é importante pois é validação do lado servidor. Você também vai fazer essa validação no lado cliente depois da requisição AJAX tiver sido concluída, afinal, precisará atualizar os valores das setas.

 

O problema é que, sem essa validação do lado servidor, um engraçadinho pode violar sua lógica no cliente e requisitar a página normalmente, mas como o valor será negativo, ou sua QUERY ficará inválida, ou trará registros não esperados.

 

Continuando...

 

Você pode aplicar essa idéia sobre o que o wolf disse através cláusula LIMIT mas, por se tratar de poucas informações sendo resgatadas há outra bem simples.

 

Você pode listar todas as informações e apenas controlar a visibilidade dos quadros com JavaScript.

 

Basta obter o valor da página a partir das setas, validá-lo para não ser negativo e aplicar a matemática das Paginações:

 

Uma paginação nada mais é do que a definição de um intervalo. Esse intervalo é construído a partir de um valor mínimo chamado de lower bound e um valor máximo chamado de upper bound.

 

Para o lower bound você tem:

 

( currentPage - 1 ) * itemsPerPage

Isso te dará um 0 página 1, 6 na página 2, 12 na página 3 e por aí vai.

 

Para o upper bound você tem:

 

( currentPage * itemsPerPage ) - 1

Isso te dará um 5 página 1, 11 na página 2, 17 na página 3 e por aí vai.

 

Agorra basta você iterar sobre todos os elementos IMG dentro de #frames e verificar o atributo src. Se estiver fora do intervalo, esconde.

 

Existem outras formas de fazer essa ocultação, você escolhe a melhor para seu caso.

 

acho que não esqueci de nada. Câmbio e desligo :P

[wolfphw 60]

Isso ae.. oke eu fiz ai no meu exemplo você não vai utilizar ao pé da letra.. eh uma forma de como poder fazer, ai fica na sua cabeça implementar...

 

Se pesquisar pela net você vai achar vários slides que fazem isso pela net...

Que nem esse aqui: http://jquerytools.org/demos/scrollable/easing.html

 

Dai no caso desse do link.. ele lê todos os registro e no HTML, CSS e JS você faz a separação de quantos você quer mostrar