UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Человек, имеющий цель и план ее осуществления, всегда находит возможности для ее реализации. © Наполеон Хилл

»

Введите код полученный после подписки

  • 3

  • 0

Эффект До и После с помощью плагина JQuery BeforeAfter

Автор - Жур Артур | Добавлено - 2014-01-17 | Просмотров - 6748 | Скачено - 59

1Подключение плагинов

Первым делом нужно подключить плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> . Без этого плагина JQuery код работать не будет!

Подключение плагина JQuery


Теперь нужно подключить специальный плагин JQuery BeforeAfter. Находится он в архиве с проектом.

Подключение плагина JQuery BeforeAfter


2Подключение плагина к блоку с картинками

$(function(){

   $('#container1').beforeAfter();
    
});

#container1 - это и есть id блока где находятся картинки.

3HTML код блока

// Основной блок который подключается к плагину.
// Картинка ДО
До
// Картинка ПОСЛЕ
После

У картинок высота и ширина должна быть одинакова!

4Дополнительные опции плагина

$(function(){

    $('#container1').beforeAfter({
    animateIntro : true,
    introDelay : 2000,
    introDuration : 500,
    showFullLinks : false
});
    
});
  • animateIntro - Позволяет задать стартовое положение бегунка с правой стороны и медленно двигать его налево до центра (по умолчанию - false)
  • introDelay - Если animateIntro true, тогда можно задать задержку в милисекундах перед началом анимации
  • introDuration - Если animateIntro true, тогда можно задать продолжительность в милисекундах всей анимации
  • showFullLinks - Показывать или не показывать ссылки под картинкой, которые позволяют сразу увидеть картинку до или после

Интересное

Комментарии