0

Få Lightbox och Slimbox att validera för HTML5

Här kommer ett litet tips för att få Lightbox 2 eller Slimbox 2 att validera för HTML5.

I normala fall så läggs följande till på varje länk där du vill anropa Lightboxen:

rel="lightbox"

I och med att HTML5 inte gillar det vi stoppat i  ”rel” och därmed inte validerar, måste denna ändras om till ett annat attribut vi istället kan arbeta med för att sidan skall validera. Ett exempel är:

data-rel="lightbox"

Sidan validerar nu, men vi har ett nytt problem istället. Lightboxen anropas inte längre. För att fixa detta så öppnar du bara .js-filen för Lightbox/Slimbox och gör en ”find and replace” på alla ”rel” till ”data-rel”. I exemplet nedan så har jag ändrat om alla ”rel” attribut i slimbox2.js, till vårt nya och korrekta ”data-rel”.

Före:

if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) { jQuery(function($) { $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); }); }); }

Efter:

if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) { jQuery(function($) { $("a[data-rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { return (this == el) || ((this.attributes['data-rel'].value.length > 8) && (this.attributes['data-rel'].value == el.attributes['data-rel'].value)); }); }); }

 

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on TumblrEmail this to someone