- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
JS Animated. Как изменить размеры Camera слайдера
Март 3, 2014
В этом туториале рассказывается, как изменить размеры слайдера в Вашем Website шаблоне.
JS Animated. Как изменить размеры слайдера типа Camera.Перейдите к папке /images/ и замените одно из изображений в слайдере новым изображением с другими размерами. Например, оригинальное изображение называется slide.jpg. Вам нужно заменить его на новый файл с таким же названием slide.jpg. Либо, если Ваш новый файл называется slide3.jpg, Вы можете просто загрузить его в папку images и изменить название в html коде.
Если Вы откроете файл index.html в веб браузере, Вы увидите, что изображение было заменено, но выглядит немного растянутым.
Чтобы это исправить, Вам нужно узнать размеры нового изображения, например 1200 X 600 пикселей.
С помощью плагина Firebug для Firefox поищите <div id="camera_wrap">, как показано ниже (id divа может отличаться в Вашем шаблоне):
Добавьте новое свойство ширины для этого селектора класса width: 1200px ! important; (где 1200px — ширина нового изображения для слайдера). Это свойство не позволит Вашему изображению выглядеть растянутым.
Добавьте еще одно свойство поля к этому селектору margin: 0 auto; для того, чтобы центрировать изображение.
Теперь Вам нужно скопировать и отредактировать селектор класса из Firebug и заменить им оригинальный селектор:
.camera_wrap { display: none; margin: 0 auto; overflow: visible !important; position: relative; width: 1200px !important; z-index: 0; }
Сохраните изменения, сделанные в файле camera.css.
Откройте файл index.html, в котором находится код слайдера, в Adobe Dreamweaver или другом редакторе кодов. Поищите скрипт инициализации слайдера между двумя тэгами <script></script>:
$(document).ready(function(){ jQuery('#camera_wrap').camera({ loader: false, pagination: true , minHeight: '250', thumbnails: false, height: '42.6%', caption: false, navigation: false, fx: 'mosaic' }); $().UItoTop({ easingType: 'easeOutQuart' }); })
Так как ширина нового изображения 1200px, а высота 600px, новое процентное соотношение должно быть 50% (600/1200*100=50). Измените высоту ‘42.6%’ на ‘50%’ и сохраните изменения.
Теперь Ваши изображения на слайдере должны отображаться с новыми размерами.
Вот его стили в /site/css/camera.css:
.camera_wrap { display: none; margin-bottom: 0 !important; overflow: visible !important; position: relative; z-index: 0; }
Пожалуйста, ознакомьтесь с детальным видео-туториалом ниже:
JS Animated. How to change Camera slider dimensions