Drupal․ Colorbox-ի փոխարինումը GLightbox-ով

1 Ներածություն

Lightbox փլագինները Drupal-ով աշխատող կայքերի անբաժան մասն են եղել ավելի քան մեկ տասնամյակ։ Դրանք խմբագիրներին թույլ են տալիս ցուցադրել պատկերներ, տեսանյութեր և այլ մեդիա բովանդակություն՝ էջի վրա վերադիր շերտում (overlay), առանց ընթացիկ էջից դուրս գալու — սա այն վարքագիծն է, որը այցելողները ակնկալում են ժամանակակից, մեդիա-հագեցած կայքերում։

Colorbox-ը պատմականորեն եղել է Drupal էկոհամակարգի հիմնական ընտրությունը։ colorbox contributed մոդուլը սերտորեն ինտեգրված է Drupal-ի պատկերների դաշտերի formatter-ների հետ, ունի հասուն API և լայնորեն ճանաչված է համայնքում։ Սակայն, վեբի զարգացման հետ մեկտեղ, Colorbox-ը սկսել է ցույց տալ իր հնացած լինելը․ այն կախված է jQuery-ից, ունի ավելի ծանր բեռ և հետ է մնում ժամանակակից մատչելիության (accessibility) պահանջներից։

Այստեղ է հայտնվում GLightbox-ը — մաքուր vanilla JavaScript-ով գրված lightbox գրադարան (զրո կախվածություններ), փայլեցված օգտագործողի միջերեսով, ուժեղ մատչելիության աջակցությամբ և թեթև չափով։ Նրա համապատասխան Drupal մոդուլը մաքուր կերպով ինտեգրվում է նույն պատկերային դաշտերին և մեդիա entity-ներին, որոնց հետ նախկինում աշխատում էր Colorbox-ը։

Այս հոդվածը ձեզ կուղեկցի ամբողջ միգրացիոն գործընթացով՝ սկսած առկա Colorbox կարգավորումների աուդիտից մինչև GLightbox-ի տեղադրումը, դաշտերի formatter-ների վերքարտեզավորումը, հին մոդուլի անվտանգ հեռացումը և նոր փորձառության ճշգրտումը ձեր թեմայի համար։

2 Colorbox ընդդեմ GLightbox․ ինչու՞ միգրացիա անել

2.1 Colorbox-ի սահմանափակումները

Colorbox-ը ստեղծվել է վեբի մեկ այլ դարաշրջանում։ Նրա ճարտարապետությունը հիմնված է այնպիսի ենթադրությունների վրա, որոնք այլևս չեն համապատասխանում ժամանակակից Drupal զարգացմանը։

• jQuery-ից կախվածություն։ Colorbox-ը jQuery փլագին է և չի կարող աշխատել առանց դրա։ Drupal core-ը տարեցտարի նվազեցնում է իր կախվածությունը jQuery-ից, իսկ շատ կատարողականությանը կենտրոնացած թեմաներ jQuery-ն բեռնում են ուշ կամ ընդհանրապես չեն բեռնում։ Կոշտ jQuery կախվածությունը հակասում է այդ ուղղությանը։
• Հնացած UI և անիմացիաներ։ Colorbox-ի լռելյայն ոճերը հնացած են թվում՝ համեմատած 2024–2026 թվականների դիզայնի նորմերի հետ։ Ժամանակակից տեսք ստանալու համար հաճախ անհրաժեշտ է մեծածավալ CSS հարմարեցում։
• Մատչելիության բացեր։ Չնայած տարիների ընթացքում արվել են որոշ մատչելիության ուղղումներ, Colorbox-ը նախագծված չի եղել WCAG 2.1 AA ստանդարտը որպես հիմնական նպատակ ունենալով։ Ֆոկուսի փակումը, ARIA դերերը և screen reader-ի հայտարարությունները հաճախ պահանջում են լրացուցիչ մեծ աշխատանք։
• Սպասարկման դանդաղ տեմպ։ jQuery Colorbox-ի հիմնական գրադարանը հազվադեպ է թարմացվում։ Երկարակեցություն պահանջող Drupal նախագծերի համար սա լրացուցիչ ռիսկ է։

2.2 GLightbox-ի առավելությունները

GLightbox-ը ուղղակիորեն լուծում է վերոնշյալ բոլոր խնդիրները։

• Զրո կախվածություններ։ Մաքուր ES6+ JavaScript, առանց jQuery-ի։
• Ժամանակակից UX։ Հարթ CSS անցումներ, swipe ժեստեր, ստեղնաշարային նավիգացիա և մաքուր լռելյայն թեմա, որը լավ ինտեգրվում է ժամանակակից դիզայնների հետ։
• Առաջնակարգ մատչելիություն։ Ֆոկուսը փակվում է lightbox-ի ներսում, ստեղնաշարի սլաքներով նավիգացիան աշխատում է անմիջապես, և ավտոմատ կիրառվում են համապատասխան ARIA role="dialog" սեմանտիկաները։
• Թեթևություն։ Մինիմացված և gzip-ված փաթեթը փոքր է 15 KB-ից — մոտ 3 անգամ փոքր, քան սովորական Colorbox կարգավորումը։
• Պատկերասրահների խմբավորում։ Ներքին աջակցություն խմբավորված պատկերասրահների համար՝ data-gallery ատրիբուտի միջոցով, առանց հավելյալ փլագինների։
• Ակտիվ զարգացում։ GLightbox նախագիծը GitHub-ում ունի կանոնավոր թողարկումներ և bug-երի ուղղումներ։

3 Drupal էկոհամակարգի ընդհանուր պատկերը

Drupal core‑ը արդեն մի քանի տարի է՝ հետևողականորեն նվազեցնում է իր jQuery բեռը՝ անցնելով vanilla JavaScript‑ի և ժամանակակից բրաուզերային API‑ների օգտագործմանը։ Սա արտացոլվում է Drupal 10+ տարբերակներում jQuery‑ի վրա հիմնված բազմաթիվ behavior‑ների deprecation‑ում և թեմաների համար ավելի թեթև JavaScript ռազմավարություններ ընդունելու խթանմամբ։

Contrib կողմում թե՛ Colorbox‑ը, թե՛ GLightbox‑ը ունեն իրենց առանձին Drupal մոդուլները Drupal.org‑ում։

• colorbox — դասական ընտրություն՝ խոր ինտեգրմամբ Image դաշտերի formatter‑ների, Views‑ի և մեդիա համակարգի հետ։ Չնայած դեռ լայնորեն տեղադրված է, թարմացումները դարձել են սակավ։
• glightbox — ավելի նոր contrib մոդուլ, որը փաթեթավորում է GLightbox JS գրադարանը։ Այն տրամադրում է Image և Media դաշտերի formatter‑ներ, Views աջակցություն և կարգավորումների ձև՝ GLightbox‑ի ամենատարածված ընտրանքների համար։

4 Միգրացիայի նախապատրաստում

4.1 Գործող Colorbox օգտագործման աուդիտ

Մինչ որևէ կարգավորում փոխելը, կազմեք ամբողջական պատկեր՝ որտեղ և ինչպես է Colorbox‑ը օգտագործվում ձեր կայքում։

1. Պատկերային դաշտեր։ Այցելեք Structure → Content Types → [Տեսակ] → Manage display յուրաքանչյուր content type‑ի համար և ստուգեք՝ արդյոք որևէ image դաշտ օգտագործում է Colorbox formatter։ Նշեք image style‑երը և caption կարգավորումները։
2. Media entity‑ներ։ Ստուգեք media type‑երի display mode‑երը Structure → Media types բաժնում։ Կրկնեք պատկեր կամ վիդեո պարունակող յուրաքանչյուր media type‑ի համար։
3. Views։ Գտեք Views‑երը, որոնք ներառում են image դաշտեր, և ստուգեք՝ որ formatter‑ն է օգտագործվում։ Colorbox‑ը կարող է կիրառված լինել նաև Views‑ի «Colorbox» format plugin‑ի միջոցով։
4. Custom կոդ։ Որոնեք ձեր custom մոդուլներում և թեմաներում colorbox, .colorbox, Drupal.behaviors.colorbox հղումները և colorbox/colorbox գրադարանի բանալին։

# Արագ որոնում ամբողջ codebase-ում (գործարկել Drupal root-ից)
grep -r "colorbox" web/modules/custom web/themes/custom \
  --include="*.php" --include="*.js" --include="*.twig" \
  --include="*.yml" -l

Պահպանեք բոլոր հայտնաբերված տեղերի ցանկը։ Դրանցից յուրաքանչյուրին կվերադառնաք փոխարինման փուլում։

4.2 Պահուստավորում և միջավայրի նկատառումներ

• Արտահերթեք ակտիվ կոնֆիգուրացիան՝ drush config:export
• Մինչ սկսելը commit արեք export‑ը version control‑ում
• Միգրացիայի ընթացքում անջատեք CSS/JS aggregation‑ը (Admin → Performance)
• Վերցրեք տվյալների բազայի dump՝ drush sql:dump > pre-migration.sql
• Համոզվեք, որ ձեր deployment pipeline‑ը կարող է տեղափոխել կոնֆիգուրացիայի փոփոխությունները staging/production

5 GLightbox-ի տեղադրում և ակտիվացում Drupal-ում

5.1 GLightbox JavaScript գրադարանի տեղադրում

Drupal GLightbox մոդուլը կախված է upstream GLightbox JS գրադարանից։ Գրադարանը տրամադրելու համար առկա են երկու աջակցվող եղանակներ։

Տարբերակ A — Composer + Asset Packagist (խորհուրդ է տրվում)

# Asset Packagist-ի ավելացում որպես repository (մեկ անգամ յուրաքանչյուր նախագծի համար)
composer config repositories.asset-packagist \
  composer https://asset-packagist.org

# Գրադարանի պահանջ
composer require oomphinc/composer-installers-extender
composer require npm-asset/glightbox

Ավելացրեք կամ հաստատեք npm-asset-ի installer ուղին ձեր composer.json-ի extra.installer-paths բաժնում։

"extra": {
  "installer-types": ["npm-asset", "bower-asset"],
  "installer-paths": {
    "web/libraries/{$name}": [
      "type:drupal-library",
      "type:npm-asset",
      "type:bower-asset"
    ]
  }
}

composer install-ը գործարկելուց հետո գրադարանը կտեղադրվի web/libraries/glightbox/ ուղու ներքո։

Տարբերակ B — Ձեռքով տեղադրում

Ներբեռնեք վերջին թողարկումը GLightbox GitHub releases էջից և տեղադրեք բովանդակությունը այնպես, որ գոյություն ունենան հետևյալ ուղիները։

web/libraries/glightbox/dist/js/glightbox.min.js
web/libraries/glightbox/dist/css/glightbox.min.css

5.2 GLightbox Drupal մոդուլի տեղադրում և ակտիվացում

# Մոդուլի ներբեռնում
composer require drupal/glightbox

# Ակտիվացում
drush en glightbox -y

# Cache-ի մաքրում
drush cr

Այցելեք Admin → Configuration → Media → GLightbox, որպեսզի հաստատեք գրադարանի հայտնաբերումն ու ուսումնասիրեք գլոբալ կարգավորումները։

6 Colorbox-ի ֆունկցիոնալության փոխարինում

6.1 Պատկերային դաշտեր

Սա Colorbox-ի օգտագործման ամենատարածված սցենարն է․ content type‑ում տեղադրված image դաշտ, որը ցուցադրում է thumbnail և բացում է ամբողջական չափի պատկերը lightbox-ի մեջ։

1. Գնացեք Structure → Content Types → [Ձեր տեսակը] → Manage display։
2. Գտեք image դաշտը։ Format բացվող ցանկում փոխեք Colorbox-ը GLightbox-ի։
3. Սեղմեք կարգավորումների նշանը (⚙) formatter-ը կարգավորելու համար։ Սահմանեք Image style-ը (էջում ցուցադրվող thumbnail-ը) և Linked image style-ը (lightbox-ում բացվող պատկերը)։ Ցանկության դեպքում ակտիվացրեք caption-ները։
4. Պահպանեք ցուցադրման կարգավորումները և մաքրեք cache‑ը՝ drush cr։

Այս կոնֆիգուրացիան կարելի է նաև արտահանել և կիրառել YAML-ի միջոցով։ Ստորև բերված է field formatter-ի օրինակ content type-ի view display YAML‑ում։

# core.entity_view_display.node.article.default.yml (հատված)
dependencies:
  module:
    - glightbox
    - image
content:
  field_image:
    type: glightbox
    label: hidden
    settings:
      image_style: medium
      image_link: ''
      glightbox_image_style: large
      glightbox_gallery: ''
      glightbox_caption: title
      glightbox_caption_custom: ''
    third_party_settings: {  }

6.2 Media և պատկերասրահներ

Եթե կայքը օգտագործում է Drupal-ի Media համակարգը, քայլերը նման են, բայց կիրառվում են Media type display mode‑երի վրա։

• Այցելեք Structure → Media types → [Տեսակ] → Manage display։
• Փոխեք image source դաշտի formatter‑ը Colorbox-ից GLightbox-ի։
• Պատկերասրահների խմբավորման համար կարգավորեք Gallery ID դաշտը GLightbox formatter-ի կարգավորումներում։ Նույն Gallery ID‑ն ունեցող բոլոր տարրերը lightbox-ում կբացվեն որպես մեկ խումբ։ Սա ուղղակիորեն համապատասխանում է GLightbox‑ի բնիկ data-gallery ատրիբուտին։

Caption‑ների քարտեզավորումը պարզ է․ GLightbox‑ը կարդում է data-description ատրիբուտը։ Drupal մոդուլը թույլ է տալիս այն կապել պատկերի title կամ alt ատրիբուտի, կամ custom դաշտի արժեքի հետ։

6.3 Views ինտեգրում

Եթե Views‑երը ցուցադրում են պատկերներ Colorbox formatter‑ով, յուրաքանչյուր View‑ի համար կատարեք հետևյալ քայլերը։

1. Բացեք View‑ը՝ Structure → Views → [View անուն] → Edit։
2. Fields բաժնում սեղմեք image դաշտի վրա։ Formatter ցանկում փոխեք Colorbox-ը GLightbox-ի։
3. Եթե Colorbox‑ը կիրառված էր Format մակարդակում (օրինակ՝ «Colorbox» format plugin), փոխեք այն սովորական format-ով, ինչպես Unformatted list կամ Grid, և կիրառեք GLightbox formatter-ը դաշտի մակարդակում։
4. Պահպանեք փոփոխությունները և մաքրեք cache‑ը։

7 Colorbox-ի անվտանգ հեռացում

Երբ բոլոր formatter‑ները և custom կոդը միգրացված են, կարող եք անվտանգ հեռացնել Colorbox‑ը։ Խուսափելու համար կախվածությունների սխալներից՝ հետևեք ստորև նշված հերթականությանը։

1. Անջատեք Colorbox մոդուլը։ Մինչ uninstall անելը մոդուլի անջատումը թույլ է տալիս Drupal‑ին կատարել իր hook_uninstall() մաքրման գործընթացը։

   drush pm:uninstall colorbox -y

2. Հեռացրեք composer.json‑ից։

   composer remove drupal/colorbox

3. Հեռացրեք Colorbox JS գրադարանը web/libraries/colorbox/ ուղուց, եթե այն տեղադրված էր ձեռքով։
4. Մաքրեք custom կոդը։ Որոնեք և հեռացրեք Colorbox‑ին վերաբերող բոլոր մնացորդները՝ CSS դասեր (.colorbox, .colorbox-load), JavaScript behavior‑ներ (Drupal.behaviors.colorbox) կամ գրադարանի կցումներ (colorbox/colorbox)։

5. Մաքրեք բոլոր cache‑երը և արտահերթեք կոնֆիգուրացիան։

   drush cr
   drush config:export

8 Անհատականացում և ընդլայնումներ

8.1 GLightbox-ի կարգավորման ընտրանքներ

GLightbox-ի գլոբալ կարգավորումների էջը (Admin → Configuration → Media → GLightbox) բացահայտում է ամենահաճախ պահանջվող ընտրանքները։ Դրանք ուղղակիորեն համապատասխանում են GLightbox-ի JavaScript API-ին։

8.2 Թեմավորում և ոճավորում

GLightbox-ը ներառում է լռելյայն ոճաթերթ (glightbox.min.css), որը ապահովում է մաքուր մուգ overlay դիզայն։ Այն կարելի է override անել ձեր թեմայում՝ չփոփոխելով գրադարանի ֆայլը։

/* mytheme/css/glightbox-overrides.css */

/* Overlay-ի ֆոնի փոփոխություն */
.glightbox-clean .goverlay {
  background: rgba(0, 0, 0, 0.92);
}

/* Caption հատվածի ոճավորում */
.glightbox-clean .gdesc-inner {
  font-family: inherit;
  font-size: 0.9rem;
  color: #f0f0f0;
  padding: 12px 16px;
}

/* Նավիգացիոն սլաքների մեծացում */
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  width: 48px;
  height: 48px;
}

/* Լուսավոր ռեժիմ */
@media (prefers-color-scheme: light) {
  .glightbox-clean .goverlay {
    background: rgba(255, 255, 255, 0.95);
  }
  .glightbox-clean .gdesc-inner {
    color: #1a1a1a;
  }
}

Կցեք override ոճաթերթը ձեր թեմայի .libraries.yml ֆայլում։

# mytheme.libraries.yml
glightbox-overrides:
  version: VERSION
  css:
    theme:
      css/glightbox-overrides.css: {}
  dependencies:
    - glightbox/glightbox

Այնուհետև կցեք այն գլոբալ՝ mytheme.info.yml-ում։

# mytheme.info.yml (հատված)
libraries:
  - mytheme/glightbox-overrides

8.3 Առաջադեմ օգտագործման սցենարներ

Ծրագրային կցում #attached-ի միջոցով

GLightbox գրադարանը կարող եք կցել ցանկացած render array-ին custom մոդուլում կամ preprocess hook-ում։

// preprocess ֆունկցիայի կամ custom block build()-ի ներսում
$build['#attached']['library'][] = 'glightbox/glightbox';

// Կարգավորումների փոխանցում JS settings-ին
$build['#attached']['drupalSettings']['glightbox'] = [
  'animation'  => 'fade',
  'loop'       => TRUE,
  'touchNavigation' => TRUE,
];

Custom trigger-ներ Twig template-ներում

GLightbox trigger-ը ձեռքով ստեղծելու համար Twig template-ում ավելացրեք անհրաժեշտ ատրիբուտները։ GLightbox-ը ակտիվանում է ցանկացած տարրի վրա, որն ունի class="glightbox" (կամ ձեր սահմանած selector-ը)։

{# Մեկ պատկերի բացում #}
<a href="{{ file_url(node.field_hero_image.entity.uri.value) }}"
   class="glightbox"
   data-title="{{ node.label }}"
   data-description="{{ node.field_caption.value }}">
  {{ content.field_hero_image }}
</a>

{# Պատկերասրահ — նույն data-gallery ունեցող տարրերը բացվում են միասին #}
{% for item in node.field_gallery %}
  <a href="{{ file_url(item.entity.uri.value) }}"
     class="glightbox"
     data-gallery="gallery-{{ node.id }}"
     data-description="{{ item.alt }}">
    <img src="{{ file_url(item.entity.uri.value) | image_style('thumbnail') }}"
         alt="{{ item.alt }}" />
  </a>
{% endfor %}

Drupal behavior՝ custom initialization-ի համար

Եթե անհրաժեշտ է GLightbox-ը initialize անել այնպիսի ընտրանքներով, որոնք մոդուլի admin UI-ն չի տրամադրում, կարող եք օգտագործել custom Drupal behavior։

// mytheme/js/glightbox-init.js
(function (Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.mythemeGlightbox = {
    attach(context, settings) {
      // Մեկ անգամ initialization յուրաքանչյուր context-ի համար
      const elements = context.querySelectorAll('.glightbox-custom:not(.glightbox-processed)');
      if (!elements.length) return;

      elements.forEach(el => el.classList.add('glightbox-processed'));

      const lightbox = GLightbox({
        selector: '.glightbox-custom',
        touchNavigation: true,
        loop: true,
        animation: 'fade',
        autoplayVideos: settings.glightbox?.autoplayVideos ?? true,
      });
    },
  };

}(Drupal, drupalSettings));

9 Թեստավորում և որակի ապահովում

Միգրացիան ավարտելուց հետո, նախքան production միջավայր deploy անելը, անցեք ստորև ներկայացված QA checklist‑ով։

Ֆունկցիոնալ թեստավորում

• Պատկերները սեղմելիս բացվում են lightbox-ում բոլոր համապատասխան content type‑երում
• Պատկերասրահի նավիգացիան (նախորդ/հաջորդ սլաքներ, ստեղնաշարի սլաքներ) աշխատում է ճիշտ
• Caption‑ները ցուցադրվում են և համապատասխանում են ակնկալվող դաշտերին
• Վիդեո տարրերը (YouTube, Vimeo, տեղական) ավտոմատ նվագարկվում և ճիշտ փակվում են
• Lightbox‑ի փակումը (✕ կոճակ, Escape ստեղն, արտաքին սեղմում) վերականգնում է ֆոկուսը

Խաչաձև բրաուզերային թեստավորում

• Chrome/Edge (Chromium), Firefox, Safari (macOS և iOS)
• Ստուգեք, որ CSS անցումները ճիշտ են render արվում բոլոր փորձարկված բրաուզերներում

Մոբայլ և touch թեստավորում

• Ձախ/աջ swipe՝ պատկերասրահում նավիգացիայի համար
• Pinch‑to‑zoom պատկերների վրա (եթե ակտիվացված է)
• Overlay‑ը ճիշտ կերպով ծածկում է viewport‑ը փոքր էկրաններում

Մատչելիության ստուգումներ

• Tab ստեղնը շրջում է lightbox‑ի կառավարման տարրերով (փակել, նախորդ, հաջորդ)
• Lightbox‑ի փակվելուց հետո ֆոկուսը վերադառնում է trigger տարրին
• Screen reader‑ը հայտարարում է dialog‑ը և դրա բովանդակությունը (փորձարկեք NVDA կամ VoiceOver‑ով)
• Գործարկեք axe DevTools կամ Lighthouse accessibility audit — թիրախավորեք զրո critical սխալներ

Կատարողականություն

• Վերաակտիվացրեք CSS/JS aggregation‑ը և ստուգեք, որ GLightbox‑ը դեռ ճիշտ է initialize լինում
• Գործարկեք Lighthouse performance audit և համեմատեք արդյունքները Colorbox baseline‑ի հետ
• Համոզվեք, որ JavaScript console‑ում չկան սխալներ որևէ փորձարկված էջում

10 Տարածված խնդիրներ և խնդիրների լուծում

Պատկերները չեն բացվում lightbox-ում

Ախտանիշ․ Պատկերի վրա սեղմելիս տեղի է ունենում անցում դեպի հղման URL-ը, այլ ոչ թե բացվում է GLightbox-ը։

• Ստուգեք, որ GLightbox գրադարանը բեռնվում է․ բացեք browser DevTools → Network ներդիրը և ֆիլտրեք ըստ glightbox։ Եթե այն բացակայում է, ստուգեք, որ ֆայլերը գոյություն ունեն web/libraries/glightbox/dist/ ուղում։
• Համոզվեք, որ CSS/JS aggregation‑ը ճիշտ է աշխատում։ Խնդիրը մեկուսացնելու համար փորձեք ժամանակավորապես անջատել այն։
• Ստուգեք render արված HTML‑ը՝ համոզվելու համար, որ trigger տարրն ունի class="glightbox" ատրիբուտը (կամ ձեր սահմանած custom selector-ը)։

Բացակա caption-ներ կամ խափանված պատկերասրահներ

Ախտանիշ․ Caption‑ները դատարկ են, կամ պատկերասրահի նավիգացիան բաց է թողնում որոշ տարրեր։

• Ստուգեք render արված <a> թեգերը․ համոզվեք, որ data-description-ը լցված է, իսկ data-gallery արժեքները նույնն են խմբավորված տարրերի համար։
• Ստուգեք, որ Caption source formatter-ի կարգավորումը ուղղված է ոչ դատարկ դաշտի։
• Պատկերասրահների խմբավորման համար համոզվեք, որ gallery ID-ը կայուն է․ token-ով գեներացված ID‑ները կարող են վերադարձնել դատարկ արժեք, եթե Token մոդուլը տեղադրված չէ։

Կոնֆլիկտներ այլ JS գրադարանների հետ

Ախտանիշ․ GLightbox‑ը մասամբ է initialize լինում կամ console‑ում հայտնվում են սխալներ։

• Ստուգեք GLightbox գրադարանի կրկնակի բեռնումները (մոդուլից և թեմայից ձեռքով կցում)։
• Համոզվեք, որ որևէ այլ գրադարան չի վերագրում window.GLightbox-ը։
• Եթե թեման օգտագործում է JS bundler, ստուգեք, որ GLightbox‑ը առանձին չի bundle‑վում՝ զուգահեռ Drupal‑ի asset համակարգի հետ։

Cache և aggregation խնդիրներ

Ախտանիշ․ GLightbox‑ը աշխատում է development միջավայրում, բայց խափանվում է production‑ում։

• Production‑ում deploy-ից հետո գործարկեք drush cr։
• Համոզվեք, որ web/libraries/glightbox/ թղթապանակը commit կամ deploy է արված։ Այն երբեմն դուրս է մնում .gitignore-ի պատճառով։ CI/CD pipeline‑ում օգտագործեք composer install --no-dev։
• Եթե CSS aggregation‑ը կոտրում է selector specificity‑ն, ավելացրեք override CSS ֆայլը asset բեռնման հերթականության վերջում։

# Production-ում cache-ի մաքրում (եթե Drush-ը հասանելի է)
drush @prod cr

# Գրադարանի ֆայլի ստուգում
ls web/libraries/glightbox/dist/js/glightbox.min.js

11 Եզրակացություն

Colorbox‑ից GLightbox միգրացիան նշանակալի frontend արդիականացում է ցանկացած Drupal նախագծի համար։ Օգուտները տեսանելի են։

• jQuery runtime կախվածության վերացում lightbox շղթայից
• Ավելի արագ և թեթև փորձառություն ձեր այցելողների համար
• Մատչելիության համապատասխանություն առանց custom լուծումների
• Համապատասխանություն Drupal core‑ի vanilla JavaScript ուղղությանը
• Երկարաժամկետ սպասարկման բեռի նվազում՝ ակտիվ զարգացվող գրադարանով

Միգրացիան ցածր ռիսկ ունի, եթե այն կատարվում է մեթոդական մոտեցմամբ․ նախ աուդիտ, ապա formatter‑ների փուլային փոխարինում, հին կոդի մաքրում և մանրակրկիտ թեստավորում։ glightbox Drupal մոդուլը գործընթացի մեծ մասը դարձնում է դեկլարատիվ՝ admin UI‑ի կարգավորումների միջոցով։

Եթե կայքը անցնում է ավելի լայն frontend արդիականացման (decoupled/headless ճարտարապետություն, ժամանակակից թեմա՝ Olivero, Gin, կամ custom design system), Colorbox‑ի փոխարինումը GLightbox‑ով հիանալի առաջին քայլ է՝ արագ տեսանելի արդյունքներով և նվազագույն ռիսկով։