ฉันจะเพิ่มคลาสและแอตทริบิวต์ colorbox-load ให้กับลิงก์ที่มาจากภาพ svg ได้อย่างไร

ฉันมีภาพ SVG ที่เพิ่มไปยังโหนดผ่าน svg_image_field โมดูล. พวกเขามีลิงค์ภายใน /load-parts-ajax/{nid}. เส้นทางนำไปสู่การดูหน้าป๊อปอัปของเนื้อหาด้วยเส้นทางนี้ /load-parts-ajax/%. ฉันกำลังพยายามเปิดมุมมองในกล่องสี ฉันมีสิ่งนี้ในการใช้งานใน Drupal 7 ซึ่งใช้งานได้ดี เราติดตั้งโมดูล colorbox_node และใช้ colorbox โหนด ชั้นเรียนและนี่เป็นเรื่องง่ายมาก

อย่างไรก็ตาม สำหรับ Drupal 9 ฉันได้ติดตั้ง colorbox แล้ว และเป็นไลบรารี่และได้ลองใช้แล้ว colorbox_load, กับ ng_lightboxและฉันเพิ่มเส้นทางไปยังเส้นทางที่อนุญาตในการกำหนดค่าโดยไม่มีลูกเต๋า ฉันยังพยายามที่จะ colorbox_simple_load เพื่อโทร กล่องสีโหลด ชั้นไม่มีโชค

(ฉันสามารถแฮ็คเรนเดอร์ไซต์หน้าการดูทั้งหมดและทั้งหมดได้โดยการยัด cboxElement หลังเลิกเรียนแต่มั่นใจว่าผิด)

นี่คือ .js:

(ฟังก์ชัน ($, Drupal) {
  Drupal.behaviors.MY_MODULE = {
    แนบ: ฟังก์ชัน (บริบท การตั้งค่า) {
      $(เอกสาร).ajaxStop(ฟังก์ชัน() {
        setTimeout(function () { // จำเป็นต้องเพิ่มการหยุดชั่วคราวเพื่อให้ colorbox เริ่มทำงานใหม่
          $(".view-MY-POP-UP-VIEW", บริบท).ครั้งเดียว().flexslider({
            ภาพเคลื่อนไหว: "สไลด์",
            สไลด์โชว์: เท็จ,
            สัมผัส: เท็จ,
            แอนิเมชั่นลูป: เท็จ,
          });
        }, 500);
      });

      $(".field--name-field-MY-IMAGE .svg_a", บริบท).each(ฟังก์ชั่น(ดัชนี, รายการ) {
        $(item).attr("href", $(item).attr("xlink:href"));
        $(item).attr("data-inner-width", "304");
        $(item).attr("data-inner-height", "532");
        $(item).attr("คลาส", "โหลดกล่องสี");
      });
    }
  };
})(jQuery, Drupal);

และนี่คือวิธีที่ฉันเรียกไลบรารี่ .js ของฉัน ซึ่งเป็นไลบรารีที่แสดงผล SVG ในมุมมองหนึ่ง ไลบรารีหนึ่งสำหรับการแสดงโหนด

/**
 * ใช้ hook_views_pre_render()
 */
ฟังก์ชัน MY_views_pre_render (\Drupal\views\ViewExecutable $view) {
  ถ้า (isset($view) && $view->storage->id() == 'MY_VIEW') {
    $view->element['#attached']['library'][] = 'MY_MODULE/MY-LIBRARY';
  }
}

/**
 * ใช้ hook_preprocess_node()
 */
ฟังก์ชัน MY_preprocess_node(&$ตัวแปร) {
  $node = $variables['โหนด'];
  ถ้า ($node->bundle() == 'MY_NODE') {
    $variables['#attached']['library'][] = 'MY_MODULE/MY-LIBRARY';
  }
}

แอตทริบิวต์จากไฟล์ .js กำลังถูกเพิ่มลงในลิงก์รูปภาพในทั้งสองกรณี แต่ กล่องสีโหลด คลาสดูเหมือนจะไม่ได้รับการยอมรับเนื่องจากลิงก์เพิ่งเปิดมุมมองในหน้าต่างใหม่

นี่คือมาร์กอัปซึ่งมีลักษณะเหมือนกับมาร์กอัป drupal 7 ที่ใช้งานได้ (นอกเหนือจากการใช้คลาส colorbox-load แทน colorbox-node)

<a id="e3_hyperlink" xlink:title="" xlink:href="/load-parts-ajax/251" target="_blank" class="colorbox-load" href="/load-parts-ajax/251" data-inner-width="304" data-inner-height="532">

ดังนั้น ก่อนที่ฉันจะเปิดรายงานข้อบกพร่องผิดพลาด มีอะไรง่ายๆ ที่ฉันขาดไปสำหรับการติดตั้งใช้งาน กล่องสีโหลด เรียนอย่างถูกต้องหรือสิ่งนี้ควรใช้งานได้เหมือนที่เป็นอยู่?

แก้ไข: เดอะ colorbox_simple_load มีสิ่งนี้ในหน้าโครงการ:

$url = Url::fromUri('ภายใน:/example.html');
$link = Link::fromTextAndUrl(t('ดู'), $url);
$output = $link->toRenderable();
$output['#attributes']['คลาส'] = [
  'โหลดกล่องสี'
];
colorbox_simple_load_page_attachments($เอาต์พุต);

ดังนั้นฉัน สามารถ ใส่สิ่งนี้ในโมดูลที่กำหนดเองของฉัน แต่ฉันไม่แน่ใจว่าฉันจะต้องใช้ตะขอประเภทใดเพื่อนำไปใช้กับภาพ SVG