В этом уроке я расскажу Вам про интересный плагин jQuery ДО/ПОСЛЕ.
Это очень интересное решение. Возможности его использования практически безграничны. Его могут использовать доктора для показа фото своих пациентов до и после; пользователи фотошопа могут показывать различия в изображениях, дизайнеры могут показывать свои работы до и после и так далее... Размер плагина всего 7 кб и его можно использовать множество раз на странице.
Почему этот плагин очень крут?
- красивый эффект без Flash
- Всего 7 кб
- Можно использовать много раз в разных контейнерах
- При отключенном JavaScript показывает оба изображения
Как использовать
Прежде всего, изображения до и после должны быть одного размера. Каждое изображение должно быть в отдельном блоке, и оба изображения еще в одном блоке с ID. Вот так:
<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, скрипт плагина.
<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 - показывать или не показывать ссылки под картинкой, которые позволяют сразу увидеть картинку до или после
Данные опции необходимо прописывать при инициализации:
$('#container').beforeAfter({
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : false
});
Вот и все готово! Всем всего наилучшего!