Add multiple rel attributes and keep Shadowbox working
Thursday, November 17th, 2011I recently upgraded one of my websites and wanted to use Shadowbox as a lightbox option. I also wanted to utilize rel=”nofollow” for external pictures.
On my site engine of choice there’s a plugin that will assign this code:
rel="nofollow"
To all external links (including links to pictures). If it finds an existing rel attribute it will append it like this:
rel="nofollow lightbox"
I had installed Shadowbox properly and it was working just fine for internal pictures. But for external pictures it wouldn’t work and it would break javascript.
It seems you cannot add multiple rel attributes when using Shadowbox because it messes up javascript. So I studied shadowbox.js real quick and found this part:
var relAttr=/^(light|shadow)box/i
I asked a bright developer friend of mine and he told me what this does is to look for the “lightbox” or “shadowbox” word at the beginning of the rel attribute string, so if it doesn’t come first it will break js.
The solution is simple. I just had to remove the ‘^’ character. So replace the code above with this:
var relAttr=/(light|shadow)box/i
Enjoy