By WillyN on

Picture, breakpoint and colorbox module works fine together except that colorbox not have slides function. Nor prev and next.
Button can not be seen and colorbox is on "slideshow autostart" but don't start.
Only close button is on the colorbox display and works.

I have searched for problem descriptions associated with the picture, breakpoint and colorbox modules. But have not found a solution.
Someone who knows how I getting these three modules to work together?

⋅ Categories: Drupal 7.x

Comments

WillyN’s picture

WillyN commented

I've missed something?
Or is there no longer any others, who use Colorbox and - currently - Colorbox with picture module in Drupal 7

espurnes’s picture

espurnes
Primary language Catalan
commented

Hi WillyN,

I have the same problem. I'm using picture with breakpoints and I want to open the pictures in colorbox, but as you say there is no option to navigate through the other images.

Did you find a solution?

espurnes’s picture

espurnes
Primary language Catalan
commented

Hi WillyN,


I don't know what I did before, but now it's working. Probably I was too tired to figure it out.

I tried to reproduce the functionality in a new installation and It was not possible to do it with just Picture and Colorbox modules. What I did before (and I forgot) was to add an attribute rel to the links with colorbox-inline class through javascript.

So the steps are as follows:

    I assume Picture, Colorbox and breakpoints is installed in the stable versions
    Go to Content type's Manage Display and choose Picture format
    Configure the Format and choose aPicture group, a Fallback image style and in the Link image toselect Colorbox
    It appears a Colorbox group with the breakpoint's groups configured in your sistem. I created a group called "colorbox" to show the images in a custom size.
    I suppouse that the previous step should create a rel attribute to group the images but it does not, so you must add it by yourself
    Add by javascript a rel attribute to the a.colorbox-inline. I created a drupal behavior in my theme. Maybe there is a better solution.
      Drupal.behaviors.MYTHEMEColorbox = {
  //This code adds the prev, next colorbox functionality by adding a rel attribute to links with colorbox-inline class
    attach: function (context, settings) {
      $('a.colorbox-inline').attr('rel', 'myImgGroup');
    }
  };
    Now we have the functionality working, but if you list more than a node in the same page will group all the images of al the nodes together. A better approach is to set the name of the group with the nid. like group-nid or just nid.

HTML original output
<a class="colorbox-inline active init-colorbox-inline-processed cboxElement" href="mypath/node/10?maxWidth=80%25&maxHeight=80%25&inline=true#picture-colorbox-rvAdPoAGdj" > ... </a>
HTML modified output
<a class="colorbox-inline active init-colorbox-inline-processed cboxElement" href="mypath/node/10?maxWidth=80%25&maxHeight=80%25&inline=true#picture-colorbox-rvAdPoAGdj" rel="myImgGroup"> ... </a>

I hope the picture developer solves this lack of rel attribute soon. Meanwhile you can use this.

espurnes’s picture

espurnes
Primary language Catalan
commented

To access to the nid from the behaviour you can create a module like so (source):

Create a module that sets a variable currentNid

function MYMODULE_node_view($node, $view_mode, $langcode) {
  if ($view_mode == 'full') {
    $setting = array('MYMODULE' => array('currentNid' => $node->nid));
    drupal_add_js($setting, 'setting');
  }
}

Then you can access to the variable in the behaviour like so

Drupal.behaviors.MYTHEMEColorbox = {
  //This code add a rel attribute to colorbox-inline links to activate the prev next functionality in colorbox
    attach: function (context, settings) {
 
      var curr_nid = settings.nid.currentNid;
   
      $('a.colorbox-inline').attr('rel', 'group' + curr_nid);

    }
  };

HTML output
<a class="colorbox-inline active init-colorbox-inline-processed cboxElement" href="mypath/node/10?maxWidth=80%25&maxHeight=80%25&inline=true#picture-colorbox-rvAdPoAGdj" rel="g10"> ... </a>

I hope it helps