Пример взят с этого сайта. Подробнее рассмотрим, что же там написано.
1. Drupal behaviors (для Drupal 7), если ваш код не используется в Drupal, можете его опустить.
Drupal.behaviors.iDevelsPartnerSlide = {
attach: function (context, settings) {
}
}
2. Присвоим переменной partnerList контейнер, в котором лежит наша карусель.
var partnerList = $('.view-partner-programs.slide .view-content')
3. Добавим кнопки для прокрутки (следующий/предыдущий); не у всех же пока есть в наличии iГаджет.
$('.pane-partner-programs.slide .pane-content').append('')
4.Подключим к нашему блоку сам плагин карусели.
partnerList.carouFredSel();
Настройки плагина рассматривать мы не будем, поскольку на сайте имеется и без того хорошо описанная документация. Единственное, на чем нужно остановиться особо — это реализация прокрутки, ведь о ней то и идет речь.
Wipe — именно этот параметр включает возможность прокрутки пальцем на наших iГаджетах.
scroll: {
pauseOnHover: true,
wipe: true
}
Для реализации такой возможности подключаем jQuery Touchwipe Plugin. Функционал нашей карусели готов. Осталось только дописать несколько строк css, и все приобретает надлежащий вид.
Реализацию — блок с логотипами и отзывами клиентов — можете посмотреть на главной странице этого сайта.
Retina
Retina (от англ. retina — сетчатка) — название ЖК-дисплея, который используется в устройствах Apple и отличается более высоким заявленным разрешением (326 точек на дюйм). Согласно имеющимся исследованиям, человеческий глаз может различить только 300 PPI. При этом производитель заявляет, что на таких дисплеях пикселизация изображения человеческим глазом не воспринимается.
Последние модели наших iГаджетов имеют именно такие экраны. На Retina экранах плотность пикселей в 4 раза больше. То есть изображение 200×300 на Retina имеет 400×600.
Таким образом, наша задача заключается в том, чтобы помочь пользователю и устройством пользоваться по полной, и наблюдать при этом изображение высокого качества. Как известно, чем выше качество изображения, тем больший объем файла. Стало быть, не забываем о пользователях, которые еще не держат iГаджет в руках. Им то зачем загружать себе бесполезные мегабайты?!
Итак, нужно загрузить для Retina изображение в 2 раза больше. При этом работать будем с фоновыми изображениями для картинок.
Вот и сама реализация:
.pane-services-slide.attachment {
background: url(../i/slide-menu-bg.png) scroll no-repeat center bottom transparent;
background-size: 1020px 104px;
height: 83px;
margin: 0 auto;
width: 960px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.pane-services-slide.attachment {
background: url(../i/[email protected]) scroll no-repeat center bottom transparent;
}
}
Давайте посмотрим, что все это значит. В первом блоке мы задаем стили для нашего фона, задаем ему размер. Тут все, как обычно. Следующий блок для Retina. Здесь мы определяем Retina как медиа устройство и используем device-pixel-ratio, чтобы установить соотношение между физическим и css-пикселем.
Таковы условия, при которых загружается наше объемное изображение. В названии картинки использована конструкция @ 2x: она должна быть прописана обязательно.
На данном этапе наша задача решена: пользователи iГаджетов наслаждаются большей четкостью изображения, а "не пользователи" - не грузят себе бесполезные мегабайты.
Несколько слов о Drupal.Behaviors та $(document).ready()
Оптимизация графики для Retina-экранов.
