Categories

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

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

Norman Fisher Март 3, 2014
Rating: 5.0/5. From 1 vote.
Please wait...

В этом туториале рассказывается, как изменить размеры слайдера в Вашем Website шаблоне.

JS Animated. Как изменить размеры слайдера типа Camera.
  1. Перейдите к папке /images/ и замените одно из изображений в слайдере новым изображением с другими размерами. Например, оригинальное изображение называется slide.jpg. Вам нужно заменить его на новый файл с таким же названием slide.jpg. Либо, если Ваш новый файл называется slide3.jpg, Вы можете просто загрузить его в папку images и изменить название в html коде.

  2. Если Вы откроете файл index.html в веб браузере, Вы увидите, что изображение было заменено, но выглядит немного растянутым.

    js_animated_camera_slider_dimensions_changing_1
  3. Чтобы это исправить, Вам нужно узнать размеры нового изображения, например 1200 X 600 пикселей.

    js_animated_camera_slider_dimensions_changing_2
  4. С помощью плагина Firebug для Firefox поищите <div id="camera_wrap">, как показано ниже (id divа может отличаться в Вашем шаблоне):

    js_animated_camera_slider_dimensions_changing_3
  5. Вот его стили в /site/css/camera.css:

    .camera_wrap {
    display: none;
    margin-bottom: 0 !important;
    overflow: visible !important;
    position: relative;
    z-index: 0;
    }
    
  6. Добавьте новое свойство ширины для этого селектора класса width: 1200px ! important; (где 1200px — ширина нового изображения для слайдера). Это свойство не позволит Вашему изображению выглядеть растянутым.

    js_animated_camera_slider_dimensions_changing_4
  7. Добавьте еще одно свойство поля к этому селектору margin: 0 auto; для того, чтобы центрировать изображение.

    js_animated_camera_slider_dimensions_changing_5
  8. Теперь Вам нужно скопировать и отредактировать селектор класса из Firebug и заменить им оригинальный селектор:

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

  10. Откройте файл 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%’ и сохраните изменения.

  11. Теперь Ваши изображения на слайдере должны отображаться с новыми размерами.

    js_animated_camera_slider_dimensions_changing_7

Пожалуйста, ознакомьтесь с детальным видео-туториалом ниже:

JS Animated. How to change Camera slider dimensions
Эта запись была размещена в JS Animated туториалы и помечена как camera, change, dimensions, slider. Добавьте в закладки постоянную ссылку.

Submit a ticket

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