transformar uma galeria de fotos normal em responsiva

[acscarolina]

Como faço para transformar uma galeria normal para uma responsiva?

Segue o código:

<!--CSS-->

.div-galeria{
	width:10%;
	height:10%px;
	overflow:scroll;
	border-style:solid;
	border-color:#000000;
	
}
.div-img-pr{
	width:10%;
	height:50%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto;
	border-style:solid;
	border-color:#000000;
	
}


<!--Galeria de fotos-->
    <div class="localgaleria">
   <script>
function div_tr_gt(u){
	var gth_y = 'url('+u+')';
	document.getElementById('i-div-imgh').style.backgroundImage = gth_y;
}
</script>

 
 <?php
$pasta = 'imagens/fotos/cachacaria';

if ($handle = opendir($pasta)) {
    
    /* Esta é a forma correta de varrer o diretório */
    while (false !== ($file = readdir($handle))) {
		/* Resolvido o bug aqui.. */
        if ($file != "." && $file != "..") {
		echo'
<div id="i-div-imgh" class="div-img-pr" style="background-image:url('.$pasta.'/'.$file.');"></div>';
break;
}
    }

        closedir($handle);
}

echo'<div class="div-galeria">
<table>
<tr>';
 
 foreach(glob(''.$pasta.'/{*.jpg,*.gif}', GLOB_BRACE) as $image) {
	 
	 $img_p = "'";
	 $file = $fotos[] = $image;
	 $gty_array = array("",$img_p,$file,$img_p);
	 $rtyyui = implode("",$gty_array); 
	 
	 
echo'<td><img onClick="div_tr_gt('.$rtyyui.');" src="'.$fotos[] = $image.'" width="50px" height="50px"></td>';
}
echo'</tr></table></div>';
?>

  </div>

 

[wash]

Olá acscarolina!

Para tornal algum layout responsivo você vai precisar usar as media queries do css.

Veja em: http://tableless.com.br/introducao-sobre-media-queries/

Talvez, por trabalhar com imagens, veja tb: http://www.maujor.com/tutorial/elemento-picture-para-imagens-responsivas.php

[wash]

Oi!

Seu script pode ficar mais elegante assim:

<style>
   .div-galeria{
      width:50%;
      height:70px;
      overflow-x:scroll;
      border-style:solid;
      border-color:#000000;
      white-space: nowrap;
   }
   .div-galeria img{
      width:50px;
      height:50px;
      cursor:pointer;
   }
  .div-galeria img+img{
     margin-left:4px;
  }
  #big-image{
      width:50%;
      height:50%;
      background-repeat:no-repeat;
      background-position:center;
      background-size:auto;
      border-style:solid;
      border-color:#000000;
   }
</style>

<script>
   function change_image(image) {
      document.getElementById('big-image').style.backgroundImage = 'url('+image+')';
   }
</script>
<!--Galeria de fotos-->
<div class="localgaleria">
   <?php
   // definir nome da pasta
   $pasta = 'imagens/fotos/cachacaria';
   // checar se a pasta existe:
   if (is_dir($pasta)) {
      // ler os arquivos da pasta:
      $images = glob('' . $pasta . '/{*.jpg,*.gif}', GLOB_BRACE);
      // exibir a primeira imagem carregada:
      echo '<div id="big-image" style="background-image:url(' . $images[] . ');"></div>';
      // exibir as imagens como se fossem miniaturas:
      $miniatures = '<div class="div-galeria">';
      foreach ($images as $image) {
         $miniatures .= '<img onClick="change_image(this.src)" src="' . $image . '">';
      }
      echo $miniatures.'</div>';
   } else {
      echo '<p class="error">A pastinha <b>' . $pasta . '</b> não existe!</p>';
   }
   ?>
</div>

 

[acscarolina]

Obrigada, vou dar uma olhada nesses site.

mas não consegui testar esse código, diz que nessa linha:

// exibir a primeira imagem carregada:
      echo '<div id="big-image" style="background-image:url(' . $images[] . ');"></div>';

 

não pode usar o []

 

O que poderia colocar no lugar?

 

[Stoma]

Acredito que o correto é ter um 0 dentro do [], mas o fórum remove o caracter 0 do código (bug!):

echo '<div id="big-image" style="background-image:url(' . $images[0] . ');"></div>';