Создание слайдов с помощью jFlow
Прежде чем мы начнем изучать этот учебник вам понадобиться несколько вещей:
- Готовый шаблон сайта, куда Вы хотите вставить jFlow
Прежде чем начать урок сразу отвечу на вопрос, какой может у Вас появиться. «Почему он использует jQuery 1.2.6 если уже есть более новые версии?». Ответ прост! Плагин jFlow 1.1 (который мы будем использовать) не корректно себя ведет с новыми библиотеками jQuery.
После того как Вы скачали все нужные файлы для этого урока, откройте папку со своим шаблоном сайта. Создайте новую папку "JS", а затем скопируйте туда файлы jFlow и jQuery 1.2.6. Откройте Ваш index.html и вставьте следующий код между тегами <head> и </head>:
<script src="/js/jquery.flow.1.1.min.js" type="text/javascript"></script>
Под прикрепленными файлами добавьте этот кусок JavaScript:
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "900px",
height: "250px"
});
});
</script>
Без скрипта, который находить выше, наши слайды не будут скользить. Ширина и высота обязательна. Если вы не зададите высоту, то скрипт будет работать в Firefox, но ни в Internet Explorer. Размеры моего слайда составляют 900х250 px. Эти два значения Вы должны настроить в соответствии с Вашим дизайном. Теперь давайте рассмотрим наш код более детально.
Во-первых мы имеем контейнер Div для #сontroller, это Div в который будут вложены все контейнеры. Также у нас есть Div для #slides – где будут находиться все слайды. Эти контейнеры имеют размер, который можно указать как в пикселях, так и в процентах, в зависимости от структуры Вашего сайта.
Давайте посмотрим мою страницу, куда мы будем вставлять слайды. Код выглядит следующим образом:
<div class="featured-text">
<h1 class="featured">featured text here 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod vel euismod tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae turpis augue. Nulla facilisi. Continue Reading...</p>
</div>
<div id="featured-image01">
<div class="featured-buttons">
<div class="featured-btn">
<img src="/img_articles/17577/images/next_btn.png" alt="Next" />
<div class="featured-btn"><img src="/img_articles/17577/images/prev_btn.png" alt="Previous" />
</div>
</div>
</div>
</div>
</div>
Над контейнером Div для #featured, где будет расположены наши слайды jFlow, скопируйте и вставьте следующий код:
<span class="jFlowControl">№ 1</span>
<span class="jFlowControl">№ 2</span>
<span class="jFlowControl">№ 3</span>
</div>
Мой главный контейнер имеет id=featured переименуем его в #slide. Создадим стиль для наших слайдов, который будет их скрывать.
display: none;
}
Теперь добавим еще один пустой Div, который закроем в низу. И у нас получиться такой код:
<div id="slides">
<div> <!—Начало контейнера, который добавили-->
<div class="featured-text">
<h1 class="featured">featured text here 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod vel euismod tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae turpis augue. Nulla facilisi. Continue Reading...</p>
</div>
<div id="featured-image01">
<div class="featured-buttons">
<div class="featured-btn">
<img src="/img_articles/17577/images/next_btn.png" alt="Next" />
<div class="featured-btn"><img src="/img_articles/17577/images/prev_btn.png" alt="Previous" />
</div>
</div>
</div>
</div>
</div><!—Закрытие контейнера, который вставили-->
</div>
Вы так же можете вставлять еще слайды и получиться так:
<div id="slides">
<div> <!--START #1-->
Первый слайд
</div><!--END #1-->
<div><!--START #2-->
Второй слайд
</div><!--END #2-->
<div><!--START #3-->
Третий слайд
</div><!--END #3-->
</div>
В структуре нашего сайта есть две стрелки, влево и вправо:
<div class="featured-btn"><img src="/images/next_btn.png" alt="Next" /></div>
<div class="featured-btn"><img src="/images/prev_btn.png" alt="Previous" /></div>
Для каждой стрелки мы должны создать новые классы и привязать их к jFlow:
class="jFlowNext"
class="jFlowPrev"
Класс jFlowNext будет менять изображение на следующее, а jFlowPrev - на предыдущее. Теперь мы должны добавить обои классы нашим изображениям. Вот так:
<div class="featured-btn"><img src="/img_articles/17577/images/prev_btn.png" alt="Previous" class="jFlowPrev" /></div>
После того как Вы все сделали, сохраните и посмотрите, как это выглядит.
Вот и все надеюсь, Вам урок был понятен. Если, что-то не поняли напишите я обязательно отвечу.
Последние уроки категории:
Установка jQuery плагина - jDigiClock - Digital Clock
jDigiClock — интересный плагин, выполненный на jQuery. Вдохновением для данного плагина стал виджет Hero Clock на HTC. Плагин может показывать цифровое время и погоду, достаточно удобно настраивается и его легко устанавливать.
Русско-английский переводчик используя Google Ajax API
Google предоставляет разработчикам массу возможностей для работы со своими сервисами. Как вы наверное поняли из названия поста, я буду использовать Google AJAX API. Что же это такое и для чего это нужно можно прочитать здесь и здесь. Для работы нам понадобятся: php и jQuery.
Создаем Ajax конвертер валют
Помимо основных функций поисковой системы Google предоставляет ещё и множество других услуг. Одна из них это калькулятор с расширенными возможностями. Как это можно использовать узнаете в этой статье.
Красивое акордеон меню на jQuery
Комментарии: