Attribute "rel" during a direct call

[pixedelic]

I can't create a group by using the attribute "rel" during a direct call. Is it possible the old bug has come back? https://github.com/jackmoore/colorbox#version-126---july-15-2009

[jackmoore]

It partially works for me; the item will open grouped with the other elements that share that rel attribute, but it doesn't allow you to move back to the direct call item once you advance forward/backward within the group. I'm not sure if that worked previously.

[pixedelic]

Wow, what a fast reply. Thank you so much... I can't provide a test page at the moment, sorry, however the navigation, current slide and total slides are simply missing for me. However thank you for checking, I'll investigate further more.

However, tried this way, just to include some links generated dynamically:

        jQuery(document).on('click','a[href$=".jpg"]',function(e){
            e.preventDefault();
            var dataRel = jQuery(this).data('rel'),
                dataTitle = jQuery(this).data('title'),
                href = jQuery(this).attr('href');
            jQuery.colorbox({
                href: href,
                open: true,
                maxWidth: "85%",
                maxHeight: "85%",
                rel: dataRel,
                title: dataTitle
            });
        });

[jackmoore]

Ok, the issue here is that Colorbox currently only groups elements it's been assigned to. The way you are doing it Colorbox is never actually assigned to any of your anchor elements. So this is consistent with how Colorbox has always been, but I plan on changing that in the near future because it was a poor design decision.

The original idea was that each element had to have Colorbox assigned to it, as each item provided it's own settings object for Colorbox to use. This allowed for maximum flexibility (say, each item in the group can have completely different settings), but makes it difficult to do event delegation.

For now you would be better off assigning Colorbox to those elements if that doesn't cause other issues for you. It's still fairly efficient as Colorbox uses event delegation internally (only one event handlers is being created, same as you have) but each element will be assigned a settings object.

Using the current version of Colorbox, the non-delegated version of your code should simply be the following:

$(a[href$=".jpg"]).colorbox({
  maxWidth: "85%",
  maxHeight: "85%"
});

[paazmaya]

With 1.5.6 and jQuery 2.1.0, I am getting

Uncaught ReferenceError: rel is not defined 

From line 360.

My code does not rely on it, and it is triggered with:

var href = 'http://farm7.staticflickr.com/6231/6282661367_12b51920c4_m.jpg';

$.colorbox({
   href: href
});

[jackmoore]

Hi @paazmaya, I couldn't reproduce your issue. Can you provide a link? What browser were you using?

[paazmaya]

Hi, both latest Chrome and Firefox. Tried with CodePen to create minimal version and that seemed to work. Eventually deployed the faulty version, http://www.naginata.fi/en

[jackmoore]

@paazmaya I didn't try to fully inspect your code, but I can see how there would be an error in some execution contexts. Hopefully this update will resolve the issue.

[paazmaya]

Hi, sorry and yes, it was not supposed to be your duty.. Thanks for quick update!

[paazmaya]

Further looking at this, the error arrives from https://github.com/jackmoore/colorbox/blob/master/jquery.colorbox.js#L360

Perhaps it is that I am using global 'use strict';, and by the look of it, rel is not declared before.

[paazmaya]

By adding rel to the list starting at line 131, fixes the issue.

[jackmoore]

Doh. Thanks.

[tangshuang]

I have the same problem. look at http://stackoverflow.com/questions/15681876/gallery-and-colorbox-group-images/34872410#34872410