On-line презентация на JQuery
В интернет пространстве рунета колоссальное количество различных фотогалерей на базе фреймворка JQuery. И как водится, у каждого свои плюсы и минусы.
Но бывают задачи, которые решение которых сложно найти в интернете и тогда приходится писать решение самому. К примеру такой задачи относится наглядная презентация слайдов.
В представленной реализации, необходимо было реализовать следующие моменты:
должен быть приятного вида и интуитивно понятным;
должны быть кнопки управления презентацией;
должен быть таймаут, когда слайды будут автоматически «прокручиваться»;
не должно быть каких-либо перезагрузок страниц;
код реализации должен быть кросс-браузерным;
установка кода и вся настройка должны быть максимально простыми.
Поехали!
Собственно пример того, как это работает:
Пример кода на странице:
<link rel="stylesheet" type="text/css" media="all" href="/files/presentation/style.css" />
<script language="javascript" type="text/javascript" src="/files/presentation/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/files/presentation/jquery.opacity.js"></script>
<script language="javascript" type="text/javascript" src="/files/presentation/jquery.presentation.js"></script>
<div class="presentation-container" align="left">
<div class="slides">
<img src="/files/presentation/1.jpg" />
<img src="/files/presentation/2.jpg" />
<img src="/files/presentation/3.jpg" />
<img src="/files/presentation/4.jpg" />
<img src="/files/presentation/5.jpg" />
<img src="/files/presentation/6.jpg" />
<img src="/files/presentation/7.jpg" />
<img src="/files/presentation/8.jpg" />
<img src="/files/presentation/9.jpg" />
</div>
<div class="prev"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="next"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="prevEnd"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="nextEnd"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="play"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="pause"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
</div>
<script>
$('.presentation-container').jPresentation();
</script>
А теперь разложим все по полочкам:
Для начала ном нужно подключить расширения к странице, это таблица стилей:
<link rel="stylesheet" type="text/css" media="all" href="/files/presentation/style.css" />
и сами JS-скрипты:
<script language="javascript" type="text/javascript" src="/files/presentation/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/files/presentation/jquery.opacity.js"></script>
<script language="javascript" type="text/javascript" src="/files/presentation/jquery.presentation.js"></script>
Здесь:
jquery.min.js - фреймворк JQuery;
jquery.opacity.js - JQuery плагин, отвечает за кросс-браузерный цветовой альфа-канал HTML-элементов, т.е. уровень прозрачности HTML-элементов;
jquery.presentation.js - JQuery плагин, отвечает за работу блока презентации.
Для внедрения кода в нашу страницу, необходимо указать контейнер, где будет происходить всё действо презентации, список слайдов и кнопки.
Контейнер:
<div class="presentation-container" align="left">
...
</div>
Наши слайды:
<div class="slides">
<img src="/files/presentation/1.jpg" />
<img src="/files/presentation/2.jpg" />
<img src="/files/presentation/3.jpg" />
<img src="/files/presentation/4.jpg" />
<img src="/files/presentation/5.jpg" />
<img src="/files/presentation/6.jpg" />
<img src="/files/presentation/7.jpg" />
<img src="/files/presentation/8.jpg" />
<img src="/files/presentation/9.jpg" />
</div>
И кнопки:
<div class="prev"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="next"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="prevEnd"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="nextEnd"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="play"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
<div class="pause"><a href="javascript: void(0)"><img src="/files/presentation/spacer.gif" border="0" /></a></div>
В перзентации имеется шесть кнопок:
prev - возврат к предыдущему кадру;
next - переход к следующему кадру;
prevEnd - возврат в начало презентации, т.е. на первый кадр;
nextEnd - переход в конец презентации, т.е. на последний кадр;
play - запуск автоматической прокрутки слайдов презентации, с интервалом каждые 13 секунд;
pause - пауза, оставнока автоматической прокрутки слайдов презентации.
Вот и всё!
Весь код можно скачать тут .
