Вы просматриваете материал Интересный плагин jQuery ДО/ПОСЛЕ. Думаю вам понравился материал Интересный плагин jQuery ДО/ПОСЛЕ и вы воспользуетесь им! :)

Интересный плагин jQuery ДО/ПОСЛЕ

Автор: nikson1991 Скрипты для ucoz 12.09.2009
Интересный плагин jQuery ДО/ПОСЛЕ
Демо версия

В этом уроке я расскажу Вам про интересный плагин jQuery ДО/ПОСЛЕ.

Это очень интересное решение. Возможности его использования практически безграничны. Его могут использовать доктора для показа фото своих пациентов до и после; пользователи фотошопа могут показывать различия в изображениях, дизайнеры могут показывать свои работы до и после и так далее... Размер плагина всего 7 кб и его можно использовать множество раз на странице.

Почему этот плагин очень крут?

- красивый эффект без Flash
- Всего 7 кб
- Можно использовать много раз в разных контейнерах
- При отключенном JavaScript показывает оба изображения

Как использовать

Прежде всего, изображения до и после должны быть одного размера. Каждое изображение должно быть в отдельном блоке, и оба изображения еще в одном блоке с ID. Вот так:

Code

<div id="container">
<div><img alt="before" src="p/before.jpg" width="600" height="366" /></div>
<div><img alt="after" src="p/after.jpg" width="600" height="366" /></div>
</div>

У всех изображений ДОЛЖНЫ быть прописаны высота и ширина, иначе не будет работать.

Для правильной работы плагина в шапке документа нам необходимо также прописать фреймворк jQuery, jQuery UI, скрипт плагина.

Code
<script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/jquery.beforeafter.js"></script>
  <script type="text/javascript">
  $(function(){
$('#container').beforeAfter();
});
</script>


Опции

Можно настраивать следующие опции:

animateIntro - позволяет задать стартовое положение бегунка с правой стороны и медленно двигать его налево до центра (по умолчанию - false)

introDelay - если animateIntro true, тогда можно задать задержку в милисекундах перед началом анимации

introDuration - если animateIntro true, тогда можно задать продолжительность в милисекундах всей анимации

showFullLinks - показывать или не показывать ссылки под картинкой, которые позволяют сразу увидеть картинку до или после

Данные опции необходимо прописывать при инициализации:

Code
$('#container').beforeAfter({
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : false
});

Вот и все готово! Всем всего наилучшего!


Скачать Интересный плагин jQuery ДО/ПОСЛЕ

Просмотров: 3568 Рейтинг: 4.8
hxxp://ruseller.com
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]