$(document).ready(function () {
  $('.img_thumb').css('cursor','pointer');
  $('body').append('<div id="img_bg" style="position: fixed; left:0; top:0; width:100%; height:100%; background-color:#005B5B; z-index:1000; opacity: 0; display: none;">&nbsp;</div>');
  $('body').append('<div id="img_bg_clickable" style="position: fixed; width:100%; height:100%; left:0; top:0; background:none; z-index:1001; text-align: center; display: none;"><img style="max-width:100%; max-height:100%;" src="http://www.webhosting.com.ua/webhosting/img/logo.png" /></div>');
  
  $('.img_thumb').click(function(){
        var src = $(this).attr('src');
        $('#img_bg').show().animate({
                        opacity: 0.4
                    }, 200, function() 
                    {
                      $('#img_bg_clickable img').attr('src',src.slice(0,src.length-4)+'_big'+src.slice(src.length-4));
                      $('#img_bg_clickable').show();
                      
                    });
  })
  
  $('#img_bg_clickable').live('click', function(){
    $('#img_bg').animate({
                        opacity: 0.0
                    }, 200, function() 
                    {
                      $('#img_bg').hide();
                      $('#img_bg_clickable').hide();                                                          
                    });
  });
});