jQuery Forum

New to jquery and using the overlay tools in jquery-1.2.7.tools.min.js.  I have several div's set up as overlays on an 'img' and some 'a' tags. 

    <img src="/image/test.png" rel="#1485">
    <div id="1485" class="simple_overlay">
        <a rel="1486">1</a>
        <a rel="1487">2</a>
        <a rel="1488">3</a>
    <div id="1486" class="simple_overlay">
        <a rel="1486">1</a>
        <a rel="1487">2</a>
        <a rel="1488">3</a>
    <div id="1487" class="simple_overlay">
        <a rel="1486">1</a>
        <a rel="1487">2</a>
        <a rel="1488">3</a>

When I click on one of the 'a' links, I want the overlay div matching its id to be shown, and the others to be hidden.  But, in using jquery code like this:

    <script>
        $(document).ready(function () {
            $('img[rel]').overlay({
                oneInstance: false
            });
           
            $('a[rel]').overlay({
                oneInstance: false,
                onLoad: function (event) {
                    $('.simple_overlay').not($(this)).hide();
                }
            });
        });
    </script>

or in using this:

    $(this).siblings().hide()

the "this" designation does not do what I want.  Essentially, all divs with class .simple_overlay are hidden on the hide() call.  I want the div with the clicked rel id to be shown, and the others hidden, but it seems I'm mistaking what "this" is...Can anyone tell me how to do this?

Invoking an overlay within a scrollable area.  Using tinyscrollbar plugin ( http://www.baijs.nl/tinyscrollbar/ ) and, when the overlay is invoked, I want to set the scroll option in tinyscrollbar to false.  This is the script in the header:

1. <script type="text/javascript">
2.     $(document).ready(function () {
3.         $('#scrollbar2').tinyscrollbar({ scroll: true });
4.     });
5. </script>

This is the overlay script:

1.     $(document).ready(function () {
2.         $("img[rel]").overlay({
3.             onBeforeLoad: function (event) {
4.                 $('#scrollbar2').tinyscrollbar({ scroll: false });
5.              },
6.             onClose: function (event) {
7.                 $('#scrollbar2').tinyscrollbar({ scroll: true});
8.              }
9.         });
10.     });

As you can see, in onBeforeLoad, I try to set the scroll to false and onClose set it back to true, but these are ignored.  Kinda new to jquery, so not sure how to change these options dynamically.  Tried call to tinyscrollbar_update() after setting scroll option but that didn't have any effect.  Not sure how to do this...

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>

23. 
    

Any help would be greatly appreciated.