info@webumka.ru, +7 (903) 729-68-45

Почему мы?

Ориентация

мы всегда лицом к клиенту

Оперативность

мы дорожим временем наших клиентов

Инновации

мы даём клиентам нечто большее

Профессионализм

наши знания и опыт выигрыш наших клиентов

«Да!»

так говорит каждый наш клиент

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 - пауза, оставнока автоматической прокрутки слайдов презентации.

Вот и всё!

Весь код можно скачать тут.