jQuery Forum

1. <header role="banner">
2.       <nav class="next-prev cf">
3.             <a class="ajax prev" href="<?php echo _LINK_PATH;?>a-desert-is-a-place-without-expectation">Prev &ndash; <span>title of previous blog post</span></a>
4.             <a class="ajax next" href="<?php echo _LINK_PATH;?>a-desert-is-a-place-without-expectation">Next &ndash; <span>title of next blog post</span></a>
5.       </nav>
6. </header>

I have on the same page a lightbox gallery which also has keyboard navigation support for the lightbox images.
What I'm trying to do (and I'm pretty much there) is to disable/remove the post navigation from the DOM once user clicks on a lightbox thumbnail image to open viewer and when user closes the lightbox viewer it has to reinsert the post page nav back into the header.. Basically I have the following functions:

1. // store the post navigation in a variable
   
2. var postNav = $('.next-prev');
3. 
   
4. // remove the post naviagtion from the DOM when activating lightbox
5. $( 'a[data-imagelightbox="a"]' ).on('click', function(e) {
         postNav.detach();
   });
6. 
   
7. // insert it back in the header when closing lightbox by clicking on the document
   $(document).mouseup(function(e) {
       postNav.appendTo('[role="banner"]');
   });
8. 
   
9. // post nav keyboard arrows events
   $(document).keydown(function(e) {
       if(e.keyCode == 37) {
           $('.prev').click();
       };
       if(e.keyCode == 39) {
           $('.next').click();
       };
       // closing the lightbox can also be done with the 'escape' key, so we'll have to reinsert the post navigation to the header with this event too.
       if(e.keyCode == 27) {
           postNav.appendTo('[role="banner"]');
       };
   })

Like I said this all works well when using the keyboard, except that I can't use the mouse click on the post page navigation links. It probably has to do with the $(document).mouseup(), but I tried several things and the way I have it now comes the closest to the way I want it.

I tried instead of (document) also the ID of the lightbox overlay element (div), because this is besides the 'escape' key the only way to close the lightbox. Doing it like this I can use the mouse clciks on next and prev links, but it doesn't reinsert the nav .next-prev back into the header.

I also tried something with $(document).delegate(:not"('.next-prev > a')", mouseup, function() but no luck either or some tries with .not() to exclude .next-prev >  a but also nothing that I could create that worked.

Obviously I have to use something else to achieve what I want, but I don't know what.
Does anyone has a clue?

Thanks!
Ralph