- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
OpenCart 1.5.x. Как изменить размеры слайдера
Май 29, 2014
Этот туториал покажет, как изменить размеры изображения слайдера в шаблонах OpenCart.
OpenCart. Как изменить размеры слайдера
Допустим, у вас есть картинка размером 1200 X 831 px и нужно добавить ее в баннер, сохранив исходную пропорцию.
-
Войдите в админ панель OpenCart и откройте меню “Расширения -> Модули (Extensions” -> “Modules”).
-
Из списка выберите модуль “Newcarousel” и кликните “Редактировать (Edit)”.
-
На странице редактирования модуля замените размеры (W + H), установленные по умолчанию, размерами вашей новой картинки (в нашем случае, 1200 X 831 px) и нажмите кнопку “Сохранить (Save)”.
-
Откройте меню Система -> Оформление -> Баннеры (System -> Design -> Banners).
-
Из списка выберите “slideshow” и кликните “Редактировать (Edit)”.
-
На странице редактирования баннера под изображением, которое вы хотите изменить, нажмите кнопку “Обзор (Browse)” . Во всплывающем окне кликните “Загрузить (Upload)”, выберите новое изображения и нажмите кнопку “Открыть (Open)”, чтобы загрузить его.
-
Когда изображение будет загружено, вы увидите следующее сообщение:
-
В окне Менеджер изображений (Image Manager) найдите ваше изображение и выберите его двойным щелчком кнопки мыши.
-
Миниатюра оригинального изображения замениться вашим изображением. В правом верхнем углу нажмите кнопку “Сохранить (Save)”, чтобы сохранить изменения.
-
Откройте ваш сайт в браузере Mozilla Firefox.
-
Используя плагин Firebug, найдите код <div id="camera_wrap"> (id тега div может отличаться в зависимости от версии шаблона). См. скриншот ниже.
-
Например, этот div использует следующее css правило:
.camera_wrap { display: none; float: left; position: relative; z-index: 0; }
-
Чтобы ваше изображение не выглядело вытянутым на сайте, добавьте новый атрибут к этому css правилу, например, width: 1200px ! important; (где 1200px — ширина вашего нового изображения).
-
В этом же css правиле удалите атрибут float: left; и вместо него добавьте атрибут margin: 0 auto; , чтобы отцентрировать ваше изображение на сайте.
-
Скопируйте отредактированное css правило из окна Firebug и замените им исходное правило в файле catalog/view/theme/theme###/stylesheet/camera.css:
.camera_wrap { width: 1200px ! important; margin: 0 auto; display: none; position: relative; z-index: 0; }
-
Сохраните изменения в файле camera.css .
-
Откройте файл newcarousel.tpl из папки catalog/view/theme/theme###/module/ с помощью программы Adobe Dreamweaver или с помощью другого кодового редактора. В данном файле найдите исходный скритп слайдера между двумя тегами <script></script>. См. скриншот ниже.
-
Так как ширина вашей нового изображения 1200px и высота 600px, процентное соотношение размеров картинки будет равняться 69.25% (831/1200*100=69.25). В данном скрипте замените height: ’32.86%’ на height: 69.25%’, и сохраните изменения.
-
Откройте свой сайт. Теперь вы можете видеть новое изображение с исходными пропорциями на вашем сайте.
Вы также можете воспользоваться детальным видео туториалом: