Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Apenas Eu

Técnica para as fotos Preencher os espaços em branco

Por , em Desenvolvimento frontend

Recommended Posts

Apenas Eu    13

Apenas Eu
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

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.

 

<div class="row-fluid">

<div class="col-md-4">imagem</div>

<div class="col-md-4">imagem</div>

<div class="col-md-4">imagem</div>

</div>

 

<div class="row-fluid">

<div class="col-md-4">imagem</div>

<div class="col-md-4">imagem</div>

<div class="col-md-4">imagem</div>

</div>

 

<div class="row-fluid">

<div class="col-md-4">imagem</div>

<div class="col-md-4">imagem</div>

<div class="col-md-4">imagem</div>

</div>

 

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

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'];
  ?>
<!DOCTYPE html>
<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" rel="stylesheet"> <!-- Slide Custom CSS -->
<link href="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" 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   ");
while($qr3_l = mysql_fetch_array($query)) :
$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/<?php echo  $fotos_book ?>.jpg" data-lightbox-gallery="<?php echo $galeria ?>" title="<?php echo $alt ?>" >
<img src="http://www.dcsdesenvolvimento.com.br/imagens/<?php echo $fotos_book ?>.jpg"class="effect-portfolio wow fadeIn" data-wow-duration="2s" alt="<?php echo $alt ?>" title="<?php echo $alt ?>" >
</a>
<script>
$(function()
{
$('[rel="lightbox"]').lightbox();
});
</script>
</div>
    <?php  endwhile //fim do while ?> 
    <!-- / .fim da coluna da foto -->
<p class="clearfix"></p>
</div><!-- / .row -->
</div><!-- / .container -->
<div class="container-fluid" style="width 100%">
<div class="row-fluid">
<div class="col-md-9">
 <h3 class="-preto"><strong>Fale com o Fotógrafo</strong></h3>
<p>Para tornar o atendimento mais fácil e ágil para você o fotógrafo Danilo CS lhe oferece várias alternativas de contato.</p>
<p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d910.8500644523843!2d-52.39546953743439!3d-24.05220553313494!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ed7572d6322bd9%3A0x407601612e75d13d!2sR.+Abelar+Gon%C3%A7alves+Neto%2C+92+-+Jardim+Lar+Parana%2C+Campo+Mour%C3%A3o+-+PR%2C+87305-240!5e0!3m2!1spt-BR!2sbr!4v1421944485315" width="100%" frameborder="0" style="border:0"></iframe></p>
<p><i class="glyphicon glyphicon-home -azul"></i>  Rua Begônia, 634, Jd. Lar Paraná, Campo Mourão - PR</p>
<p><i class="glyphicon glyphicon-phone-alt -azul"></i>  44 3525 0990</p>
<p><i class="glyphicon glyphicon-envelope -azul"></i> <a href="maito:danilo@dcsdesenvolvimento.com.br"  class="link -preto">danilo@dcsdesenvolvimento.com.br</a></p>
<p><i class="glyphicon glyphicon-globe -azul"></i>  <a href="http://www.dcsdesenvolvimento.com.br/contato.php" class="link -preto">www.dcsdesenvolvimento.com.br/contato</a></p>
<h3>DCS no Facebook</h3>
 <iframe src="//www.facebook.com/plugins/facepile.php?app_id&href=https%3A%2F%2Fwww.facebook.com%2Fdcsdesenvolvimento&action&width&height&max_rows=3&colorscheme=light&size=large&show_count=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true" width="100%"></iframe>
<p class="clearfix"></p>
</div>
<div class="col-md-3">
<h5 class="-preto"><strong>Veja Também</strong></h5>
<?php include "elementos/menu-sobre.php" ;?>
</div>
<div class="col-md-12 centralizar"><?php include "elementos/anuncio-rodape.php" ;?></div>
</div><!-- / .row -->
</div><!-- / .container -->
<p class="clearfix"></p>
<?php include "elementos/pesquisa.php" ;?>
<?php include "elementos/rodape.php" ;?>
</body>
</html>
  <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
			<script src="http://www.dcsdesenvolvimento.com.br/script/carousel-boostrap.js"></script>
<script src="http://www.dcsdesenvolvimento.com.br/script/scripts.js" type="text/javascript"></script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito