Jquery gallery like fancybox
<p>I am bulding my own image gallery, like fancybox.</p>

<p>See: <a href="http://snabbdesign.com/stack/stack.html" rel="nofollow">http://snabbdesign.com/stack/stack.html</a></p>

<p>I am having some problem with fading out and in <code>#gallery</code>. Some times the background (<code>#gallery</code>) will fade out before the image.</p>

<p>Also some times the <code>.gallery_image</code> wont be centered as it shuold.</p>

<p>Please help!</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;style type="text/css"&gt;
body{
margin:0;
}
#gallery{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
background:#000;
opacity:0.95;
display:none;
}
.gallery_image{
width:auto;
height:auto;
position:fixed;
left:0;
top:0;
}
#gallery_left,#gallery_right{
position:fixed;
height:100px;
width:100px;
top:50%;
margin-top:-50px;
background:#f00;
cursor:pointer;
display:none;
}
#gallery_left{
left:0;
}
#gallery_right{
right:0;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="ji"&gt;
&lt;img src="1.png"&gt;
&lt;img src="2.png"&gt;
&lt;/div&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function () {
   var $gallery_loaded = false,
      height_of_window = $(window).height(),
      width_of_window = $(window).width(),
      max_height = height_of_window - 100,
      max_width = width_of_window - 100,
      $ji_img = $('#ji img');
   $ji_img.css('cursor', 'pointer');
   $ji_img.click(function () {
      var position_of_image = $(this).index();
      if (!$gallery_loaded) {
         $gallery_loaded = true;
         $('body').append('&lt;div id="gallery"&gt;&lt;/div&gt;');
         $ji_img.each(function () {
            var big_src = $(this).attr("src").match(/[^\.]+/) + "-big.png";
            $('body').append('&lt;img style="display:none" class="gallery_image" src="' + big_src + '" /&gt;');
         }); // end each
         $('.gallery_image').each(function () {
            var $this = $(this);
            height_of_gallery_image = $this.height();
            width_of_gallery_image = $this.width();
            if (width_of_gallery_image &gt;= max_width) {
               $this.css({
                  'max-width': max_width + 'px'
               })
            }
            if (height_of_gallery_image &gt;= max_height) {
               $this.css({
                  'max-height': max_height + 'px'
               })
            }
            margin_top = (height_of_window - $this.height()) / 2;
            margin_left = (width_of_window - $this.width()) / 2;
            $this.css({
               'margin-top': margin_top + 'px',
               'margin-left': margin_left + 'px'
            })
         }); // end each
         $('body').append('&lt;div id="gallery_left"&gt;&lt;/div&gt;&lt;div id="gallery_right"&gt;&lt;/div&gt;');
      } //end if gallery_loaded
      $('#gallery').fadeIn(500);
      $('#gallery_left,#gallery_right').delay(1000).fadeIn(500);
      $('.gallery_image').eq(position_of_image).delay(500).fadeIn(500)
      $('#gallery').click(function () {
         $('.gallery_image').fadeOut(500)
         $('#gallery_left,#gallery_right').fadeOut(500);
         $('#gallery').delay(500).fadeOut(500);
      });
   }); // end click function
}); // end document redy
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
