Conflict between Shadowbox and a jQuery div fader

Question

I'm using a jQuery script which fades in/out my divs so I can have one single page for my website. I'm also using Shadowbox script to display my images in a gallery.

The problem is that when I click on a thumbnail (which opens Shadowbox and my image), it cleans the content of my div out. So I end up with a blank page.

Here's my fader script:

  document.documentElement.className += " js";   
  $(function(){
    var $containers = $("#right > div").hide();
    $containers.eq(0).show();

    $('a').each(function(i,el){
      var idx = i;
      $(this).click(function(e){
        var $target = $containers.filter(':eq(' + idx + ')');
        if($containers.filter(':visible').not($target).length){
          $containers.filter(':visible').fadeOut(400, function(){
            $target.not(':visible').fadeIn(400);
          });
        } else {
          $target.not(':visible').fadeIn(400);
        }

      })
    })
  });

So that's the job of this script to replace div content, but is it possible to make an exception for the shadowbox script when I launch it?

The working files are here: http://www.hyker.be/minimal

And the scripts (shadowbox and fader): http://www.hyker.be/minimal/js/misc.js

Answer 1

Actually the click code is also working with gallery links as well. To exclude gallery anchor tags from your current click code use not() method or selector in jquery.

In your case the code should be :

$('a').not("a[rel*=shadowbox]").each(function(i,el){
    //existing stuff
})

or

$('a:not(a[rel*=shadowbox])').each(function(i,el){
    //existing stuff
})

Good Luck !!