Jump to content

Recommended Posts

Сайтом начал заниматься недавно, прогать не умею, по образованию - материаловед. 
Так что для меня это скачок, не закидывайте какахами =))
Скорее я это пишу сюда для таких же нубиков как я.

Короче, люблю я делать красочные описания у категорий. Чтобы было много текста и картинок, только вот с картинками не очень получалось. Ибо можно просто ставить картинку в html. Но если картинок много, то большим размером их не вставишь, а картинки маленького размера не видно.
Поэтому решил сделать возможность просматривать через ColorBox как в карточке товара.

 

Для этого в файле catalog/view/theme/действующая_тема/template/product/category.tpl нужно подключить colorbox
т.е. после
 

  <?php echo $content_bottom; ?></div>

вставить скрипт
 

<script type="text/javascript"><!--
$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
//--></script>

теперь в описании категории можно вставлять картинку следующим кодом

 

<div class="image">
	<a class="colorbox cboxElement"  href="url_картинки_при_просмотре" rel="colorbox" title="название картинки">
        <img alt="описание картинки" height="100" id="image" src="url_превью_картинки" title="название картинки" width="100" /></a></div>


Можно задать на превью одну картинку, а при просмотре уже другую.

Размеры превью и увеличенной картинки можно регулировать.

Чтобы можно было просматривать все картинки в одном окошке, картинки нужно сгруппировать.
Т.е. всем картинкам, которые вы ходите собрать в группу нужно присвоить одинаковый rel="xxx"


 

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.

Sign in to follow this  

  • Similar Content

    • By legioner26
      1 299.00 руб
      Скачать/Купить дополнение


      Модуль зуммирования изображений товара - ZoomPRO
      Разработан многофункциональный модуль Opencart Zoom для зуммирования изображений в карточке товара с выбором вариантов исполнения.
      ПРИМЕЧАНИЕ !!!
      Если у Вас не стандартный шаблон то для корректной работы настоятельно рекомендую проверить установлены ли иные плагины зумма.
      Не забываем очищать кешь на сайте при изменении настроек. Сочетание клавишь (Ctrl+F5)
       
      По адаптации шаблонов пишите в ЛС
       
      Тестировался с шаблонами Moneymaker 2, ROUNDSHOP, Corsica, Fiji, pixelshop и многими другими.
       
      Вариант №1
       
      Зуммирование в отдельном блоке, от изображения либо вывод в любом другом
       
      Вариант №2
       
      Зуммирование со скроллом внутри блока с изображением
       
      Вариант №3
       
      Зуммирование в виде лупы с настройками по ширине и высоте.
       
      ПРОСМОТР РАБОТЫ МОДУЛЯ
       
      Установка:
      1. Копируем содержимое исходя из версий ОС на хостинг в корень сайта 
      2. В модификаторах чистим кешь и обновляем.
      3. Пишем в личку номер вашего заказа, я высылаю Вам ключ.
       
      DEMO Логин: demo Пароль: demo
      http://cms-opencart.ru/index.php?route=product/product&product_id=42
       
      https://opencartforum.com/profile/723002-legioner26/?tab=field_core_pfield_13 ->> Собственный программный модуль по парсингу товаров под управлением OpenCart
       
      Добавил legioner26 Добавлено 20.05.2019 Категория Меню, дизайн, внешний вид Системные требования Ioncube Loader Сайт разработчика Метод активации По запросу в ЛС Ioncube Loader Требуется OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х Обращение к серверу разработчика Нет Старая цена 3500  
    • By legioner26
      Разработан многофункциональный модуль Opencart Zoom для зуммирования изображений в карточке товара с выбором вариантов исполнения.
      ПРИМЕЧАНИЕ !!!
      Если у Вас не стандартный шаблон то для корректной работы настоятельно рекомендую проверить установлены ли иные плагины зумма.
      Не забываем очищать кешь на сайте при изменении настроек. Сочетание клавишь (Ctrl+F5)
       
      По адаптации шаблонов пишите в ЛС
       
      Тестировался с шаблонами Moneymaker 2, ROUNDSHOP, Corsica, Fiji, pixelshop и многими другими.
       
      Вариант №1
       
      Зуммирование в отдельном блоке, от изображения либо вывод в любом другом
       
      Вариант №2
       
      Зуммирование со скроллом внутри блока с изображением
       
      Вариант №3
       
      Зуммирование в виде лупы с настройками по ширине и высоте.
       
      ПРОСМОТР РАБОТЫ МОДУЛЯ
       
      Установка:
      1. Копируем содержимое исходя из версий ОС на хостинг в корень сайта 
      2. В модификаторах чистим кешь и обновляем.
      3. Пишем в личку номер вашего заказа, я высылаю Вам ключ.
       
      DEMO Логин: demo Пароль: demo
      http://cms-opencart.ru/index.php?route=product/product&product_id=42
       
      https://opencartforum.com/profile/723002-legioner26/?tab=field_core_pfield_13 ->> Собственный программный модуль по парсингу товаров под управлением OpenCart
       
    • By noti
      360.00 руб
      Скачать/Купить дополнение


      Gallery RB - адаптивная галерея для opencart с описанием
      Галерея для OpenCart с выводом описания. С помощью этого модуля вы сможете сделать красиво портфолио или галерею работ для вашего сайта. 
      Вывод при помощи шорткода в описании товара, категории или статье (только в этих трех видах страниц).
       
      Для OpenCart 1.5.x модуль тут
       
      Какие преимущества у этого модуля?
      Возможность вставлять галерею в описание товара, категории или статьи при помощи шорткода (по аналогии с WordPress) адаптивный дизайн (сетка bootstrap, а всплывающее изображение адаптируется под размер экрана) 3 вариант отображения: Плитка, Карусель, Каменная кладка (Masonry) настройка количества колонок изображения (1, 2, 3, 4, 6 и 12 колонок) адаптация под мобильные устройства (для 4х разрешений экрана можно выбрать нужное количество колонок) 5 вариантов анимации при наведении вывод галереи как отдельной страницы, так и в любой другой части сайта в виде модуля модуль сочетает в себе галерею и баннеры, которые могут вести на любую страницу сайта описание изображений с визуальным редактором и поддержкой html каждое изображение может иметь совершенно уникальный дизайн описания модуль использует скрипт, который уже есть в опенкарт, таким образом не перегружая код сайта несколько анимаций появления изображения три варианта расположения текста: под фото, на фото при наведении мыши и на фото всегда возможность добавить рамку к фотографиям возможность вывода заголовка у каждой галереи возможность добавления атрибутов title и alt к каждому изображению  
      Демо модуля
      Демо админки
      (пароль demo логин demo)
       
      Инструкция по установке
       
      Примеры модуля Gallery RB
       
      Простая галерея изображений 
      Такой вариант отлично подойдет для галереи работ или портфолио. Когда изображения говорят сами за себя. 
       

       
      Галерея с описанием под фото 

       
      Галерея с рамкой и красивым описанием

       
       
      Галерея с появлением текста при наведении

       
      Галерея в виде карусели

       
      Галерея в виде плитки с изображениями разной высоты

      Добавил noti Добавлено 02.05.2017 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика w-concept.ru Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.1 ocStore 3.0
      2.3
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х Обращение к серверу разработчика Нет Старая цена 0  
    • By noti
      Галерея для OpenCart с выводом описания. С помощью этого модуля вы сможете сделать красиво портфолио или галерею работ для вашего сайта. 
      Вывод при помощи шорткода в описании товара, категории или статье (только в этих трех видах страниц).
       
      Для OpenCart 1.5.x модуль тут
       
      Какие преимущества у этого модуля?
      Возможность вставлять галерею в описание товара, категории или статьи при помощи шорткода (по аналогии с WordPress) адаптивный дизайн (сетка bootstrap, а всплывающее изображение адаптируется под размер экрана) 3 вариант отображения: Плитка, Карусель, Каменная кладка (Masonry) настройка количества колонок изображения (1, 2, 3, 4, 6 и 12 колонок) адаптация под мобильные устройства (для 4х разрешений экрана можно выбрать нужное количество колонок) 5 вариантов анимации при наведении вывод галереи как отдельной страницы, так и в любой другой части сайта в виде модуля модуль сочетает в себе галерею и баннеры, которые могут вести на любую страницу сайта описание изображений с визуальным редактором и поддержкой html каждое изображение может иметь совершенно уникальный дизайн описания модуль использует скрипт, который уже есть в опенкарт, таким образом не перегружая код сайта несколько анимаций появления изображения три варианта расположения текста: под фото, на фото при наведении мыши и на фото всегда возможность добавить рамку к фотографиям возможность вывода заголовка у каждой галереи возможность добавления атрибутов title и alt к каждому изображению  
      Демо модуля
      Демо админки
      (пароль demo логин demo)
       
      Инструкция по установке
       
      Примеры модуля Gallery RB
       
      Простая галерея изображений 
      Такой вариант отлично подойдет для галереи работ или портфолио. Когда изображения говорят сами за себя. 
       

       
      Галерея с описанием под фото 

       
      Галерея с рамкой и красивым описанием

       
       
      Галерея с появлением текста при наведении

       
      Галерея в виде карусели

       
      Галерея в виде плитки с изображениями разной высоты

    • By 23keks23
      Отличный от других, модуль для отображения фото из Instagram.
      Легко настраиваемый и удобный модуль.
      3 варианта отображения: сетка, слайдер, и слайдер с пагинацией
      (в дальнейшем, планирую добавить вид masonry и highlight)
       
      Не использует vQmod.
      Не использует Ocmod.
      Не заменяет стандартные файлы.
      Подходит для любого шаблона, с возможностью кастомизации.
       
      Преимущества перед другими модулями:
      1. Возможность ИСКАТЬ фотографии по имени, по хештегу и даже по слову или фразы из описания
      2. Умеет СОРТИРОВАТЬ фотографии по лайкам, комментариям, дате публикации и даже по нескольким пунктам одновременно
      3. Для ускорения работы вашего сайта, что бы ограничить попытки "связываться" с Instagram, в модуле встроено КЭШИРОВАНИЕ фотографий
      4. CRON - если в вашем аккаунте, аккаунте знакомых или по популярному тегу, регулярно обновляются посты, можно кэшировать по расписанию
      5. Есть возможность вывести ИНФОРМАЦИЮ о пользователе, который опубликовал фотографии, а так же опубликованную ИСТОРИЮ
      6. Удобный интерфейс и качественная верстка без лишних использований различных плагинов
       
      Демо - oc21.itpixel.ru
      Логин/Пароль: demo/demo
       
      Внимание! Для работы нет необходимости в получении Access Token!
      Работает на всех актуальных версиях OpenCart и OcStore. С любым шаблоном.
      Модуль доступен для всех основных версий Opencart, OcStore, MaxtStore, Opencart.pro
       
      Для установки, вам потребуется PHP с версией не ниже 5.6 и следование моей инструкции.
      1. Скачайте модуль
      2. Установите модуль
      3. Настройте модуль
       
      Если у вас версия младше 2.x.x:
          1. Разархивируйте файл
          2. Содержимое папки UPLOAD скопируйте на свой сайт в его корень
      Если у вас версия 2.x.x или выше:
          1. Установите модуль используя функцию вашей CMS "Установка дополнений" или "Установка расширений"
       
      P.S. Поделитесь этой страницей с вашими знакомыми или друзьями!!!
       
  • 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.