Use data attribute instead of rel to be HTML5 valid

thank you very much, I spend a lot of time to fined a solution for this problem

good luck

in js past

        $('a.colorbox').each(function(){
            $(this).colorbox({rel:$(this).attr('data-rel')});
        });

in
modules/colorbox/colorbox.theme.inc
modules/colorbox/colorbox-insert-image.tpl.php
modules/colorbox/views/colorbox_handler_field_colorbox.inc
find rel
and replace to data-rel

I will take a look at implementing @proweb.ua solution it to 7-dev, it looks neat and clean.

I've been battling with this same issue for about 2 hours now. I just don't understand why something so simple with lightbox is such a headache with colorbox.

@proweb.ua
could you please tell me which file to post

$('a.colorbox').each(function(){ 
    $(this).colorbox({rel:$(this).attr('data-rel')});
    });

into?

@serget885: which file should the code
</code><script> jQuery(document).ready(function () { jQuery('a.colorbox').colorbox({ opacity:0.5 , rel:'group1' }); }); </script><code>
go into please.

Thanks for your help

@Drup-rider, if Lightbox works better for you why not use it?

I have looked at implementing data-[something] and while @proweb.ua works I want a solution in colorbox.js that is fast and clean.

I will ask Jack Moore, who develops the Colorbox plugin, about implementing this in the plugin itself, that would make it a real solution.

IIRC, I found the same question you are about to ask on google group, and Jack replied to use the solution like the above mentioned. But if you can make a official request, I hope Jack can consider internal solution for real, yes.

Similar issue at #1896558: The 'rel' attribute in HTML5 (Media Colorbox module).

I solved HTML5 validation changing 'rel' attribute with 'data-rel' (as in #3), but made no changes to js code.

Adding patch. Seems we have to keep up with html5 and stop using random rel tags.

http://stackoverflow.com/questions/13214619/the-html-rel-tag
http://stackoverflow.com/questions/9037061/html-attribute-rel-errors-usi...

Does colorbox work with data-rel out of the box. No need to change js? Just asking.

We're using colorbox-load and just changing to data-rel didn't work for us. I was able to coax it into working via our add-on JS file, but I am interested in the long-term solution.

The Patch from #9 covers only the markup inserted with WYSIWYG.

Bases on the 7.x-2.7 Version I wrote a patch covering the Filed Theme function and JS changes too. I changed the attribute "rel" to data-colorbox-rel, because I think just using data-rel is not namespaced and likely to fail.

Credits go to dataintransit.

Yep, #12 works a treat. ta!

If #12 works, should it be committed?

Can confirm that the patch from #12 is working, also applies to 7.x-2.8. Please commit it.

Here's a reroll against 7.x-2.x with some minor improvements.

I realized that this patch is only working with the latest colorbox library version, when trying with 1.4.something it didn't work at all.

Should that be added to the README?

patch #12 worked fine for me.

#16 worked for me! Thnx!

A tiny review.
Perhaps double quotes ("colorbox-rel") should be single to match the rest?
UPDATE:
And jQuery to $.

Committed with minor changes to 7.x-2.x, thanks!