[Resolvido] Galeria de imagens

[maurolucio 0]

Gente, saudações a todos.

 

Geralmente os loop's que geram as miniaturas de imagens nos dão o seguite resultado:

 

sentido horário - da esquerda para direita

(deste modo são geradas primeiramente as colunas e depois as linhas)

 

|------------------------------>

.__ .__ . __ .__ . __

|__| |__| |__| |__| |__|

.__ .__ . __ .__ . __

|__| |__| |__| |__| |__|

.__ .__ . __

|__| |__| |__|

 

 

Preciso gerar as miniaturas no sentido anti-horário e de cima para baixo

(deste modo são gerados primeiramente as linhas e depois as colunas)

por exemplo gera-se uma coluna com 5 imagens e começa outra e depois outra.

 

 

|-- .__ .__ . __

|-- |__| |__| |__|

|-- .__ .__ . __

|-- |__| |__| |__|

|-- .__ .__ . __

|-- |__| |__| |__|

|-- .__ .__

|-- |__| |__|

|-- .__ .__

|-- |__| |__|

|--

v

 

Confesso que minha cabeça está fundindo para encontrar essa solução.

Se esta solução já existe no fórum me mostrem o caminho e me perdoem pois não a encontrei, caso contrário, conto com a ajuda de vocês.

 

Abraço a todos.

 

Mauro Lúcio

[William Bruno 1501]

faz o HTML disso ai.

 

Eu usaria listas.

 

UL.. LI.

 

flutuando cada UL.

para fazer a quebra, bastaria saber qntos registros tem, e qntas colunas você deve mostrar.

 

Enfim.. faz primeiro o HTML puro, olhe pra ele, e faça o php gerar pra você.

[welitonjose 1]

se você tiver usando algum plugin jquery

 

altera o rtl para ltr

 

vlw

[maurolucio 0]

faz o HTML disso ai.

 

Eu usaria listas.

 

UL.. LI.

 

flutuando cada UL.

para fazer a quebra, bastaria saber qntos registros tem, e qntas colunas você deve mostrar.

 

Enfim.. faz primeiro o HTML puro, olhe pra ele, e faça o php gerar pra você.

 

Olha o que acontece:

 

tenho uma lista

 

<ul>

<li>

[imagem]

</li>

</ul>

 

eu consigo uma galeria normalmente fazendo um simples loop

 

o lance é o tipo de resultado que eu preciso que é: colocar uma imagem uma embaixo da outra na primeira coluna, se o limite de linhas fo 5, a sexta imagem inicia-se na segunda coluna e assim por diante.

 

eu na verdade precisaria, mais do sugestões, uma amostra de código de como fazer esse loop.

 

obrigado

 

 

Esse é o código que estou utilizando, ele me dá uma galeria de imagens convencional sendo montada da esquera para a direita, montando colunas e depois linhas, eu preciso fazer um loop que monta a galeria colocando imagens de cima para baixo montando linhas e depois colunas (exemplo monta a primeira coluna com 5 linhas (imagens) depois a segunda coluna com 5 e por ai vai

 

 

ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
div.caption {
padding: 12px;
}
div.image-title {
font-weight: bold;
font-size: 12px;
color:#CCCCCC;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}

 

 

 

<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<?php do { ?>
<?php

if ( file_exists($row_rs_produtos['imagem_menor']) && $row_rs_produtos['imagem_menor'] != "img_adm/"){

$ImagemMenor = $row_rs_produtos['imagem_menor'];
$ImagemMaior = $row_rs_produtos['imagem_maior'];

}else { 
$ImagemMenor = 'images/sem-imagem-p.png';
$ImagemMaior = 'images/sem-imagem-g.png';
}


?>



<li>
<a class="thumb" name="leaf" href="<?php echo $ImagemMaior; ?>" title="<?php echo $row_rs_produtos['legenda']; ?>">
<img src="<?php echo $ImagemMenor; ?>" alt="<?php echo $row_rs_produtos['legenda']; ?>" /></a>
<div class="caption">
<div class="image-title"><?php echo $row_rs_produtos['legenda']; ?></div>
</div>
</li>
<?php } while ($row_rs_produtos = mysql_fetch_assoc($rs_produtos)); ?>
</ul>
</div>

[hufersil 145]

<?php
$maxlinhas = 5;
$linha = 0;

echo '<ul>';
while ($row = mysql_fetch_assoc($rs_produtos)){
 // aqui vai o conteudo
 echo '<li>', $row['imagem_menor'], '</li>';

 // se for maior/igual que a quinta linha
 if( ++$linha >= $maxlinhas ){
   // fecha a ul e começa outra
   echo '</ul> <ul>';
   $linha = 0;
 }
}
echo '</ul>';
?>

 

O posicionamento das tags <ul> você pode fazer por CSS.

 

@braços e fique com Deus!

[maurolucio 0]

<?php
$maxlinhas = 5;
$linha = 0;

echo '<ul>';
while ($row = mysql_fetch_assoc($rs_produtos)){
 // aqui vai o conteudo
 echo '<li>', $row['imagem_menor'], '</li>';

 // se for maior/igual que a quinta linha
 if( ++$linha >= $maxlinhas ){
   // fecha a ul e começa outra
   echo '</ul> <ul>';
   $linha = 0;
 }
}
echo '</ul>';
?>

 

O posicionamento das tags <ul> você pode fazer por CSS.

 

@braços e fique com Deus!

 

Funcionou Perfeitamente, adicionei <ul style="float:left"> na tag <ul> e obtive o resultado que eu necessitava

 

Muito obrigado ao hufersil, welitonjose e William Bruno que postaram neste tópico.

 

Abraço a todos e fiquem com Deus.

 

Mauro Lúcio