—»     —»   Разработка адаптивного веб-сайта – часть 4: завершаем разработку слайдера на главной странице
  Раздел: Руководства   Нет комментариев  

Разработка адаптивного веб-сайта – часть 4: завершаем разработку слайдера на главной странице

Сегодня мы займемся дальнейшей разработкой слайдера портфолио на главной странице. На данном этапе, если вы откроете свой файл index.php и прокрутите его вниз ко второму экрану, то увидите нечто вроде этого:

Разработка адаптивного веб-сайта – часть 4: завершаем разработку слайдера на главной странице

Мы уже очень близко, все что нам осталось, подключить наши jQuery-элементы а затем добавить некоторый стиль для того, чтобы наш второй экран слайдера портфолио был адаптивным.

Здесь вы можете скачать необходимые Java-файлы, которые нужно будет расположить в папке под названием "js" в корневом каталоге вашего сайта.

Давайте начнем с файла index.php. Первое, что нам нужно сделать, это добавить ссылки в головную секцию кода страницы, туда, где у нас указаны скрипты javascript. Это и будет jQuery и javascript, которые заставляют работать наш слайдер. Как вы наверное заметили, что свой код мы подобно бутерброду разместили между ссылкой на каскадные таблицы стилей и закрывающим тэгом head.

<link href="main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
});
</script>

</head>

На данном этапе у вас уже должен быть полностью функционирующий слайдер, но пока что он не очень адаптивный. Для того чтобы сделать его адаптивным, нам просто надо добавить несколько новых строк в наши media query, и все будет сделано. Начнем, пожалуй, с media query для планшетов в горизонтальной ориентации с максимальной шириной в 1024 пикселей. Всё, что нам нужно будет сделать, это добавить тэг #mainBG2 под нашим тэгом #mainBG.

#mainBG2 {
border-top:10px solid #EDEAE5;
background: url(images/medium2.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

Дальше нужно будет сделать то же самое в параметрах min-width: 768px / max-width: 991px, media query для портретной ориентации планшета.

#mainBG2 {
border-top:10px solid #EDEAE5;
background: url(images/medium2.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

Наконец, переходим к media query для мобильных устройств, где экраны варьируются от 0 до 767 пикселей в ширину. Здесь придется поработать немного больше. Мы начали с того, что указали размер шрифта h3 немного меньший, чтобы он корректно отображался на мобильных устройствах. Далее мы добавили тэг #mainBG2 таким образом, чтобы он подгружал маленькую версию фонового изображения. Далее мы изменили размер классов .stripViewer, panelContainer и .panel таким образом, чтобы наш слайдер с портфолио правильно отображался на мобильных устройствах. Далее мы изменили класс «.wrapper img» таким образом, чтобы скрыть наше большое изображение, и класс «.warpper p» таким образом, чтобы наш текст был меньше и, наконец, сообщили нашему классу «.hideSmall img», что появилась необходимость отобразить маленькое фоновое изображение.

h3 {font-size:.9em;}

#mainBG2 {
border-top:10px solid #EDEAE5;
background: url(images/small2.jpg) 50% 0 no-repeat scroll !important;
background-size: cover !important;
height:500px;
padding-bottom:0;
}
.articlesHeader {
font-size:.8em;
}
.stripViewer { /* This is the viewing window */
width:300px;
overflow:hidden;
height:388px;
}
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
width:300px;
overflow:hidden;
}
.wrapper img {
display:none;
}
.wrapper p {
font-size:.7em;
line-height:1em;
margin:5px 25px;
}
.hideSmall img {
display:block;
margin:0 0 10px 12px;
}

И на этом мы закончили все, что касается нашего слайдера с портфолио. Проверяйте свой результат! С помощью такого слайдера вы без труда сможете привлечь внимание потенциальных покупателей или клиентов.

Скачать исходный код примера, разработанного в ходе руководства.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 6478   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031