minishop2 Картинка товара в fotorama

Всем доброго времени суток, очень часто при открытии карточки товара, с фоторамой происходит что-то непонятное.

После обновления страницы, все приходит в норму

Почему фоторама скукоживается до маленьких размеров?
Причем если я буду много раз жать обновить страницу, то 1-2 раза и 10 будет такая проблема.
Ошибок в консоле не возникает. Может у кого нибудь была подобная проблема, как решилась?

Evgeny

21 августа 2017, 11:20

5 621

Комментарии: 37

Roman

21 августа 2017, 14:31

Можете предоставить на обозрение
чанк вывода галлереи?

Evgeny

21 августа 2017, 14:36

Хз склько кода показать)
В чанке товара как обычно:

<div class="no-margin col-xs-12 col-sm-6 col-md-5 gallery-holder">
               
            [[!msGallery]]
           </div><!-- /.gallery-holder -->

Вот чанк msGallery:

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

Мне кажется былоб что-то не так, косяк был бы выезде и всегда, а тут оно редко, но возникает, на мобильных устройствах и на компе

pompa94

21 августа 2017, 14:36

Через стандартный tpl.msGallery такая же проблема

Evgeny

21 августа 2017, 14:39

у меня как раз стандартный msGallery, дописал только максимальный размер картинок, но проблема с самого начала.

Roman

21 августа 2017, 14:43

Попробуйте так

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

Evgeny

21 августа 2017, 14:52

Не помогло, тыкал разные товары… все было ок… потом еще раз открываю один из товаров где было норм… и опа… опять маленькая(

Roman

21 августа 2017, 14:55

Кэш сайта и кэш браузера пробовали почистить?

pompa94

21 августа 2017, 14:55

data-width="100%"

поставил и, вроде, всё нормльно

artem-makarchuk

10 марта 2018, 17:03

Мне тоже помогло добавление 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>

Roman

30 августа 2017, 15:42

Попробуйте ленивую загрузку 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>

Evgeny

21 августа 2017, 15:22

Какой можете посоветовать слайдер взамен фотораме?

pompa94

21 августа 2017, 15:41

flexslider

Kirill A. Rusanov

21 августа 2017, 19:41

Все проще. Ширину картинки 100% в стилях выставите

Evgeny

29 августа 2017, 16:36

Не помогло, все так же редко изредка проявляется этот эффект

~~Сергей~~

29 августа 2017, 22:49

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

Evgeny

30 августа 2017, 09:15

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

Володя

30 августа 2017, 09:55

попробуй сделать так, изменить метод 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();
                }
            }
        }
    };

Володя

30 августа 2017, 09:56

ну и если это не поможет, то подключи еще стили и скрипты фоторамы самостоятельно на странице

~~Сергей~~

30 августа 2017, 09:56

с языка снял

Володя

30 августа 2017, 09:57

вот тут можно потестить quickview.vgrish.ru/?QuickView=id|3

Evgeny

30 августа 2017, 11:03

Спасибо, заменил, понаблюдаю как теперь будет себя вести фоторама, а то я вчера на копии уже начал переводить на flexslider…

Evgeny

30 августа 2017, 13:41

Не помогло ( так и остается в каком-то уменьшенном виде( причом все стили подключены… все как надо… фоторама полностью функциональна… но уменьшена

~~Сергей~~

30 августа 2017, 09:56

ну и плюсанул бы...))
Как решить? Смотреть, что тормозит общую загрузку, например здесь — tools.pingdom.com/
Скорее всего фоторама грузится самой последней.
На край отключить выборочное подключение фоторамы и сделать постоянным.
По сути когда я прочитал, что в минишопе2 сделано выборочное подключение, премного удивился, вещь малополезная мне кажется… Так-то навскидку даже не могу сказать, где еще в каких ЦМС немаленькие скрипты грузятся выборочно.
А вообще фоторама 4 июля объявила, что больше не развивается)))

Evgeny

30 августа 2017, 14:01

ту дело даже не в выборчном подключении, передалал подключение, сразу прописал все пути, убрал инициализацию с минишопа… проблема не исчезла

~~Сергей~~

30 августа 2017, 14:58

тогда консоль файрбага должна что-то сказать, 200%

Evgeny

30 августа 2017, 16:17

кончилось у меня терпение с фоторамой… снес ее нафиг :)

Кирилл

30 октября 2017, 11:28

Подскажите. проблема так и не решилась??? У меня похожая, только не миниатюра выводится а просто пусто. после обновление все в норме

Evgeny

31 октября 2017, 09:09

пришлось отказаться от нее, поставил flexslider и забыл про проблемы

Кирилл

31 октября 2017, 12:32

вариант со стопроцентный шириной сработал после обновления кэша

Evgeny

31 октября 2017, 15:06

я чистил кэш… у меня проблема возникала не всегда… но она была…

Ника

02 февраля 2018, 13:00

Добрый день!
Не пойму в чем ошибка… Нужно миниатюрки расположить слева, не получается.

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

Андрей

02 февраля 2018, 13:07

Не пойму в чем ошибка… Нужно миниатюрки расположить слева, не получается.

В Fotorama нет возможности сделать миниатюры слева.

Ника

02 февраля 2018, 14:54

почему? в документации прописано, что если сделать слайдер вертикальным, то можно.
Вот здесь пример как они делают миниатюры справа. www.apsolyamov.ru/blog/jquery_slider_galereja_fotorama/2013-11-11-139

Но в modx я делаю те же настройки и не работает даже их пример

Андрей

02 февраля 2018, 15:00

Потому что в примере старая версия фоторамы. В новой версии (которая в галерее) этих параметров нет — Full list of options. Если необходимо, то скачивайте файлы из примеров и заменяйте подключаемые скрипты компонента.

Ника

02 февраля 2018, 16:33