Jump to content
Mariya812

Слайдер для мобильной версии, замена изображения

Recommended Posts

Добрый день. Вопрос к профи. На стандартной теме опенкарт 3 в баннере на главной – лежат картинки. Управляем ими свайпер и скрипты опен карта. Со свайпером я знакома, а вот с опенкартом нет(
Мне нужно заменить каждое изображение слайдера для мобильной версии, даже наверное начиная от ширины @media (max-width: 480px) мне уже нужны другие изображения.
Подскажите, как правильнее реализовать. 
Я делала ручками так: клала в див слайдера 2 картинки и скрывала их в зависимости от ширины экрана. (на своем собранном сайте)
Здесь другой код в твиге: <div class="swiper-slide">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% endif %}</div>
      {% endfor %}</div>
Никак не разберу как реализовать. положила так же в див свои слайдеры (для мобильных) не отображаются. В классах скрыла .swiper-slide a img {display: none}, первый слайд скрылся, а второй нет. Высота тоже не меняется, может дело в ней....

 

Помогите кто-нибудь, может кто-то знает.

Сайт у меня пока на локалке.
P.S. Я не программист, я дизайнер и художник, но, как говорится: "жизнь заставит". Пытаюсь сделать свой сайт сама... пока очень медленно и тяжело(

Share this post


Link to post
Share on other sites

<picture>
            <source media="(max-width: 480px)" srcset=""{{ banner.image2 }}">
            <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive">
 </picture>

Share this post


Link to post
Share on other sites
1 час назад, REDDI сказал:

<picture>
            <source media="(max-width: 480px)" srcset=""{{ banner.image2 }}">
            <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive">
 </picture>

Спасибо большое, но мне это не помогает, потому что я не понимаю где находятся banner.image.
Вы можете подробнее объяснить. Куда мне положить фото на замену и присвоить им banner.image2.
Что бы они шли на замену большим изображениям. Это через базу данных делается? Или есть какие-то другие файлы.
… Или мне проще руками сделать этот свайпер без вывода фото в панель администрирования, так я смогу, по Html разберусь.

Share this post


Link to post
Share on other sites
11 часов назад, Mariya812 сказал:

Спасибо большое, но мне это не помогает, потому что я не понимаю где находятся banner.image.
Вы можете подробнее объяснить. Куда мне положить фото на замену и присвоить им banner.image2.
Что бы они шли на замену большим изображениям. Это через базу данных делается? Или есть какие-то другие файлы.
… Или мне проще руками сделать этот свайпер без вывода фото в панель администрирования, так я смогу, по Html разберусь.

Я просто в 2.3 версии делал в админке еще одно поле для доп.изображения, в 3 так же надо. Но подсказать или сделать не смогу - не работал с ней ни разу:(

Share this post


Link to post
Share on other sites
7 часов назад, REDDI сказал:

Я просто в 2.3 версии делал в админке еще одно поле для доп.изображения, в 3 так же надо. Но подсказать или сделать не смогу - не работал с ней ни разу:(

Я в общем решила сделать так: отключаю все эти модули опенкарт: баннеры и слайдеры.
Создаю на базе блока Html все свои слайдеры + подключаю к ним скрипты в контроллере админ и прописываю скрипт в твиг
Далее в css настраиваю смену изображений для мобильной версии.
Учитываю мое не знание языков JS и php вариант только верстать всё на Html.
Конечно в админ панели я не буду ничего видеть, но так как сайт я делаю для себя - могу и ручками прописывать пути к изображениям.
Возможно кому-то подойдёт мой путь решения.

Очень надеюсь, что всё же кто-то откликнется и объяснит мне как сделать иначе. Я понимаю, что мне надо будут создавать наверное массивы, я бы изучила.
А пока у меня всё отлично работает в таком варианте.

Share this post


Link to post
Share on other sites
В 07.12.2019 в 08:13, REDDI сказал:

Я просто в 2.3 версии делал в админке еще одно поле для доп.изображения, в 3 так же надо. Но подсказать или сделать не смогу - не работал с ней ни разу:(

 

А как в админку вывести поле для изображения для мобильного. Куда и что прописывать? (ocstore 2.3)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By klaos27
      OCDbanner: Баннеры | Слайдеры | Видео - многофункциональный модуль для вывода баннеров, слайдеров и показа видеороликов на вашем сайте. 
       
      Основные настройки для баннеров в группе:
      1) Вывод названия группы
      2) Три режима отображения
         - Сетка Bootstrap (1, 2, 3, 4 или 6 баннеров в ряду)
         - Карусель (автопрокрутка, навигация, лимит баннеров в видимой части карусели на разных разрешениях экрана (неограниченное количество разрешенией), расстояние между баннерами для различных разрешений)
         - Произвольная сетка (настраиваемое расстояние между баннерами)
      3) Размеры изображений
      4) Статус группы
       
      При режимах отображения группы "Сетка Bootstrap" и "Произвольная сетка" для каждого баннера можно выбрать один из трех типов:
      1) Изображение
      2) Видео
      3) Слайдер
       
      При режиме отображения группы "Карусель" для каждого баннера можно выбрать один из двух типов:
      1) Изображение
      2) Видео
       
      Абсолютно любому баннеру можно указать статус включено/отключено.
       
      Мультиязычные настройки для типа баннера "Изображение":
      1) Изображение.
      2) Эффект при наведении на изображение (12 эффектов). 
      3) Заголовок (поддержка html-кода). Также будет использоваться как title изображения.
      4) Alt для изображения.
      5) Статус заголовка.
      6) Позиция для заголовка (перед изображением, после изображения, в теле изображения).
      7) Выравнивание заголовка (по левому краю, по правому краю, по центру).
      8) Ссылка.
      9) Указывает ли ссылка на видеоролик (YouTube или Vimeo).
      10) Ссылки открываются в текущем или новом окне. Отдельно для видеороликов предусмотрен показ в модальном окне.
      11) Статус описания баннера.
      12) Описание (поддержка html-кода + при необходимости можно включить визуальный редактор).
      13) Порядок сортировки.
       
      Мультиязычные настройки для типа баннера "Видео":
      1) Выбор видеохостинга (YouTube или Vimeo).
      2) ID видео. Для показа видеоролика необходимо ввести в поле только его ID.
      3) Заголовок для видео.
      4) Статус заголовка.
      5) Позиция для заголовка (перед или после видеоролика).
      6) Выравнивание заголовка (по левому краю, по правому краю, по центру).
      7) Порядок сортировки.
       
      Мультиязычные настройки для типа баннера "Слайдер":
      1) Статус слайдера.
      2) Изображение.
      3) Заголовок (поддержка html-кода). Также будет использоваться как title изображения.
      4) Alt для изображения.
      5) Статус заголовка.
      6) Выравнивание заголовка (по левому краю, по правому краю, по центру).
      7) Ссылка.
      8) Указывает ли ссылка на видеоролик (YouTube или Vimeo).
      9) Ссылки открываются в текущем или новом окне. Отдельно для видеороликов предусмотрен показ в модальном окне.
      10) Статус описания баннера
      11) Описание (поддержка html-кода + при необходимости можно включить визуальный редактор)
      12) Порядок сортировки.
       
      Уровни доступа:
      1) Показ баннеров для разных магазинов
      2) Показ баннеров для разных групп покупателей
      3) Показ баннеров для разных категорий
       
      При необходимости внесения изменений в стилевое оформление модуля предусмотрена вкладка "CSS". Если поле на данной вкладке заполнено, то подключается дополнительный файл стилей, соответствующий данному модулю.
       
      К каждому модулю можно подключить пользовательский шаблон, тем самым при обновлении ммодуля не потеряются какие-либо сделанные изменения.

      Не перезаписывает системных файлов движка
      Не использует VQmod
      Не использует OCMOD
      Не использует ioncube
       
      Демо модуля:
      1) Сетка Bootstrap
      2) Карусель
      3) Произвольная сетка
      4) Слайдер
       
      Административная часть: http://demo.oc-day.ru/admin/index.php?route=extension/module/ocdbanner
      Логин: demo
      Пароль: demo

      Установка
      1) Загрузить ocdbanner.ver3.ocmod.zip через Дополнения / Установка дополнений (Extensions / Extension Installer)
      2) Перейти в Система/Группы пользователей и для администратора установить права доступа (в блоках "Разрешить просмотр" и "Разрешить редактировать" отметить галочкой extension/module/ocdbanner)
      3) В настройках модуля на вкладке "Доступы" обязательно отметить магазин и группу покупателей, для которых необходимо показывать модуль.
      4) Вывести созданный модуль на необходимой странице.
       
      Обновление
      1) Загрузить ocdbanner.ver3.ocmod.zip через Дополнения / Установка дополнений (Extensions / Extension Installer)
      2) Зайти в модуль(и) и пересохранить настройки. Это позволит к каждому созданному модулю прописать свой идентификатор
      3) Если используется карусель, то в настройках необходимо прописать расстояние между баннерами для каждого разрешения.
       
      Внимание!
      В виду того что невозможно достоверно определить построение произвольной сетки пользователем, настройка стилей для эффектов с 5 по 12 носит индивидуальный характер.
      Данную настройку покупатель может осуществить собственными силами или при покупке модуля отметить соответствующую опцию.

      Лицензия!
      1) Данный модуль реализуется по принципу: одна лицензия - один домен.
      2) Запрещена перепродажа модуля без согласия автора.
      3) Запрещена передача модуля третьим лицам, распространение и публикация от своего имени без получения разрешения автора модуля.
    • By klaos27
      490.00 руб
      Скачать/Купить дополнение


      OCDbanner: Баннеры | Слайдеры | Видео
      OCDbanner: Баннеры | Слайдеры | Видео - многофункциональный модуль для вывода баннеров, слайдеров и показа видеороликов на вашем сайте. 
       
      Основные настройки для баннеров в группе:
      1) Вывод названия группы
      2) Три режима отображения
         - Сетка Bootstrap (1, 2, 3, 4 или 6 баннеров в ряду)
         - Карусель (автопрокрутка, навигация, лимит баннеров в видимой части карусели на разных разрешениях экрана (неограниченное количество разрешенией), расстояние между баннерами для различных разрешений)
         - Произвольная сетка (настраиваемое расстояние между баннерами)
      3) Размеры изображений
      4) Статус группы
       
      При режимах отображения группы "Сетка Bootstrap" и "Произвольная сетка" для каждого баннера можно выбрать один из трех типов:
      1) Изображение
      2) Видео
      3) Слайдер
       
      При режиме отображения группы "Карусель" для каждого баннера можно выбрать один из двух типов:
      1) Изображение
      2) Видео
       
      Абсолютно любому баннеру можно указать статус включено/отключено.
       
      Мультиязычные настройки для типа баннера "Изображение":
      1) Изображение.
      2) Эффект при наведении на изображение (12 эффектов). 
      3) Заголовок (поддержка html-кода). Также будет использоваться как title изображения.
      4) Alt для изображения.
      5) Статус заголовка.
      6) Позиция для заголовка (перед изображением, после изображения, в теле изображения).
      7) Выравнивание заголовка (по левому краю, по правому краю, по центру).
      8) Ссылка.
      9) Указывает ли ссылка на видеоролик (YouTube или Vimeo).
      10) Ссылки открываются в текущем или новом окне. Отдельно для видеороликов предусмотрен показ в модальном окне.
      11) Статус описания баннера.
      12) Описание (поддержка html-кода + при необходимости можно включить визуальный редактор).
      13) Порядок сортировки.
       
      Мультиязычные настройки для типа баннера "Видео":
      1) Выбор видеохостинга (YouTube или Vimeo).
      2) ID видео. Для показа видеоролика необходимо ввести в поле только его ID.
      3) Заголовок для видео.
      4) Статус заголовка.
      5) Позиция для заголовка (перед или после видеоролика).
      6) Выравнивание заголовка (по левому краю, по правому краю, по центру).
      7) Порядок сортировки.
       
      Мультиязычные настройки для типа баннера "Слайдер":
      1) Статус слайдера.
      2) Изображение.
      3) Заголовок (поддержка html-кода). Также будет использоваться как title изображения.
      4) Alt для изображения.
      5) Статус заголовка.
      6) Выравнивание заголовка (по левому краю, по правому краю, по центру).
      7) Ссылка.
      8) Указывает ли ссылка на видеоролик (YouTube или Vimeo).
      9) Ссылки открываются в текущем или новом окне. Отдельно для видеороликов предусмотрен показ в модальном окне.
      10) Статус описания баннера
      11) Описание (поддержка html-кода + при необходимости можно включить визуальный редактор)
      12) Порядок сортировки.
       
      Уровни доступа:
      1) Показ баннеров для разных магазинов
      2) Показ баннеров для разных групп покупателей
      3) Показ баннеров для разных категорий
       
      При необходимости внесения изменений в стилевое оформление модуля предусмотрена вкладка "CSS". Если поле на данной вкладке заполнено, то подключается дополнительный файл стилей, соответствующий данному модулю.
       
      К каждому модулю можно подключить пользовательский шаблон, тем самым при обновлении ммодуля не потеряются какие-либо сделанные изменения.

      Не перезаписывает системных файлов движка
      Не использует VQmod
      Не использует OCMOD
      Не использует ioncube
       
      Демо модуля:
      1) Сетка Bootstrap
      2) Карусель
      3) Произвольная сетка
      4) Слайдер
       
      Административная часть: http://demo.oc-day.ru/admin/index.php?route=extension/module/ocdbanner
      Логин: demo
      Пароль: demo

      Установка
      1) Загрузить ocdbanner.ver3.ocmod.zip через Дополнения / Установка дополнений (Extensions / Extension Installer)
      2) Перейти в Система/Группы пользователей и для администратора установить права доступа (в блоках "Разрешить просмотр" и "Разрешить редактировать" отметить галочкой extension/module/ocdbanner)
      3) В настройках модуля на вкладке "Доступы" обязательно отметить магазин и группу покупателей, для которых необходимо показывать модуль.
      4) Вывести созданный модуль на необходимой странице.
       
      Обновление
      1) Загрузить ocdbanner.ver3.ocmod.zip через Дополнения / Установка дополнений (Extensions / Extension Installer)
      2) Зайти в модуль(и) и пересохранить настройки. Это позволит к каждому созданному модулю прописать свой идентификатор
      3) Если используется карусель, то в настройках необходимо прописать расстояние между баннерами для каждого разрешения.
       
      Внимание!
      В виду того что невозможно достоверно определить построение произвольной сетки пользователем, настройка стилей для эффектов с 5 по 12 носит индивидуальный характер.
      Данную настройку покупатель может осуществить собственными силами или при покупке модуля отметить соответствующую опцию.

      Лицензия!
      1) Данный модуль реализуется по принципу: одна лицензия - один домен.
      2) Запрещена перепродажа модуля без согласия автора.
      3) Запрещена передача модуля третьим лицам, распространение и публикация от своего имени без получения разрешения автора модуля.
      Добавил klaos27 Добавлено 15.10.2017 Категория Слайдшоу, баннеры, галереи Системные требования Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3
      2.1 ocStore 3.0
      2.3
      2.1 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена 700  
    • By 23keks23
      Отличный от других, модуль для отображения фото из Instagram.
      Легко настраиваемый и удобный модуль.
      3 варианта отображения: сетка, слайдер, и слайдер с пагинацией
      (в дальнейшем, планирую добавить вид masonry и highlight)
       
      Не использует vQmod.
      Не использует Ocmod.
      Не заменяет стандартные файлы.
      Подходит для любого шаблона, с возможностью кастомизации.
       
      Преимущества перед другими модулями:
      Возможность ИСКАТЬ фотографии по имени, по хештегу и даже по слову или фразы из описания Умеет СОРТИРОВАТЬ фотографии по лайкам, комментариям, дате публикации и даже по нескольким пунктам одновременно Для ускорения работы вашего сайта, что бы ограничить попытки "связываться" с Instagram, в модуле встроено КЭШИРОВАНИЕ фотографий CRON - если в вашем аккаунте, аккаунте знакомых или по популярному тегу, регулярно обновляются посты, можно кэшировать по расписанию Есть возможность вывести ИНФОРМАЦИЮ о пользователе, который опубликовал фотографии, а так же опубликованную ИСТОРИЮ Удобный интерфейс и качественная верстка без лишних использований различных плагинов При клике на пост, есть возможность открыть подробную информацию в PopUp окне Доступно воспроизведение видео, как при наведении на пост, так и при открытом PopUp  
      Демо - oc21.itpixel.ru
      Логин/Пароль: demo/demo
       
      Внимание! Для работы нет необходимости в получении Access Token!
      Работает на всех актуальных версиях OpenCart и OcStore. С любым шаблоном.
      Модуль доступен для всех основных версий Opencart, OcStore, MaxtStore, Opencart.pro
       
      Для установки, вам потребуется PHP с версией не ниже 5.6 и следование моей инструкции.
      Скачайте модуль Установите модуль Настройте модуль  
      Если у вас версия младше 2.x.x:
      Разархивируйте файл Содержимое папки UPLOAD скопируйте на свой сайт в его корень Если у вас версия 2.x.x или выше:
      Установите модуль используя функцию вашей CMS "Установка дополнений" или "Установка расширений"  
      P.S. Поделитесь этой страницей с вашими знакомыми или друзьями!!!
      P.P.S. И не забывайте оставлять отзывы, даже если они не положительный.
       
    • By 23keks23
      520.00 руб
      Скачать/Купить дополнение


      Instagram Feed Widget
      Отличный от других, модуль для отображения фото из Instagram.
      Легко настраиваемый и удобный модуль.
      3 варианта отображения: сетка, слайдер, и слайдер с пагинацией
      (в дальнейшем, планирую добавить вид masonry и highlight)
       
      Не использует vQmod.
      Не использует Ocmod.
      Не заменяет стандартные файлы.
      Подходит для любого шаблона, с возможностью кастомизации.
       
      Преимущества перед другими модулями:
      Возможность ИСКАТЬ фотографии по имени, по хештегу и даже по слову или фразы из описания Умеет СОРТИРОВАТЬ фотографии по лайкам, комментариям, дате публикации и даже по нескольким пунктам одновременно Для ускорения работы вашего сайта, что бы ограничить попытки "связываться" с Instagram, в модуле встроено КЭШИРОВАНИЕ фотографий CRON - если в вашем аккаунте, аккаунте знакомых или по популярному тегу, регулярно обновляются посты, можно кэшировать по расписанию Есть возможность вывести ИНФОРМАЦИЮ о пользователе, который опубликовал фотографии, а так же опубликованную ИСТОРИЮ Удобный интерфейс и качественная верстка без лишних использований различных плагинов При клике на пост, есть возможность открыть подробную информацию в PopUp окне Доступно воспроизведение видео, как при наведении на пост, так и при открытом PopUp  
      Демо - oc21.itpixel.ru
      Логин/Пароль: demo/demo
       
      Внимание! Для работы нет необходимости в получении Access Token!
      Работает на всех актуальных версиях OpenCart и OcStore. С любым шаблоном.
      Модуль доступен для всех основных версий Opencart, OcStore, MaxtStore, Opencart.pro
       
      Для установки, вам потребуется PHP с версией не ниже 5.6 и следование моей инструкции.
      Скачайте модуль Установите модуль Настройте модуль  
      Если у вас версия младше 2.x.x:
      Разархивируйте файл Содержимое папки UPLOAD скопируйте на свой сайт в его корень Если у вас версия 2.x.x или выше:
      Установите модуль используя функцию вашей CMS "Установка дополнений" или "Установка расширений"  
      P.S. Поделитесь этой страницей с вашими знакомыми или друзьями!!!
      P.P.S. И не забывайте оставлять отзывы, даже если они не положительный.
       
      Добавил 23keks23 Добавлено 07.02.2020 Категория Модули Системные требования Метод активации По запросу в ЛС
      По емейлу
      Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х Обращение к серверу разработчика Да Старая цена 0  
    • By PRONTO
      Выручайте, нужен модуль для разных картинок в слайдшоу в мобильной и полной версии сайта
      Пример:
      что бы в мобильной версии в слайде открывалась высокая картинка, а в полной версии сайта широкоформатная картинка в слайде, как Такео сделать ???????
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.