Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola tudo bem?
Eu tenho uma galeria de fotos e gostaria de saber o nome da técnica ou jeito para que elas preencham todos os espaços em branco, semelhante ao flirck e o facebook ou até o One Drive.
Eu estou usando Boostrap com as "col.md.". Eu não entendi bem porque algumas fotos conseguem preencher os espaços em branco e outras não sendo que todas estão no mesmo tamanho.
Por exemplo, nessa página elas não preenchem os espaços embora eu acho que caberiam http://www.dcsdesenvolvimento.com.br/books/book-infantil-campo-mourao-r-l-viana/1
Já nessa galeria http://www.dcsdesenvolvimento.com.br/books/book-familia-rafael-juliana-campo-mourao/2 tem algumas fotos na mesma situação e algumas encaixaram nos espaços...
Valeuu :)
Olá...obrigado pelas dicas!
Na verdade eu fiz usando PHP heheh. Eu pensei nisso que você falou, mas ainda não sei como adaptar o PHP para só aparecer 3 fotos por linha e abrir e fechar a "ROW".
E sobre a organização das fotos, eu pensei nisso também, mas a princípio eu imaginei organizar em ordem cronológica. Mas eu vou continuar mechendo para tentar melhorar com suas dicas.
se quiser posta ai o código que agente tenta te ajudar, no próprio php vc pode adicionar as classes que vão receber as fotos, mais como não sei como vc esta fazendo ai fica difícil falar algo, mais se quiser posta ae!
quanto a organização da pra fazer no seu php também.
Opa!
Eu posto sim:
<?php include "config/amostras-conexao.php";
if ( isset ( $_GET['id_amostras'] ) ) {$id_amostras = $_GET['id_amostras']; }
$sql = mysql_query("SELECT * FROM book where id_amostras=$id_amostras ");
$qr_s = mysql_num_rows($sql);
$qr_l = mysql_fetch_array($sql);
$nome = $qr_l['nome'];
$descricao = $qr_l['descricao'];
$slug = $qr_l['slug'];
$palavra_chave = $qr_l['palavra-chave'];
$alt = $qr_l['alt'];
$comentarios = $qr_l['comentarios'];
$localizacao = $qr_l['localizacao'];
$galeria = $qr_l['galeria'];
$associar = $qr_l['associar'];
?><html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php echo $descricao ?>">
<meta name="keywords" content="<?php echo $palavra_chave ?>">
<?php include "elementos/header.php" ;?> <!-- CSS e TAGS em geral Geral -->
<link href="[http://www.dcsdesenvolvimento.com.br/script/caroussel-bootstrap.css](http://www.dcsdesenvolvimento.com.br/script/caroussel-bootstrap.css)" rel="stylesheet"> <!-- Slide Custom CSS -->
<link href="[http://www.dcsdesenvolvimento.com.br/script/nivo-lightbox.css](http://www.dcsdesenvolvimento.com.br/script/nivo-lightbox.css)" rel="stylesheet"type="text/css" />
<link href="[http://www.dcsdesenvolvimento.com.br/script/nivo-default.css](http://www.dcsdesenvolvimento.com.br/script/nivo-default.css)" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://www.dcsdesenvolvimento.com.br/script/nivo-lightbox.js"></script>
<script>
$(document).ready(function(){
$('a').nivoLightbox();
});
</script>
<title><?php echo $nome ?> - Dcs Desenvolvimento - Campo Mourão - PR - 44 3525 0990</title>
</head>
<body>
<?php include "elementos/menu-topo.php" ;?>
<header class="sb-page-header">
<div class="container-fluid">
<h1>Portifólio</h1>
<p><?php echo $comentarios ?></p>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<?php
$query = mysql_query("SELECT * FROM book_fotos where associar=$associar ");$fotos_book = $qr3_l['fotos_book'];
$nome = $qr3_l['nome'];
$associar = $qr3_l['associar'];
?>
<div class="col-md-4 " style="padding-left: 0; padding-right: 0;" >
<a href="[http://www.dcsdesenvolvimento.com.br/imagens/http://www.dcsdesenvolvimento.com.br/script/carousel-boostrap.js"></script>
<script src="http://www.dcsdesenvolvimento.com.br/script/scripts.js" type="text/javascript"></script>Em, mas vc´s acham que assim ficou feio com esses espaços ai?
você cometeu um grande erro! o bootstrap são no maximo 12 colunas por linha, e você ta usando 40 colunas por linha! :upset:
você teria que fazer 3 imagens por linha já que cada uma usa 4 colunas.
e assim você vai repetindo as linhas ate acabar suas imagens, sempre respeitando as 12 colunas por linha.
e pra você organizar as fotos você faz assim.
adiciona as fotos que são em modo retrato em uma linha, e na linha de baixo vc adiciona as em modo paisagem, se você colocar foto em modo retrato na mesma linha que a em modo paisagem, você vai ai bagunçar.