Форум ReadyScript — Всплывающее фото. Тема Современная.

Re: Всплывающее фото. Тема Современная.

null@example.com (Ярослав) — Sun, 13 May 2018 18:21:42 +0000

Отлично! Спасибо за инфомрацию. MagnificPopup тоже рассматривал, но он заказчику не понравился.

Re: Всплывающее фото. Тема Современная.

null@example.com (Александр) — Sun, 13 May 2018 12:31:59 +0000

Вот это прикол! Решил перейти на галерею magnific popup и обнаружил что она уже есть в системе! Прилепили в шаблоне две галереи. Как то не сходится с концепцией минимализма...
Убрал подключение JS и CSS от lightgallery, в theme.js в конце добавил

$(document).ready(function() {
        $('.product-gallery-full').magnificPopup({
            delegate: 'a',
            type: 'image',
            tLoading: 'Загрузка...',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1]
            },
        });
    });

В magnific popup все работает как нужно и нет ничего лишнего! Пункт 2 со стрелками не актуален т.к. если изображения имеют разные размеры то положение стрелки скачет.

Re: Всплывающее фото. Тема Современная.

null@example.com (Ярослав) — Sat, 12 May 2018 16:02:03 +0000

Заказчики много чего хотят и говорят. Мне вон наоборот говорят, что надо при клике закрывать фото.
А заказчика не смущает тот факт, что в инстаграм нельзя пролистать на следующее фото? Только выходить, выбрать фото списком и листать вниз?
От того, что фото не листается не будут уходить к конкуренту, если товар нормальный, контент нормальный. У меня куча примеров, когда люди сотнями делают заказы на абсолютно кошмарных сайтах. Да даже взять тот же Next, торгующий по всему миру. http://www.next.com.ru/ru даже не адаптивный.
Вариант 1.
На событие "Клик по слайду" вызывать метод "Следующий слайд":

var slider = $("#galerie2").lightGallery({
enableSwipe: false
});
$('#galerie2').on('onSlideClick.lg', function(event) {
slider.goToNextSlide();
})

Вариант 2. Просто увеличьте элемент стрелки lg-next, чтобы он закрывал бОльшую часть экрана и перекрывал фото. Тогда клик по фото вызовет следующий слайд.

Re: Всплывающее фото. Тема Современная.

null@example.com (Александр) — Sat, 12 May 2018 10:17:54 +0000

Ребят я по поводу юзабилити серьезно - заказчик то же самое сказал, нужен как минимум переход к следующему фото при клике. Меня очень удивило то, что в документации нет об этом ни слова. Типичная ситуация - разработчик своим творением не пользуется. Никто из типичных пользователей долго разбираться не будет - закроют сайт и уйдет к конкуренту. И посещаемость интернет-магазина останется низкой из-за плохой статистики и частых отказов.
Я сделал декомпрессию файла lightgallery-all.min.js и в строке 246 добавил по аналогии код

}), this.$outer.find(".lg-image").on("click.lg", function() {
    a.goToNextSlide()

Но он работает только для первого фото.

1. Как сделать чтобы переход к следующему изображению при клике работал для всех изображений?
2. Как запретить обновлять этот файл?

Re: Всплывающее фото. Тема Современная.

null@example.com (Александр) — Sat, 05 May 2018 08:54:17 +0000

Ярослав пишет:

http://sachinchoolur.github.io/lightGallery/docs/ Вот документашка, многие действия легко настраиваются.

Я там уже был, вы нашли как сделать переход на следующий слайд при клике по фото?

Re: Всплывающее фото. Тема Современная.

null@example.com (Ярослав) — Thu, 03 May 2018 07:35:50 +0000

FancyBox 2 уже устарел, много проблем с ним возникло на некоторых сайтах. А версия 3 для коммерческого использования платная (от 29 до 119 баксов).
Самое интересное, что как рас на скрипт LightBox из flatlines захотели перейти заказчики с fancybox)
Как говорится "на вкус и цвет все фломастеры разные". Поменять один на другой вопрос 5 минут.

http://sachinchoolur.github.io/lightGallery/docs/ Вот документашка, многие действия легко настраиваются.

Re: Всплывающее фото. Тема Современная.

null@example.com (Александр) — Mon, 30 Apr 2018 16:11:17 +0000

И вообще непонятно зачем использовать такое количество скриптов для типовых задач. Например FancyBox v2 достаточно минималистичен и выполняет функции галереи, слайдера, popup окна. При этом он проработан и не имеет вышеописанных недостатков юзабилити. У вас же для этих функций отдельные лишние скрипты, которые в теме "Современная" весят недопустимые для качественной проработки 535 КБ. Это же не landing-page, а целый интернет-магазин, у которого будет очень много кликов и нагрузки.
Я молчу про 523 КБ в CSS с Bootstrap, из которого не больше 10% используется.

Re: Всплывающее фото. Тема Современная.

null@example.com (Александр) — Sun, 29 Apr 2018 10:54:45 +0000

Галерея сыровата. Пришлось править CSS для применения прозрачности. Идеальное значение прозрачности - 0.7. Хорошо что работают горячие клавиши и есть возможность прокрутки колесиком мыши, но пользуются этим единицы. Нужно ориентироваться на типичного юзера, который только кликать может. Поэтому помимо прозрачности нужно:
1. Чтобы при клике по фото открывалось следующее.
2. Стрелки для перехода к следующему и предыдущему фото должны быть на самом фото, а не на краях экрана, где их не видно.
3. Кнопка закрытия фото нужна возле фото, в привычном верхнем правом углу. О том, что для закрытия можно кликнуть мимо фото, юзер не додумается. Крестик закрытия расположен максимально неудачно и еле заметен.
4. Если высота изображения больше ширины и оно большое - его перекрывают панели вверху и внизу. Например последнее фото тут http://mega.readyscript.ru/product/plate-savage/. Необходимо чтобы изображения выводились между этими панелями, а не под ними.

Re: Всплывающее фото. Тема Современная.

null@example.com (Закусило Александр) — Wed, 25 Oct 2017 14:52:47 +0000

Закиньте в тему файл scripts.tpl и добавьте там свой css через {addcss}. И перегрузите там нужный класс.

Re: Всплывающее фото. Тема Современная.

null@example.com (Владимир 1916) — Wed, 25 Oct 2017 12:07:00 +0000

Решил не рубить в плеча. А поменять прозрачность с 1 на 0.5, тогда не так страшно ))

Только вопрос возникает, как сделать чтобы изменения не затерлись при обновлении?

Пробовал:

1) сделать файл /resource/css/common/lightgallery/css/lightgallery.min.my.css
и делать изменения там

2) сделать файл /templates/flatlines/resource/css/common/lightgallery/css/lightgallery.min.css
и делать изменения там

ни 1), ни 2) не работает.

Re: Всплывающее фото. Тема Современная.

null@example.com (Закусило Александр) — Wed, 25 Oct 2017 08:31:19 +0000

)))
В теме современная за открытие окна отвечает конструкция в rs.product.js Вашей темы:

/**
         * Открытие главного фото товара
         */
        if ($.fn.lightGallery) {
            var gallery = $('.product-gallery-full').data('lightGallery');
            if (gallery) {
                gallery.destroy(true);
            }
            $('.product-gallery-full').lightGallery({
                selector: "[rel='bigphotos']:not(.dont-use-in-galery)",
                thumbnail: true,
                autoplay: false,
                autoplayControls: false,
                hash:false
            });
        }

Всплывающее фото. Тема Современная.

null@example.com (Владимир 1916) — Tue, 24 Oct 2017 20:22:10 +0000

Как в теме Современная (flatlines) сделать, чтобы не появлялось всплывающее окно с черным фоном при нажатии на фото, была просто картинка, которая есть?
Другими словами, чтобы основная картинка была не кликабельна. Не ссылкой, а просто картинкой.

P.S.
Просто у меня этот черный фон вызвал панические атаки. Сначала не понял, что вообще произошло, куда делся сайт и как на него вернуться. И количество отказов возросло на 3-5%. Может это, конечно, и не связано с всплывающим окном и темой, а просто совпадение.