[Resolvido] Galeria de imagens

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ê.

se você tiver usando algum plugin jquery

altera o rtl para ltr

vlw

>
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>

<?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!

>

<?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