The musterious behavior of rel attribute [#2749343]

I was struggling for several hours to understand why a collection of thumbnails (set in a views grid to work like a gallery) didn't open as expected in a colorbox window. Well the case wasn't so usual as I was mixing images and youtube videos (set as entities via media module v.>2.0), but anyway with a little coding and hacking I finished with what I think was a correct coding of my items' links. Not so hard for the image links, they look like:
<a href="http://www.mysite.com/sites/default/files/images/path_to_the_big_image.jpg" title="some title..." class="colorbox init-colorbox-processed cboxElement" data-colorbox-gallery="gallery-all-GQnD7mVL9Xs"><img typeof="foaf:Image" src="http://www.mysite.com/sites/default/files/styles/thumbnail/public/images/path_to_the_thumbnail_image.jpg?itok=5tNkHuhJ" alt="some alt text"></a>
The video link was a little more tricky because I had to load it manually:
<a href="http://www.youtube.com/embed/youtubeID?width=480&height=360&iframe=true&rel=0" data-colorbox-gallery="gallery-all-GQnD7mVL9Xs" class="colorbox colorbox-load init-colorbox-processed cboxElement init-colorbox-load-processed" title="some title..."><img title="" alt="some alt text" src="http://www.mysite.com/sites/default/files/styles/thumbnail/public/media-youtube/youtubeID.jpg?itok=a0HVHjQt" typeof="foaf:Image"></a>
This didn't work! Or rather, not worked completely. The images worked and I could move inside the colorbox windows with the gallery arrows. The video worked if I clicked its thumbnail, but no way to move from there. I had a grid 3x3 with 8 thumbnails linked to images and 1 thumbnail linked to a youtube video. When I click on an image-thumbnail the colorbox opens and counts... 8 pictures, so it is obvious colorbox ignores my video-thumbnail and when I open the video-thumbnail, colorbox ignores the image-thumbnails.
Comparing the two codes above, the "data-colorbox-gallery" for the gallery construction is the same, the "colorbox"class is present, so the only difference is two more classes for video (colorbox-load and init-colorbox-load-processed) and a series of attributes in the youtube query (width=480&height=360&iframe=true&rel=0). So I started playing with all these...
If I change the "colorbox-load" class to "colorbox-inline" class, then colorbox opens and counts correctly 9 items but when I move to the video item it is empty with the message "This content failed to load". So go back to the "colorbox-load" class which as I said worked but alone. Next try, desperately remove the "iframe=true" attribute from the youtube link. Why? I don't know, because I said... desperately. Of course nothing happens and I even broke what was still partially working. Next try: remove the "rel=0" attribute from the youtube link. Why? because I said... desperately. And then, my God, miracle, it worked! I could load all 9 items and move from one to other with the colorbox arrows regardless if my links point to an image or a youtube-video. So why the heck this "rel=0" prevents my code to run ? Let's have a look in youtube's api: "This parameter indicates whether the player should show related videos when playback of the initial video ends. Supported values are 0 and 1. The default value is 1." Ah, I see. YouTube wants to force me to have related videos at the end of mine... Of course it would be so simple to be a victim of a youTube conspiracy. But remember: when the code didn't work we also had a counting issue. Only 8 of 9 items were counted when clicking on an image-thumbnail. This means that somewhere a javascript/jquery code is unable to see our video link or it has trouble with it. So let's open the colorbox's .js files. Line 17 of colorbox.js we can read:

    // Use "data-colorbox-gallery" if set otherwise use "rel".
    settings.colorbox.rel = function () {
      if ($(this).data('colorbox-gallery')) {
        return $(this).data('colorbox-gallery');
      }
      else {
        return $(this).attr('rel');
      }
    };

So colorbox uses a "rel" attribute as well as youtube but not for the same purpose. For the moment, I accepted to have youtube's related content at the end of my videos and removed the "rel" form the url construction. But it would be nice if we had a way to distinguish between the youtube and the colorbox usages of the rel attribute.

Comments

Comment #1

15 June 2016 at 18:51

erwangel created an issue. See original summary.

Comment #2

frjo CreditAttribution: frjo commented 16 June 2016 at 01:13

Category:	Bug report	» Support request
Status:	Active	» Fixed

You are using two different features, colorbox/colorbox-load, to build one gallery. This is not supported, you need to pick one of them and use it for all content in the gallery.

I regret adding the colorbox-load and colorbox-inline features to the modules. So mush confusion how it works. In the Drupal 8 version I have removed them and all other extra features. They are a much better fit for separate modules that extends the Colorbox module.

Comment #3

erwangel CreditAttribution: erwangel commented 16 June 2016 at 19:02

Indeed I use both colorbox and colorbox-load but this is because I have to use colorbox-load in order to insert an online video (a media:youtube url) to the gallery, otherwise colorbox just opens an empty window with the message "This content failed to load" and on the console I can read this: XMLHttpRequest cannot load https://www.youtube.com/embed/aYoutubeID?width=480&height=360&iframe=true. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

This happens with either colorbox or colorbox-inline class. The only way to achieve my gallery mixing images* and online videos* was to add the colorbox-load class to my video items. It's like there was a cross-domain restriction if I don't use colorbox-load.

On the other hand, using colorbox-load or not is another issue. The problem here is the way the module's javascript identifies the "rel" attribute. I can't see where in the javascript the confusion is made between the colorbox "rel" and the youtube "rel" as Youtube's "rel" is not node/tag's attribute in the BOM tree but just a query key.

*in my case images and videos are entities as defined by media module and media:youtube plugin but I don't think this changes the bottom line as we end up with an html code like the one mentioned on my initial message.

ps: I think colorbox-load and colorbox-inline features should be kept, they may be useful while building programmatically a gallery or while getting inside field formatter hooks.

Comment #4

erwangel CreditAttribution: erwangel commented 19 June 2016 at 17:42

Well, I finished by locating the problem in the colorbox_load.js file where the youtube url is parsed and then its query parameters are passed to colorbox script.
So around line 40, prevent the "rel" parameter to pass to colorbox

        if (e[1] == 'width') { e[1] = 'innerWidth'; }
        if (e[1] == 'height') { e[1] = 'innerHeight'; }
	if (e[1] != 'rel') { // added test to prevent "rel" being a colorbox parameter
          p[e[1]] = e[2];
	}

Perhaps this is not the best solution as in this manner we can no more use the "rel" parameter in a url to build a gallery.
From Jack Moors's api page (http://www.jacklmoore.com/colorbox/)

rel: defaults to false: This can be used as an anchor rel alternative for Colorbox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together. $("a.gallery").colorbox({rel:"group1"}); Note: The value can also be set to 'nofollow' to disable grouping.

For a permanent solution I think drupal's colorbox module should use an other name in place of "rel" to construct urls and only rename it "rel" after parsing. Or, even better, prefix all module's parameters with a namespace until parsing, p.e.: cbx_rel, cbx_width, etc. This way we'll avoid later collusion with any other external url's query parameters as it was with my youtube "rel" case.