closing one overlay and opening another

closing one overlay and opening another

I've seen posts about similar things, and tried to make them work for my case, but am clearly doing something wrong.

I have a page where an overlay is invoked by clicking on an image. In the code behind, some links are added to the overlay that's created such that if you click them, I want another overlay to be created and the first one to disappear. The layout of the first and second overlays are the same, though the "child" overlays don't have further "links" embedded.

What's happening is that the first overlay comes up fine, but when I click one of the links to bring up the second overlay, the first overlay disappears, but the second isn't invoked and I'm back to my base page. Then, if I click the image again to bring up the first overlay, both overlays appear, the second one tiled in front of the first. What am I doing wrong?

Here is a simplified form of the resultant html: 

  1. <img rel="#1208" src="/images/testsmall.png" /> 
  2. <div class="simple_overlay" id="1208"> 
  3.  <img src="/images/testlarge.png" /> 
  4.  <a rel="#1208_a>link a</a> 
  5.     <div class="simple_overlay" id="1208_a"> 
  6.         <img src="/images/testlarge_a.png" /> 
  7.     </div> 
  8.     <a rel="#1208_b>link b</a> 
  9.     <div class="simple_overlay" id="1208_b"> 
  10.         <img src="/images/testlarge_b.png" /> 
  11.  </div> 
  12. </div>
Here is the script I'm using to invoke the overlays and try to close the first in the loading of the second one:

  1. <script> 
  2.  $(document).ready(function () { 
  3.         $("img[rel]").overlay({ 
  4.             onBeforeLoad: function (event) { 
  5.                 $('.scrollbar').hide("fast"); 
  6.                 $('.thumb').hide("fast"); }, 
  7.             onClose: function (event) { 
  8.                 $('.scrollbar').show(); 
     $
    ('.thumb').show(); 
  9.             } 
  10.  }); 
  11.  $("a[rel]").overlay({ 
  12.             onBeforeLoad: function (event) { 
  13.                 $('img[rel]').overlay().close(); // close the first overlay 
  14.                 $('.scrollbar').hide("fast"); 
  15.                 $('.thumb').hide("fast"); }, 
  16.             onClose: function (event) { 
  17.                 $('.scrollbar').show(); 
  18.                 $('.thumb').show(); 
  19.              } 
  20.  }); 
  21.  }); 
  22. </script>


Any help would be greatly appreciated.