галлерея

Несложный примерчик фотогаллереи

<style type="text/css">
#coverContent {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(/images/opacity.png);
  display:none;
  z-index:10;
  cursor:pointer;
}
* html #coverContent {
  background-image:none;
  background-color:#000;
  opacity:expression($('#coverContent').css('opacity',0.75));
}
*+html #coverContent {
  background-image:none;
  background-color:#000;
  opacity:expression($('#coverContent').css('opacity',0.75));
}
#bigImage {
  position:absolute;
  background:#fff url(/images/free.gif) top left no-repeat;
  display:none;
  z-index:11;
  cursor:pointer;
  text-align:center;
  vertical-align:bottom;
}
</style>

<script type="text/javascript">
function bigpic(src, w, h, comment) {
  if (w && h) {  
    w = parseInt(w);
    h = parseInt(h) + 20;
    
    comment = '<p style="color:#000;font:bold 12px tahoma;text-align:center;margin-top:'+(h-17)+'px">&nbsp;'+comment+'</p>';
    
    var left = Math.round((screen.width - w)/2);
    var top = Math.round(($(document.body).height() - h)/2) + $(window).scrollTop();//all
    
    if ($.browser.msie) {
      var height = document.body.scrollHeight;
    } else {
      var height = $(document).height();
    }
    height = $(document).height();
    
    $('#coverContent').css("top", 0).css("height", height).css('width','100%').css('display','block');
    $('#bigImage').css('height',h).css('width',w).css('backgroundImage','url('+src+')').css('top',top).css('left',left);
    $('#bigImage').html(comment).fadeIn(200);
    
  }
}

function boxInit() {
  $('#gallery a.fancybox').bind('click',function() {
    var src = $(this).attr('href');
    var comment = $(this).attr('title');
    
    bigpic(src, 600, 400, comment);
    return false;
  });
}


$(document).ready(
  function() {
    if ($('#coverContent').get(0) && $('#bigImage').get(0)) {
      boxInit();
    
      $('#coverContent').get(0).onclick = function() {
        closeBigImage();
      }
      $('#bigImage').get(0).onclick = function() {
        closeBigImage();
      }
      
      $(window).scroll(function() {
        if ($('#coverContent').css('display') == 'block') {
          var h = $('#bigImage').height();
          var top = Math.round(($(document.body).height() - h)/2) + $(window).scrollTop();//all
          $('#bigImage').css('top',top);
        }
      });
    }
  }
)

function closeBigImage() {
  $('#bigImage').css('display','none');
  $('#coverContent').css('display','none');
}
</script>

<body>
<div id="coverContent"></div>
<div id="bigImage"></div>

<a class="fancybox" target="_blank" href="/files/gallery/01b.jpg" rel="lightbox-tour" title="01b.jpg">
<img alt="01b.jpg" src="/files/gallery/01b_th.jpg"/>
</a>
<a class="fancybox" target="_blank" href="/files/gallery/02b.jpg" rel="lightbox-tour" title="02b.jpg">
<img alt="02b.jpg" src="/files/gallery/02b_th.jpg"/>
</a>
<a class="fancybox" target="_blank" href="/files/gallery/03b.jpg" rel="lightbox-tour" title="03b.jpg">
<img alt="03b.jpg" src="/files/gallery/03b_th.jpg"/>
</a>
</body>