Categories

Новые шаблоны

OpenCart 1.5.x. Как изменить размеры слайдера

Norman Fisher Май 29, 2014
Rating: 5.0/5. From 3 votes.
Please wait...

Этот туториал покажет, как изменить размеры изображения слайдера в шаблонах OpenCart.

OpenCart. Как изменить размеры слайдера

Допустим, у вас есть картинка размером 1200 X 831 px и нужно добавить ее в баннер, сохранив исходную пропорцию.

  1. Войдите в админ панель OpenCart и откройте меню “Расширения -> Модули (Extensions” -> “Modules”).

    opencart_slider_image_resizing_1

  2. Из списка выберите модуль “Newcarousel” и кликните “Редактировать (Edit)”.

    opencart_slider_image_resizing_2

  3. На странице редактирования модуля замените размеры (W + H), установленные по умолчанию, размерами вашей новой картинки (в нашем случае, 1200 X 831 px) и нажмите кнопку “Сохранить (Save)”.

    opencart_slider_image_resizing_3

  4. Откройте меню Система -> Оформление -> Баннеры (System -> Design -> Banners).

    opencart_slider_image_resizing_4

  5. Из списка выберите slideshow и кликните “Редактировать (Edit)”.

    opencart_slider_image_resizing_5

  6. На странице редактирования баннера под изображением, которое вы хотите изменить, нажмите кнопку “Обзор (Browse)” . Во всплывающем окне кликните “Загрузить (Upload)”, выберите новое изображения и нажмите кнопку “Открыть (Open)”, чтобы загрузить его.

    opencart_slider_image_resizing_6

  7. Когда изображение будет загружено, вы увидите следующее сообщение:

    opencart_slider_image_resizing_7

  8. В окне Менеджер изображений (Image Manager) найдите ваше изображение и выберите его двойным щелчком кнопки мыши.

    opencart_slider_image_resizing_8

  9. Миниатюра оригинального изображения замениться вашим изображением. В правом верхнем углу нажмите кнопку “Сохранить (Save)”, чтобы сохранить изменения.

    opencart_slider_image_resizing_9

  10. Откройте ваш сайт в браузере Mozilla Firefox.

  11. Используя плагин Firebug, найдите код <div id="camera_wrap"> (id тега div может отличаться в зависимости от версии шаблона). См. скриншот ниже.

    opencart_slider_image_resizing_10

  12. Например, этот div использует следующее css правило:

    .camera_wrap {
    display: none;
    float: left;
    position: relative;
    z-index: 0;
    }
    
  13. Чтобы ваше изображение не выглядело вытянутым на сайте, добавьте новый атрибут к этому css правилу, например, width: 1200px ! important; (где 1200px — ширина вашего нового изображения).

    opencart_slider_image_resizing_11

  14. В этом же css правиле удалите атрибут float: left; и вместо него добавьте атрибут margin: 0 auto; , чтобы отцентрировать ваше изображение на сайте.

  15. Скопируйте отредактированное css правило из окна Firebug и замените им исходное правило в файле catalog/view/theme/theme###/stylesheet/camera.css:

    opencart_slider_image_resizing_12

    .camera_wrap {
    width: 1200px ! important;
    margin: 0 auto;
    display: none;
    position: relative;
    z-index: 0;
    }
    
  16. Сохраните изменения в файле camera.css .

  17. Откройте файл newcarousel.tpl из папки catalog/view/theme/theme###/module/ с помощью программы Adobe Dreamweaver или с помощью другого кодового редактора. В данном файле найдите исходный скритп слайдера между двумя тегами <script></script>. См. скриншот ниже.

    opencart_slider_image_resizing_13

  18. Так как ширина вашей нового изображения 1200px и высота 600px, процентное соотношение размеров картинки будет равняться 69.25% (831/1200*100=69.25). В данном скрипте замените height: ’32.86%’ на height: 69.25%’, и сохраните изменения.

  19. Откройте свой сайт. Теперь вы можете видеть новое изображение с исходными пропорциями на вашем сайте.

    opencart_slider_image_resizing_14

Вы также можете воспользоваться детальным видео туториалом:

OpenCart. How to change slider dimensions

ocStore шаблоны
Эта запись была размещена в OpenCart туториалы и помечена как change, dimensions, opencart, slider. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов