<div id="advert_background" onClick="closeAdvert()">
  <img src="<?=$this -> _advert['img'];?>" id="advert_img">
</div>
<style type="text/css">
  #advert_img {    
    border: 10px solid #000000;
    cursor: pointer;
    opacity: 1;
    position: relative;
    top: 10%;
    z-index: 1003;    
  }
  #advert_background {
    background: rgba( 255, 255, 255, 0.8);
    height: 100%;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1002;
  }
</style>
<script type="text/javascript">
  $( '#advert_img' ).load( function() 
  {
    var h_i = $( '#advert_img' ).height();
    
    var h = $(window).height();
    
    if ( h_i < h )
      h = h_i;
    else
      h = h * 0.80;
    
   
    var cssObj = {
      'height' : h + 'px',
      'margin-top' : '-' + ( h/2 + 10 ) + 'px',
      'top' : '50%'
    }
   
   jQuery('#advert_img').css( cssObj );
  });
  
  function closeAdvert() {
    jQuery("#advert_background").css( 'display' , 'none' );
    xajax_closeAdvert();
  }
</script>