• Зарегистрирован: 15.07.2016
  • Сообщений: 342
  • Рейтинг: 16

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

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


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

Повысить оценку Понизить оценку

  • Откуда: Краснодар
  • Зарегистрирован: 01.09.2014
  • Сообщений: 2,955
  • Рейтинг: 252

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

)))
В теме современная за открытие окна отвечает конструкция в 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
            });
        }

СайтЗакусило Александр

Повысить оценку Понизить оценку

  • Зарегистрирован: 15.07.2016
  • Сообщений: 342
  • Рейтинг: 16

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

Решил не рубить в плеча. А поменять прозрачность с 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) не работает.

Повысить оценку Понизить оценку

  • Откуда: Краснодар
  • Зарегистрирован: 01.09.2014
  • Сообщений: 2,955
  • Рейтинг: 252

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

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

СайтЗакусило Александр

Повысить оценку Понизить оценку

5 Ответ от Александр Отредактировано Александр (30.04.2018 12:22:18)

  • Откуда: Москва
  • Зарегистрирован: 27.03.2016
  • Сообщений: 30
  • Рейтинг: 2

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

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

Повысить оценку Понизить оценку

  • Откуда: Москва
  • Зарегистрирован: 27.03.2016
  • Сообщений: 30
  • Рейтинг: 2

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

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

Повысить оценку Понизить оценку

7 Ответ от Ярослав Отредактировано Ярослав (03.05.2018 11:38:06)

  • Откуда: Пятигорск
  • Зарегистрирован: 13.11.2014
  • Сообщений: 648
  • Рейтинг: 65

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

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

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

СайтЯрослав

Повысить оценку Понизить оценку

  • Откуда: Москва
  • Зарегистрирован: 27.03.2016
  • Сообщений: 30
  • Рейтинг: 2

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

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

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

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

Повысить оценку Понизить оценку

9 Ответ от Александр Отредактировано Александр (12.05.2018 14:19:21)

  • Откуда: Москва
  • Зарегистрирован: 27.03.2016
  • Сообщений: 30
  • Рейтинг: 2

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

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

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

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

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

Повысить оценку Понизить оценку

10 Ответ от Ярослав

  • Откуда: Пятигорск
  • Зарегистрирован: 13.11.2014
  • Сообщений: 648
  • Рейтинг: 65

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

Заказчики много чего хотят и говорят. Мне вон наоборот говорят, что надо при клике закрывать фото.
А заказчика не смущает тот факт, что в инстаграм нельзя пролистать на следующее фото? Только выходить, выбрать фото списком и листать вниз?
От того, что фото не листается не будут уходить к конкуренту, если товар нормальный, контент нормальный. У меня куча примеров, когда люди сотнями делают заказы на абсолютно кошмарных сайтах. Да даже взять тот же 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, чтобы он закрывал бОльшую часть экрана и перекрывал фото. Тогда клик по фото вызовет следующий слайд.

СайтЯрослав

Повысить оценку Понизить оценку

11 Ответ от Александр Отредактировано Александр (13.05.2018 16:37:40)

  • Откуда: Москва
  • Зарегистрирован: 27.03.2016
  • Сообщений: 30
  • Рейтинг: 2

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

Вот это прикол! Решил перейти на галерею 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 со стрелками не актуален т.к. если изображения имеют разные размеры то положение стрелки скачет.

Повысить оценку +1 Понизить оценку

12 Ответ от Ярослав

  • Откуда: Пятигорск
  • Зарегистрирован: 13.11.2014
  • Сообщений: 648
  • Рейтинг: 65

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

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

СайтЯрослав

Повысить оценку Понизить оценку