I installed colorbox and colorbox load in drupal 8.

I could not set width and height in colorbox
In drupal 7, below line works.
D7 code: <a href="/node/xxxx/xxxx-content?width=750&amp;height=135&amp;destination=/xxxx" class="colorbox-load">xxx Content</a>
In D8 it does not works,

I have tried below code, it opens content in colorbox but i could not control width and height.
<a href="/node/xxxx/xxx-content?width=750&amp;height=135&amp;destination=/xxxx" class="use-ajax xxxx-link cboxElement" data-dialog-type="colorbox">xx Content</a>

I have tried below jquery code, it does not applied.
$(".xxxx-link").colorbox({width:"100px", height:"100px"});

Can you help me how to set width and height on this?

Comments

sivaguru_drupal created an issue. See original summary.

sivaguru_drupal’s picture

sivaguru_drupal commented
Issue summary: View changes
sivaguru_drupal’s picture

sivaguru_drupal commented

Solved:
i use below markup and js code. I can now set width and height properlly.

Markup:
File: custom.html.twig

<a class="use-ajax" 
            data-dialog-options='{"width":"100px", "height":"100px"}' 
            data-dialog-type="colorbox" 
            href="/node/1">
            colorbox modal
        </a>

JS code:
File: custom.js

Drupal.AjaxCommands.prototype.colorboxLoadOpen = function (ajax, response) {
        var ajaxDialogOption = null;
        if (typeof ajax.dialog  !== "undefined"){
        var ajaxDialogOption = JSON.parse(JSON.stringify(ajax.dialog));
        }
        $.colorbox($.extend({}, drupalSettings.colorbox, ajaxDialogOption, {
          html: response.data,
        }));
        Drupal.attachBehaviors();
      };