—»     —»   jQuery-плагин Before/After
  Раздел: Java-Скрипты   Комментариев: 2  

jQuery-плагин Before/After

В последнее время на некоторых веб-сайтах стали появляться фотографии, отображающие своего рода какое-то место или людей До и После какого-то события или отрезка времени. Например, на веб-сайте New York Times такие изображения отображены посредством Flash’а – они представляет собой нечто вроде бутерброда, в котором одна фотография лежит поверх другой, а пользователь может посредством специального слайдера, скажем так, «намазывать масло на хлеб». Очень наглядный и эффективный способ представления. Но ведь это необязательно реализовывать посредством Flash, это может быть реализовано посредством javascript и jQuery. Вот результат:

jQuery-плагин Before/After

Вполне сносно, не правда ли? Возможности данного плагина безграничны. Доктора могут использовать данный плагин для отображения своих пациентов до и после, гуру Photoshop’а могут демонстрировать свои манипуляции, редизайнеры могут хвастаться своими воплощенными проектами. Данный плагин весит всего 7кб и может использоваться для отображения сразу нескольких изображений на странице.

Скачать

Скачать jquery.beforeafter.zip (версия 1.2.0 – Октябрь 20, 2010)
Внимание! У вас нет прав для просмотра скрытого текста.


Что же такого хорошего в данном плагине?

* Приятный эффект без применения Flash
* Вес в 7кб (4кб в архиве)
* Возможность многократного использования на одной странице
* Возможность адаптации к браузерам без включенной поддержки javascript.

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

Начнем с того, что у обоих ваших изображений должен быть одинаковый размер. Каждое изображение должно быть размещено в отдельный div, и эти оба div’а должны быть размещены в одном с заданным ID. Смотрите пример.

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

У !ВСЕХ! изображений должен быть указан параметр ширины и высоты, иначе плагин не будет работать в Safari, Chrome и вероятно в остальных браузерах семейства webkit.

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
    $('#container').beforeAfter();
});
</script>

Вот и всё! Теперь вы можете применять этот плагин к любому количеству изображений на странице.

Опции

Последующие функции позволяют вам опционально настроить плагин:

* animateIntro – функция самостоятельно прокручивает слайдер полностью до правой части контейнера, а затем возвращает ползунок на центральную точку (по умолчанию: false)
* introDelay – Если animateIntro = true, то здесь можно указать количество миллисекунд, после которых запустится автоматическая прокрутка (по умолчанию 1000).
* introDuration – Если animateIntro = true, то здесь можно указать количество миллисекунд, в течение которых будет идти автоматическая прокрутка (по умолчанию 1000).
* showFullLinks – отображение или отключение ссылок, расположенных под изображениями для перехода в полный размер (по умолчанию: true)
* imagePath – путь (абсолютный или относительный) до каталога хранения изображений (default ‘/js/beforeAfter/’).

Опции добавляются при вызове скрипта:

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

Наслаждайтесь!

Посмотреть демо

* Пример 1
* Пример 2

Учтите, что плагин использует несколько изображений, которые хранятся в одной и той же папке, где расположен сам плагин. Если вы переместите плагин в другую папку на севере, то обновите пути к изображениям.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: скрипты, javascript, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 9802   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 31 марта 2011 @ 07:27
Написал: guest — группа: Читатели  
На сайте с: 7.02.2011   |   Публикаций: 0   |   Комментариев: 52
ICQ: --- не указано ---
Мне понравилось из примера номер 2, как уродину помещают на обложку журнала.


--------------------
А знаете ли Вы, что что 90% людей не замечают в этом тексте повторение слова «что» в самом начале.
Комментарий #2: 22 октября 2011 @ 14:37
Написал: Diana — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А у меня не закасивается этот плагин :((( Что делать?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2022    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031