Я использую несколько галерей продуктов Cloudinary на странице (см. эту страницу ). Эти галереи продуктов разделены на группы, которые следуют друг за другом в HTML. (так что все галереи разделены на несколько <div> разделов). Мне нужно встроить страницу, содержащую эти галереи, на другую страницу (скажем, через <iframe>). Но тогда мне нужно показать только одну группу галерей одновременно и дать пользователю возможность перемещаться по ним.
Переход к сути : мне нужно загрузить всю страницу, содержащую эти галереи а затем скройте их все, кроме одного (например, используя visibility: hidden или display: none. Проблема в том, что таким образом контейнеры галерей (к которым мы применяем методы библиотеки Cloudinary) не отображаются в DOM, что вызывает эту ошибку:
Uncaught (in promise) Error: Element is probably not rendered to the DOM - something with your layout or CSS definition
at e.<anonymous> (all.js:23)
at all.js:23
at Object.next (all.js:23)
at o (all.js:23)
Таким образом, вы не можете создать галерею в контейнере с помощью display: none. Есть ли способ избежать этого?
UPD: @AditiMadan поделился идеальным пример: https://jsfiddle.net/aditimadan/f54zLxgc/1/ (пожалуйста, посмотрите на ошибки в консоли и добавьте строку, чтобы установить display: auto в обе галереи после их запуска. Вы увидите, о чем я говорю )