Главная > Java-Скрипты > jQuery-плагин Before/After

jQuery-плагин Before/After


30 марта 2011, 19:20. Разместил: Mysterious Master
В последнее время на некоторых веб-сайтах стали появляться фотографии, отображающие своего рода какое-то место или людей До и После какого-то события или отрезка времени. Например, на веб-сайте 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

Учтите, что плагин использует несколько изображений, которые хранятся в одной и той же папке, где расположен сам плагин. Если вы переместите плагин в другую папку на севере, то обновите пути к изображениям.
Вернуться назад