minishop2 Картинка товара в fotorama
Всем доброго времени суток, очень часто при открытии карточки товара, с фоторамой происходит что-то непонятное.
После обновления страницы, все приходит в норму
Почему фоторама скукоживается до маленьких размеров?
Причем если я буду много раз жать обновить страницу, то 1-2 раза и 10 будет такая проблема.
Ошибок в консоле не возникает. Может у кого нибудь была подобная проблема, как решилась?
После обновления страницы, все приходит в норму
Почему фоторама скукоживается до маленьких размеров?
Причем если я буду много раз жать обновить страницу, то 1-2 раза и 10 будет такая проблема.
Ошибок в консоле не возникает. Может у кого нибудь была подобная проблема, как решилась?
21 августа 2017, 11:20
Комментарии: 37
Хз склько кода показать)
В чанке товара как обычно:
В чанке товара как обычно:
<div class="no-margin col-xs-12 col-sm-6 col-md-5 gallery-holder">
[[!msGallery]]
</div><!-- /.gallery-holder --><div id="msGallery">
{if $files?}
<div class="fotorama"
data-nav="thumbs"
data-thumbheight="45"
data-allowfullscreen="true"
data-swipe="true"
data-maxwidth="350"
data-maxheight="400"
data-autoplay="5000">
{foreach $files as $file}
<a href="{$file['medium2x']}" alt="[[+pagetitle]]" title="[[+pagetitle]]" target="_blank">
<img src="{$file['small']}" alt="[[+pagetitle]]" title="[[+pagetitle]]">
</a>
{/foreach}
</div>
{else}
<img src="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium.jpg'}"
srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium2x.jpg'} 2x"
alt="" title=""/>
{/if}
</div>
Попробуйте так
<div id="msGallery">
{if $files?}
<div class="fotorama"
data-nav="thumbs"
data-thumbheight="45"
data-allowfullscreen="true"
data-swipe="true"
data-ratio="800/600"
data-autoplay="5000"
data-fit="scaledown">
{foreach $files as $file}
<a href="{$file['medium2x']}" alt="[[+pagetitle]]" title="[[+pagetitle]]" target="_blank">
<img src="{$file['small']}" alt="[[+pagetitle]]" title="[[+pagetitle]]">
</a>
{/foreach}
</div>
{else}
<img src="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium.jpg'}"
srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium2x.jpg'} 2x"
alt="" title=""/>
{/if}
</div>
Мне тоже помогло добавление 100% ширины. Проверял раз 30-40, без проблем.
<div id="msGallery">
{if $files?}
<div class="fotorama"
data-nav="thumbs"
data-thumbheight="45"
data-allowfullscreen="true"
data-swipe="true"
data-width="100%"
data-autoplay="5000">
{foreach $files as $file}
<a href="{$file['url']}" target="_blank">
<img src="{$file['small']}" alt="" title="">
</a>
{/foreach}
</div>
{else}
<img src="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium.png'}"
srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium@2x.png'} 2x"
alt="" title=""/>
{/if}
</div>
Попробуйте ленивую загрузку fotorama.io/customize/lazy-load/
<div id="msGallery">
{if $files?}
<div class="fotorama"
data-nav="thumbs"
data-thumbheight="45"
data-allowfullscreen="true"
data-swipe="true"
data-maxwidth="350"
data-maxheight="400"
data-autoplay="5000">
{foreach $files as $file}
<a href="{$file['medium2x']}" alt="[[+pagetitle]]" title="[[+pagetitle]]" data-img="{$file['small']}">
</a>
{/foreach}
</div>
{else}
<img src="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium.jpg'}"
srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium2x.jpg'} 2x"
alt="" title=""/>
{/if}
</div>
Скорее всего связано с мобильными условиями. У фоторамы свои правила для мобильных, они вшиты в фоторамные стили, а стили эти подгружаются только на тех страницах, где Вы вызываете фотораму, то бишь на странице товара. Перейдя со страницы списка товаров на одиночку, будет задержка в подгрузке стилей, а если вы уже были на странице одиночки, то кеш кеш кеш помогает применить эти стили мгновенно. Вот и вся причина!
попробуй сделать так, изменить метод initialize
miniShop2.Gallery = {
setup: function () {
miniShop2.Gallery.gallery = $('#msGallery');
miniShop2.Gallery.files = miniShop2.Gallery.gallery.find('.fotorama');
},
initialize: function () {
miniShop2.Gallery.setup();
if (miniShop2.Gallery.files.length) {
if (typeof jQuery.Fotorama != 'function') {
$('<link/>', {
rel: 'stylesheet',
type: 'text/css',
href: miniShop2Config.cssUrl + 'lib/fotorama.min.css',
}).appendTo('head');
$('<script/>', {
type: 'text/javascript',
src: miniShop2Config.jsUrl + 'lib/fotorama.min.js',
}).appendTo('head');
}
if (!miniShop2.Gallery.files.data('fotorama')) {
miniShop2.Gallery.files.fotorama();
}
}
}
};
ну и плюсанул бы...))
Как решить? Смотреть, что тормозит общую загрузку, например здесь — tools.pingdom.com/
Скорее всего фоторама грузится самой последней.
На край отключить выборочное подключение фоторамы и сделать постоянным.
По сути когда я прочитал, что в минишопе2 сделано выборочное подключение, премного удивился, вещь малополезная мне кажется… Так-то навскидку даже не могу сказать, где еще в каких ЦМС немаленькие скрипты грузятся выборочно.
А вообще фоторама 4 июля объявила, что больше не развивается)))
Как решить? Смотреть, что тормозит общую загрузку, например здесь — tools.pingdom.com/
Скорее всего фоторама грузится самой последней.
На край отключить выборочное подключение фоторамы и сделать постоянным.
По сути когда я прочитал, что в минишопе2 сделано выборочное подключение, премного удивился, вещь малополезная мне кажется… Так-то навскидку даже не могу сказать, где еще в каких ЦМС немаленькие скрипты грузятся выборочно.
А вообще фоторама 4 июля объявила, что больше не развивается)))
Добрый день!
Не пойму в чем ошибка… Нужно миниатюрки расположить слева, не получается.
Не пойму в чем ошибка… Нужно миниатюрки расположить слева, не получается.
<div id="msGallery">
{if $files?}
<div class="fotorama"
data-nav="thumbs"
data-vertical="true"
data-navposition="left"
data-thumbheight="45"
data-allowfullscreen="true"
data-swipe="true"
data-autoplay="5000">
{foreach $files as $file}
<a href="{$file['url']}" target="_blank">
<img src="{$file['small']}" alt="" title="">
</a>
{/foreach}
</div>
{else}
<img src="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium.png'}"
srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium@2x.png'} 2x"
alt="" title=""/>
{/if}
</div>
почему? в документации прописано, что если сделать слайдер вертикальным, то можно.
Вот здесь пример как они делают миниатюры справа. www.apsolyamov.ru/blog/jquery_slider_galereja_fotorama/2013-11-11-139
Но в modx я делаю те же настройки и не работает даже их пример
Вот здесь пример как они делают миниатюры справа. www.apsolyamov.ru/blog/jquery_slider_galereja_fotorama/2013-11-11-139
Но в modx я делаю те же настройки и не работает даже их пример
Потому что в примере старая версия фоторамы. В новой версии (которая в галерее) этих параметров нет — Full list of options. Если необходимо, то скачивайте файлы из примеров и заменяйте подключаемые скрипты компонента.
Прошу прощения за оффтоп, но Fotorama больше не поддерживается. Об этом даже сообщается на всех страницах проекта
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| miniShop2 | 4.4.0-pl от 06.08.2024 | 26 090 |
| QuickView | 2.2.2-beta от 19.10.2023 | 1 207 |
16 ноября 2024, 21:12
Спасибо. Работает.
16 ноября 2024, 20:54
Владимир, добрый день!
Есть возможность добавить в модуль функцию отмены заказа?
Т.е. если в админке магазине поставили статус Отменен, чтобы в Ти...
15 ноября 2024, 17:40
спасибо, несколько раз проверял и не заметил)
14 ноября 2024, 13:55
Сложна.
Я сделал с помощью js. Задал class для div c results
и вот так прописал
document.querySelector('.easycomm div').textContent = 'Отзывов пок...
14 ноября 2024, 11:50
Добрый день! Установил MarkdownEditorFrontend с modstore и xpdo выдало ошибку что не может найти сервис. К моему удивлению в транспортном пакете не на...
14 ноября 2024, 05:22
astro.build впервые слышу такой фреймворк. Вообще gtsAPI затачивался под primevue.org. Но в primevue вообще не никакой связи с api. Там api как хочешь...
13 ноября 2024, 10:55
Не все пожелания клиента нужно реализовывать. Одно дело когда желание обосновано бизнес-процессами, а другое дело клиент так видит. В данном случае, н...
