Как обновить sh страницу / всплывающее содержимое при открытии всплывающего окна? - PullRequest
Новая
       19

Как обновить sh страницу / всплывающее содержимое при открытии всплывающего окна?

0 голосов
/ 09 марта 2020

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

https://community.shopify.com/c/Shopify-Discussion/Why-does-this-code-fail-to-work-when-being-called ...

Пожалуйста, Проверьте ссылку, чтобы понять, какая у меня проблема.

Итак, для начала я использую вставку фотографий Google, которая связана с альбомом фотографий Google. Я планирую использовать это для всех моих продуктов и разрешить людям размещать там собственные изображения продукта и добавлять эти изображения в фотогалерею для просмотра другими клиентами. Единственная проблема заключается в том, что вставка фотографий Google не работает правильно. Как показано в моем предыдущем вопросе, вставка фотографий Google при открытии во всплывающем окне не работает, и всплывающее окно работает только тогда, когда я быстро открываю всплывающее окно «до завершения загрузки страницы». Ниже приведены примеры изображений того, как работает всплывающее окно.

Всплывающее окно перед открытием ...

Всплывающее окно открыто, но не работает ...

Открытое и работающее всплывающее окно (только при быстром открытии до завершения загрузки страницы)

Хотя это так, когда я закрываю всплывающее окно и снова открываю его, оно снова разрывается. Это привело меня к тому, что я смогу заставить эту всплывающую фотогалерею работать, если все полностью обновлено по команде кого-то, открывающего всплывающее окно, и все обновляется, не закрывая всплывающее окно.

Ниже приведены коды, используемые для моего всплывающего окна ... Я использую всплывающее окно magnifi c, созданное Дмитрием Семеновым

html Код кнопки всплывающего окна 

<a class="btn size-chart-open-popup" href="#Image-Gallery">See Image Gallery</a>


<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;"> 
      



<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/fdDmX5CQnCpPkrm98"
  data-title="Greek Key Ring"
  data-description="13 new photos added to shared album">
  <object data="https://lh3.googleusercontent.com/0qLN_Xu5BgFic25TVrUA-SVNOFM6QW2llhbiLySb7bbWTs-3pYwZi0OLelVcj17qr6rHlUn1Rt4e4f3sT5g3mZjqu2j2ta2waz2LUL9Nu9s7RURpREMbmDiYMb6u6kUMKwWq7i6VNA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/zSn5SD3eiBIVbFoWnIYJfythDg-YdqvZRwUcKCO_0A5jerwYWUf2QvP0IANQwpUt75xLWiWw6Is8uiIDmwD_y6tXPs7aSaMCfcZSOCVP-PtkZoQbDugp7AszENZyN--c3wBhGO7pjA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Y7lISOdW_2v6VKE0F_XebMEUk8NHwxbP9tn1tJ8p7BcJ__EY0MnN0D_lETofiawnbCwkashQfYzsamKHTY3758sPqAUU3pw6m8JvmWQzO9sBLnqRsxUKW-ayN2qoUVYKM1uhm37XPA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/wP7Hll5v4JkG9Yx91t8A0pGoz1wbJKdWl3M92dhPM9CMdF-_akiYWZVBaLA1SqzFQ8d3sw65mmPwPy-jK8fJ2hqIxiBf1bXjOdHXuV6JK8bAikkyUEF6_1BTZd45OcS05atsGgAiFw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/OEBngfjcxmFqR_lxkt5beaWwZoHUc2OiEei_Kx7d9ZCR3RjQUZfr2pGMsuvRwKOiVTyxMYmpaQZnL90yRHW2K7DMrcTFVn3XI_vu_x6N9AHmnhFAUW44CyILj_jaWQGd_-Tuc8Lo3Q=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/K6ki8d0DUnqjM81A4DKmxroDgBhLTCvkqjNM9d-FuDh1sIKoc7Tg0DUP2LSLToXXVwd4On9lP5aewYvDFexOWh_w36ViVMPBy4a_BfpISDwYl10mvnlBYwhEGyaCXcS4OvgIQ_SRJw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/q0eMcSq0N86KVHDd9HRBNFzblmX8Fq77-uhKJnClTd7fEvGozbQztgKn9FMUvKGHwv1DhLz2_0Bi5w7qPQqja9Bi9xfrvJ-Eg2WELOifqdDkMWCuMG9NGKtAwCSlTnWB38tgaHTilQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/ocEey_fcol42_CR4XoCDJ6vMPKFW00nb8doIVjJ2GSE-grOjZwL026GWkWT9yGVvpwhy4i4C8Scg6x1NWuJKvzZJF_6vGZBPBgAV0xCPeDqmfOZdd86Wwi4boDoFBJsOfmfL3DOSmQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/wJmh9xRpfKnRRgQUGoHPZTwlAo9Nagmuh7LMuYLALNp6ltA3T7OaWrjCTx8mV012MryBZJ-_sBb-aecvfpUeZDELPVHGNnN4-52bwZzSLjcMqBcHqSnEsz_hobP9NimsWxblooxmgQ=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/Dik1vkHNm7XZzV4dZCJI7uBOUzr3cQm9RfiEzOwYBMqy26kVitK2nePTqI0_iL_h1w5rA9TSxFjavjiypS6Wu5dcU5MDyTC8Z1Ecv_M__EDB_4v5xxrqhku4N678PvB_3P9Wbifqcg=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/J9lLLYULC_2hJPY0dKjtdYZabUAw9HbCfV023smdOYCQO3WcevDqPp9xfOgSVbXg0Th62SOdgWszfhJBHWG6u_M9L_IF4vbaQ4iiH0mbOABOrwEXhTD4KuaHYAZcpnRbFeWevu58yw=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/e216NxNB6I8a9qcjhxUXc7INo5hk-m6MHER9ml2zuG37L00DlibNreOJwLg2suJFh1zpNJn0fC8IYRyxkgirxA_vFUjiMjTcG3xW29vZ1v-Mi-m3dNpS_wK_XJi63ncNhkbrp2raBA=w1920-h1080"></object>
  <object data="https://lh3.googleusercontent.com/KbA0w_-CJ9Rtzi4X3NXLCUJCtMGjG8F8eUB15MbIRpByjPhFWguyl3yPwTh3JJYsY5eeCWlMnhYUQ-v1_VN63KDT90A_dvMztRqPliPxepJFhOU6z9Na11OrXVxVyBBTKdzi30vF0A=w1920-h1080"></object>
</div>



    

  </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>
  
      .gallerycolumn {
  float: left;
}

.galleryleft {
  width: 75%;
  float: left;
}

.galleryright {
  width: 25%;
  float: right;
}
  

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

  max-width: auto;
  margin-left: auto;
  margin-right: auto;
  
  
}
</style>



<style>

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="galleryright"] {
    width: 100%;
    float: none;
  }
  
  [class*="galleryleft"] {
    width: 100%;
    float: none;
  }
  
}
  
</style>

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

С уважением

...