Hi All,

I have the following code for an overlay style gallery. The script works absolutely perfectly in FireFox, Chrome, Safari and Opera, however in Internet Explorer (7 and 8) on the first thumbnail click the background overlay fades in bit the overlay with the image in doesn't appear - however it does on the second click.

Additionally the jquery fade animations when clicking on next or previous seem very jumpy (again only in Internet Explorer). As far as I can see it's only a simple fadeTo() function so am not sure why.

Any thoughts on this would be very much appreciated. The code:

HTML Code:
<!doctype html>
 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Gallery</title>
 
<link rel="stylesheet" href="scripts/gallery.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script>

var Gallery = {

// PARAMETERS FOR CUSTOMISATION

transition_speed: 500,      // milliseconds
outer_opacity: 0.7,         // 0 to 1 
outer_colour: "#000000",    // hex value
show_captions: true,        // true, false



thumbs: [],
images: [],
captions: [],
current_image_id: null,

   
   init: function() {

      // CREATE ARRAYS

      var gallery_div = document.getElementById("gallery");
      gallery_thumbs = gallery_div.getElementsByTagName("img");


      for (var i=0; i < gallery_thumbs.length; i++) {
         Gallery.thumbs[i] = gallery_thumbs[i];
         Gallery.thumbs[i].rel = [i];
      }

      for (var i=0; i < gallery_thumbs.length; i++) {
         Gallery.captions[i] = Gallery.thumbs[i].alt;
      }


      // CREATE OVERLAYS

      var body_tag = document.getElementsByTagName("body");
      var outer_overlay = document.createElement("div");
      outer_overlay.id = "outer";
      outer_overlay.style.backgroundColor = Gallery.outer_colour;
      var window_height =  $(document).height();
      outer_overlay.style.height = window_height +'px';
      body_tag[0].appendChild(outer_overlay);
      var inner_overlay = document.createElement("div");
      inner_overlay.id = "inner";
      body_tag[0].appendChild(inner_overlay);
      var close_button = document.createElement("img");
      close_button.src="images/icon-close.png";
      close_button.id = "gallery-close";
      inner_overlay.appendChild(close_button);
      var next_button = document.createElement("img");
      next_button.src="images/icon-next.png";
      next_button.id = "gallery-next";
      inner_overlay.appendChild(next_button);
      var prev_button = document.createElement("img");
      prev_button.src="images/icon-prev.png";
      prev_button.id = "gallery-prev";
      inner_overlay.appendChild(prev_button);
      var caption_div = document.createElement("div");
      caption_div.id = "gallery-caption";
      inner_overlay.appendChild(caption_div);

      $("#gallery-caption").fadeTo(0, 0);
      if (Gallery.show_captions == true) {
         inner_overlay.onmouseover = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed/2, 0.5);};
         inner_overlay.onmouseout = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed, 0);};
      }

      // CREATE IMAGES

      for (var i=0; i < Gallery.thumbs.length; i++) {
         var new_image = document.createElement("img");
         new_image.src = Gallery.thumbs[i].parentNode.href;
         new_image.id= "gallery-img" + (i + 1);
         inner_overlay.appendChild(new_image);
         Gallery.images[i] = new_image;
         $(Gallery.images[i]).fadeTo(0, 0);
      }

   
      // EVENT HANDLERS FOR OPEN AND CLOSE

      for (var i=0; i < Gallery.thumbs.length; i++) {
         Gallery.thumbs[i].onclick = Gallery.open;
      }

      var outer_overlay = document.getElementById("outer");
      outer_overlay.onclick = Gallery.close;
      close_button.onclick = Gallery.close;
      next_button.onclick = Gallery.next;
      prev_button.onclick = Gallery.previous;

   },



   open: function() {

      Gallery.current_image_id = this.rel;
      var current = Gallery.images[Gallery.current_image_id];
      var caption_div = document.getElementById("gallery-caption");
      caption_div.innerHTML = Gallery.captions[Gallery.current_image_id];


      var inner_overlay = document.getElementById("inner");
      inner_overlay.style.height = current.height + "px";

      Gallery.positioning(current);


      $(current).fadeTo(0, 1);
      $("#outer").fadeTo(0, Gallery.outer_opacity);
      $("#inner").fadeTo(0, 0);
      $("#inner").fadeTo(Gallery.transition_speed, 1);


      return false;

   },



   close: function() {

      $("#outer").fadeTo(0, 0);
      $("#inner").fadeTo(0, 0);
      $("#outer").css("display", "none");
      $("#inner").css("display", "none");

      var current = Gallery.images[Gallery.current_image_id];
      $(current).fadeTo(0, 0);

   },



   next: function() {

      var next_id = Number(Gallery.current_image_id) + 1;
      if (next_id == Gallery.images.length) {next_id = 0;}
      var next = Gallery.images[next_id];
      var current = Gallery.images[Gallery.current_image_id];

      var inner_overlay = document.getElementById("inner");
      inner_overlay.style.height = next.height + "px";

      Gallery.positioning(next);
   

      var caption_div = document.getElementById("gallery-caption");
      caption_div.innerHTML = Gallery.captions[next_id];


      $(current).fadeTo(Gallery.transition_speed, 0);
      $(next).fadeTo(0, 0);
      $(next).fadeTo(Gallery.transition_speed, 1);

      Gallery.current_image_id = next_id;
   
   },


   previous: function() {

      var prev_id = Number(Gallery.current_image_id) - 1;
      if (prev_id == -1) {prev_id = Gallery.images.length -1;}
      var prev = Gallery.images[prev_id];
      var current = Gallery.images[Gallery.current_image_id];

      var inner_overlay = document.getElementById("inner");
      inner_overlay.style.height = prev.height + "px";

      Gallery.positioning(prev);
   

      var caption_div = document.getElementById("gallery-caption");
      caption_div.innerHTML = Gallery.captions[prev_id];


      $(current).fadeTo(Gallery.transition_speed, 0);
      $(prev).fadeTo(0, 0);
      $(prev).fadeTo(Gallery.transition_speed, 1);

      Gallery.current_image_id = prev_id;
   },

   
   positioning: function(img) {
   
      var next_button = document.getElementById("gallery-next");
      next_button.style.top = (img.height / 2) -15 + "px";
      var prev_button = document.getElementById("gallery-prev");
      prev_button.style.top = (img.height / 2) -15 + "px";
      $("#inner").css("top", (($(window).height()-$("#inner").height())/2));
      $("#inner").css("left", (($(window).width()-$("#inner").width())/2));
   }



};


// START SCRIPTS

Start = function() {
   Gallery.init();
};

window.onload = Start;



</script>
 
</head>
<body>
 
<div id="gallery">
	<a href="images/image1.jpg"><img src="images/thumbs/image1.jpg" alt="Caption 1"></a>
	<a href="images/image2.jpg"><img src="images/thumbs/image2.jpg" alt="Caption 2"></a>
	<a href="images/image3.jpg"><img src="images/thumbs/image3.jpg" alt="Caption 3"></a>
	<a href="images/image4.jpg"><img src="images/thumbs/image4.jpg" alt="Caption 4"></a>
	<a href="images/image5.jpg"><img src="images/thumbs/image5.jpg" alt="Caption 5"></a>
</div> 

</body>
</html>