<link rel="stylesheet" type="text/css" href="<?php echo SITEURL?>/css/demo.css" />
<div id="main"> 
    <!-- slide-show -->
    <div class="container"> 
      <!-- content -->
      <article id="content"> 
        <!-- tabs -->
        <div class="tabs">
          <div class="top-area">
            <div class="holder">
              <h2>Gallery</h2>
            </div>
          </div>
          <!-- tab-list --
          <div class="col-lg-4 col-sm-4" style="margin:10px 0px;">
            <img src="<?php echo SITEURL.'/uploads/home_gallery/'.$G['galleryImg']?>"class="img-responsive" style="height:300px; width:450px;">
          </div>
          <!-- tab-list -->
          <div class="tab-list">
            <div class="tab-content"> 
              <!-- posts -->
                <div class="w3-row-padding">
                  
                
              <?php
            	$sqlG = 'SELECT * FROM '.$DB->pre.'home_gallery WHERE status="1"';
				$G = $DB->dbRows($sqlG);
				foreach($G as $G){
					?>
                    	<div class="w3-container w3-third col-md-4" style="margin:10px 0px;">
                    <img src="<?php echo SITEURL.'/uploads/home_gallery/'.$G['galleryImg']?>" style="width:350px; height:200px;cursor:pointer" 
                    onclick="onClick(this)" class="w3-hover-opacity">
                  </div>
					<?php } ?>
              	</div>
            </div>
          </div>
        </div>
      </article>
      <!-- sidebar -->
      
    </div>
  </div>
  
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-zoom">
    <img id="img01" style="width:100%">
  </div>
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>