how to make the photo gallery show a photo before clicking on it?

Question

Hello I have a code from a photo gallery but it shows only a white background when opening the page, the photo will only appear when you click on one.. I would like that when opening the page had already appeared a photo in the gallery before you need to click any. Follows the code:

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



 

Answer 1

Your code is like this:

<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=o pendir($pasta)) { /* Esta é a forma correta de varrer o diretório */ while (false !==( $file=r eaddir($handle))) { 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=a rray( "",$img_p,$file,$img_p); $rtyyui=i mplode( "",$gty_array); echo '<td><img onClick="div_tr_gt('.$rtyyui. ');" src="'.$fotos[]=$
  image. '" width="50px" height="50px"></td>'; } echo '</tr></table></div>'; ?>

</div>

I believe that whatever is doing this would be the function OnClick of javascript, then just take out of the code the part where the function appears, so:

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