Почему этот код не работает при вызове во всплывающем окне

Question

Я хотел, чтобы на страницах товаров моего магазина была кнопка галереи, которая открывает галерею изображений того товара, который они хотят купить. Единственная проблема заключается в том, что всплывающая кнопка не может загрузить контент, который я хочу показать по какой-то причине. Я знаю, что эти всплывающие окна работают, поскольку они успешно работают с загрузкой в ​​каркасные рамки моделей, как показано ниже.

Единственная проблема сейчас заключается в том, что всплывающая кнопка для моей галереи выполняет следующее, показанное ниже ...

В ходе многих испытаний я обнаружил, что встраивание фотогалереи будет работать только в том случае, если всплывающее окно быстро открывается до загрузки веб-страницы. Хотя это верно, как только всплывающее окно закрывается и снова открывается, оно снова разрушается. Ниже приведено изображение встраивания, работающего во всплывающем окне.

В ходе дополнительного тестирования я также проверил, может ли код работать внутри описания продукта мой магазин. При этом я обнаружил, что он может работать внутри описания продукта. См. Изображение ниже, показывающее, что он работает

зная все это, единственная проблема будет связана как с встраиванием фотографий Google, так и с всплывающий код и как они работают вместе. Коды всплывающих окон находятся по следующей ссылке. они сделаны dimsemenov.

Всплывающие коды, которые я использую

Я полагаю, в качестве предположения проблема заключается в том, что этот код для вставки представляет собой средство отображения фотографий Google, которое постоянно нуждается в быть обновленным и обновленным, поскольку это синхронизировано с фотографиями Google. Фактически я знаю, как кодируются мои всплывающие окна, они загружаются при загрузке страницы и не обновляются и не обновляются, а обновляются только при перезагрузке страницы. Я знаю это, потому что если я изменяю код внутри всплывающего окна, а затем после сохранения изменений открываю всплывающее окно, то изменения не отражаются внутри, пока я не обновлю sh всю страницу. Говоря об этом, хотя ... когда я открываю свой эскиз-фрейм iframe, на котором есть полоса загрузки, показывающая, как будто он загружается с сайта sketchfab, я не могу понять, если это проблема, почему мое встраивание фотографий не может сделать то же самое. Это только предположение, и я не уверен, является ли это причиной проблемы. Однако, если это проблема, есть способ решить эту проблему. ниже приведен код для вставки фотографий Google, использованный для одного из моих продуктов.

<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
<div class="pa-carousel-widget" style="width:100%; height:480px; display:none;"
  data-link="https://photos.app.goo.gl/KvdTmPLrewaZ4VvWA"
  data-title="Shirai Ryu"
  data-description="10 new photos added to shared album">
  <object data="https://lh3.googleusercontent.com/dDpV4uY9zN6x742KmOzaE5ZxDdJlU6TVD4NnhsyTIw6vFuhzLpxDGDGal3JvvsiGDGZyi7t2eeE4RwjbfvkNyf9Av8-yDSjXXs-Xtlm9CXkytft1CJg9ZN6XwCTy7xMd0ek0qrrXKA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/G8CDlUSGKAcJwbMNyVBPM8mfd6Iq6XlFP_3ryqhrNvolSPJYNckZwpCpmTfGatMGxtImKJTkQO_tBXAzFJQ2kgDtffMA8x7Dx-bE5GF12b7JuEkyUO7KvGJq7OvLk4hxtAJ3PaD1yw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Lt_cMOBt1Ua3bOTomjIQL4Rrldt3aGzKXvlVygFwSth5ObrkulhAhhSOnsZrgru4ac1_2ZQkAst-7NqZsyAHDnR7QHlYhptWVscK4pm5RKH22K3dZbr0eLdeU6nozBZl5jD-RfSTLQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/3Eh-1UUWg2Ny3flhQkUqbw9P8zO4_XzIfuyH0KmRNSz8JvX0pGdGYvhgs1r_LuFhPdJs9pmjAce2fyttsqLZVfC1pPtluRNPu1kmOc9VxwJnsPgXpnLdthyR1ckOmcjArDMep1VIKg=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/alnf2b0Ug47vNxihL-i_bxhV-H-o3fuHGS1F0LICzQjdejJwWF8kUPsZp0BjTKFfHhPAgPJau0khVpnTk5RaI8z1PDGO411-4BwHPTPEnAxRRhDT3MyW2IsmwxpTStCNoeS9upuiiw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/i-10hdpYEH6dZ-hAEMRUr2X-xNgFlIwK93bh0lb2Fc-9W15NFksRSEQePv3com6wUzCJt--x9rtbcLO35Ox7diPwT7lhbRKOL8-DD4KVdZDoC5BYJXbbxu-ADxAxY-T_nEUsz6Jh4A=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Zj9I78oiH12745U5sHJteoSap9KEL8pNrUIWfwtG1YspZ9taxcMbSRn2UCY-GbxqJn5h51yZIOpb708JqBV1eQuzwSxTNfCmNB9UJqZxJfehCgJ2Uo4RfF-RVctGxC4yrie93necMQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/1NNepe283WSYo_8pJX5sloiwcEy2uE8MMGi4V_bLHoMV-By19oX4XTmt6sVHFYyt7-2M3LInsXmyZmQ0RlQst3kiQmt2_fNU9cljFxJdPHJwYVr0NRY1aGsg0ky7H0RQ3YTfir8lSQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/7eoT9bKBkDDndxTHD6hDTydt9cd2G_Rl40Yy_r3m_PvQ8GB7w5lPLRQ7da8zNy4u2nU0UFgc2LSrSlO6o4qdAN6UmEkz7CsJ8lO-zVl_L5-bfSye3tItl0U4x1VBnV2yXEspbAxOBQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/uPt0BhapfibUCEaEg2X0Quk1C5cvCFYYst10CHcTNDb-NWlmr4rdt7aADO8jrQLrPONVb0vf8nMHxnhxcjmtd5NQlFESyacuifQTTexhHyh8N3RWDtCOP5xZNpl8t4cga8UcQpbRlg=w1920-h1080"></object>
</div>

Если вам поможет, то приведу еще один код, который просто показывает позицию, в которой я размещаю вставку в моем всплывающем окне. Это называется {{description_arr 1 }}, из моего описания продукта. Я использую Magnifi c Popup для своих всплывающих окон.

<div id="Image-Gallery" class="mfp-hide">


  <div class="row">
  <div class="gallerycolumn"></div>
  <div class="gallerycolumn"></div>
</div>


  <div class="row">
  <div class="galleryleft" style="background-color:#000000;"> 

 {{ description_arr[1] }}    





  </div>
  <div class="galleryright" style="background-color:#000000;">
    <div class="acerill-custom-form" data-form-id="ca3d163c-517f-4dda-8e8c-202a1cb2e3dc"></div>
<script type="text/javascript" src="https://custom-forms-client.acerill.com/js/custom-forms-v2.js"></script>
  </div>
</div>

</div>


<style>
#image-gallery {
  border: 0px #555 solid;
  background-color: #ffffff;

  max-width: auto;
  margin-left: auto;
  margin-right: auto;


}
</style>

Я очень ценю всю поддержку.

С уважением

Николас Мурдака