Users of Lightbox Plus (lightbox_plus.js written by Takuya Otani) will crash into the "unregistered value for rel attribute in a" wall when attempting to validate HTML5. The meta data will trip the switch, too.
HTML Code:
<head>
.
.
<meta name="X-Resource-Dir" content="/resource/">
<meta name="X-Script-Dir" content="/resource/">
</head>
This is a work around:
Code:
JavaScript
function lightboxInit()
{
var headElement = document.getElementsByTagName('head')[0];
var m1 = document.createElement('meta');
m1.setAttributeNode(attr('name',"X-Resource-Dir"));
m1.setAttributeNode(attr('content',"/resource/"));
headElement.appendChild(m1);
var m2 = document.createElement('meta');
m2.setAttributeNode(attr('name',"X-Script-Dir"));
m2.setAttributeNode(attr('content',"/resource/"));
headElement.appendChild(m2);
var lb1 = document.getElementById('potofgold');
lb1.rel = "lightbox external";
}
// dependency = attr()
function attr(x,y)
{
var z = document.createAttribute(x);
z.nodeValue = y;
return z;
}
This can be either a body onload or an onload event, but I recommend it be at the top of the execution queue. My implementation uses Dean Edwards addEvent() to manage the onload events.
HTML Code:
<script src="/js/dhtml.js"></script>
<script><!--
addEvent(window,"load",function()
{
lightboxInit();
}
);
//--></script>
<script src="/resource/spica.js"></script>
<script src="/resource/lightbox_plus.js"></script>
</body>
</html>
My source code HTML reads,
HTML Code:
<a href="http://www.example.org/downloads/pot-of-gold_wp.jpg" id="potofgold" rel="external" title="Pot of Gold photo by __Me__ Copyright 2006"> </a>
but renders,
HTML Code:
<a href="http://www.example.org/downloads/pot-of-gold_wp.jpg" id="potofgold" rel="lightbox external" title="Pot of Gold photo by __Me__ Copyright 2006"> </a>
Submit Your Article
Forum Rules
Reply With Quote