Multiple anchors with different rel attribute problem

Hi,

I've been using this script to open a page in a new window
function externalLinks() {
if (!document.getElementsByTagName && document.getElementById) return;

var anchors = document.getElementsByTagName("a");

for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
<a href="http://alink.com" rel="external" class="menusubitem">A link name</a>

I wanted to add this script (http://flowplayer.org/tools/demos/overlay/external.html) for an overlay.
Javascript:
$(function() {

// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({

mask: 'grey',
effect: 'apple',

onBeforeLoad: function() {

// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");

// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}

});
});
<a href="apage.php" rel="#overlay">aPageName</a>

Separately they work fine. But combined the overlay script doesn't work anymore.
I'm guessing that's because they both use the "rel" attribute in the anchor??

If I delete the "rel" from the external link. The Overlay works again. But of course the external link doesn't work then. :rolleyes:

Is there a way to make both work on the same page?
Thank you in advance! :thumbsup:

Well, the clash might be more complex than this, but you could try making your jQuery selector more specific to target elements with rel="#overlay" rather than just elements with any rel attribute:

$("a[rel='#overlay']").overlay({.....})

Thanks for the reply :thumbsup:

It looks like the problem is more complex, because it didn't solve the problem :(
Any other suggestions?

Hmm. Tried some test code and making the jQuery selector more specific fixes the issue for me here (http://www.simonbattersby.com/test/test_overlay.htm). Could there be anything else on your page causing the issue?

Thanks for taking the time to test this.

On another page I use a "Lightbox" gallery which also uses "rel=..." and I have the same problem there with the overlay.

I'll start again with the original overlay script. Maybe I made a mistake somewhere...

Thanks again!



Edit: The lightbox and the overlay both used id="Overlay". I used a different (and nicer) gallery script. So no more problems there :)